Fonte
Font Family
Med font-family sætter man hvilken font familie der skal bruges til en tekst.
En font familie skal helst indeholde flere font navne, således, at hvis den første font ikke er installeret i brugerens browser, så kan den næste bruges etc. Start med den font du helst vil bruge og slut med en generel font.
Det kan se sådan her ud:
p {font-family:"Times New Roman", Times, serif;}
Se typiske font kombinationer her: Web Safe Font Combinations
Font Style
Font-style bruges typisk til at specificere italic tekst
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Font Size
Font-size sætter størrelsen på teksen. Selv om du kan sætte størrelsen på teksten med font-size, skal du alligevel altid bruge h1, h2, h3 .. til overskrifter og p til brødtekst.
Font-size kan sættes til en absolut eller relativ størrelse
Absolut størrelse:
- Sætter teksten til en specifik størrelse
- Tillader ikke at brugeren ændrer tekst størrelsen
- Absolut størrelse er godt, hvis du kender den fysiske størrelse af dit output
Relativ størrelse:
- Sætter størrelsen i forhold til omgivende elementer
- Tillader brugeren at ændre størrelsen i sin browser
Set Font Size med pixels
Definerer du tekst størrelsen med pixels har du fuld kontrol over tekstens størrelse
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
Set Font Size med Em
Man kan vælge at bruge em i stedet for pixels - em anbefales af W3S
1em er lig med default font størrelse. Default font størrelse i de fleste browsere er 16px. Så i udgangspunktet er 1em = 16px.
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Brug en kombination af procent og em
En løsning, der virker i alle browsere er at sætte default font-size i procent for body elementet:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
Flere font settings
The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
Property | Description | Values | CSS |
font |
Sets all the font properties in one declaration |
font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar inherit |
1 |
font-family |
Specifies the font family for text |
family-name generic-family inherit |
1 |
font-size |
Specifies the font size of text |
xx-small x-small small medium large x-large xx-large smaller larger length % inherit |
1 |
font-style |
Specifies the font style for text |
normal italic oblique inherit |
1 |
font-variant |
Specifies whether or not a text should be displayed in a small-caps font |
normal small-caps inherit |
1 |
font-weight |
Specifies the weight of a font |
normal bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit |
1 |