CSS Referensbok

Fontdeklarationer är de deklarationer som används mest. De låter dig i detalj beskriva hur fonterna ska se ut. Det finns sex olika fontegenskaper: font-family, font-style, font-variant, font-weight, font-size och font. Med de fem första specificerar du varje egenskap individuellt, dvs du skapar fem olika deklarationer. Font är förkortning av de fem och tillåter dig samla ihop alla fontdeklarationer till en enda deklaration.

* font-family (typsnitt)

värden: [<family-name> | <generic-family>]*
(utgångsvärde - bestäms av www-klienten) OBS! stjärnan betyder att familjerna kan repeteras enligt denna ordningsföljd kan tilldelas: alla element
arv: ja

Typsnitten som anges i deklarationen måste vara installerade på användarens dator. Är de inte det kommer texten visas med standardfonten.

Med denna egenskap kan du specificera typsnitten på fonterna. Du kan lista en rad olika fontfamiljer eller specifika typsnitt. Familjerna separeras med ett komma. Om en användare inte har fonter som tillhör den första familjen installerade på sin dator kommer www-klienten att söka efter fonter från den andra och sedan den tredje osv. För att specificera typsnitten ur en fontfamilj som ska gälla hela dokumentet deklarerar du den till selektorn BODY och låter andra element ärva det typsnittet. För att specificera typsnitten ur en fontfamilj som ska gälla i ett visst element, t ex rubriker på nivå 1, deklarerar du den till selektorn H1. Elementen som kan finnas i en sådan rubrik, t ex EM, kommer då att ärva rubrikens typsnitt om den saknar egen deklaration.

Reglerna skriver du enligt följande:

Extern mallfil:

BODY {font-family: helvetica, "annan familj"}
H1 {font-family: "någon familj"}

Inbäddad stil:

Inline-stil:

<BODY STYLE="font-family: helvetica, "annan familj"> <H1 STYLE="font-family: "någon familj">Rubrik</H1>

OBS! Alla namn som innehåller mellanslag måste citeras annars ignoreras det som kommer efter mellanslaget: "Någon familj", "annan familj", t ex "Times New Roman". Utan citat skulle "Times New Roman" tolkas som Times.

* font-style

värden: normal | italic | oblique (utgångsvärde - normal)
kan tilldelas: alla element
arv: ja

Med detta egenskap kan du välja kursiva eller lutande typsnitt ur den tidigare specificerade fontfamiljen.

H1, H2, H3, H4, H4 { font-family: serif; font-style: italic}

kommer att visa alla specificerade rubriker kursivt

* font-variant

värden: normal | small-caps (utgångsvärde - normal)
kan tilldelas: alla element
arv: ja

Med denna egenskap kan du välja vanliga eller kapitäl typsnitt ur den tidigare specificerade fontfamiljen.

H1 {font-family: serif; font-variant: small-caps}

kommer att visa rubriken på nivå 1 som kapitäler

* font-weight

värden: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
(utgångsvärde - normal)
kan tilldelas: alla element
arv: ja

Med denna egenskap kan du välja hur fet stilen på typsnitten ur den tidigare specificerade fontfamiljen ska vara.

Normal är lika med 400
Bold (fet) lika med 700
Bolder och lighter (mer eller mindre fet än förälder) är värden som är relativa till de värden vilka selektoren i fråga ärver, dvs förälders deklaration. Om till exempel selektorn BODY är förälder till selektorn H1 kommer rubriken på nivå 1 ärva den deklaration som du tilldelade BODY om ingenting annat specificeras. Om du deklarerar BODY {font-weight: bold} kommer även H1 att visas med fet stil. Men om du deklarerar H1 {font-weight: bolder} kommer rubrikens stil vara mer fet än den som anges i BODY.

H1 {font-weight: bold}
eller
H1 {font-weight: 700}

Båda deklarationerna kommer att visa rubriken på nivå 1 med fet stil.

* font-size

värden: <absolute-size> | <relative-size> | <length> | <percentage> (utgångsvärde - medium)
kan tilldelas: alla element
arv: ja

absolute-size (fasta mått) xx-small | x-small | small | medium | large | x-large | xx-large standard medium) - kan även anges i punkter (pt), tum (in), centimeter (cm), pixlar (px), millimeter (mm) eller picas (pc)
relative-size - larger | smaller (storleken är relativ till förälderelement)
length - längd på bokstäven m (em), x (ex)
percentage - anges i procent % (storleken är relativ till förälderelement)

H1 {font-size: larger}
eller
H1 {font-size: 200%}
eller
H1 {font-size: 24pt}

larger kommer att vara större än förälder, 200% kommer att vara dubbelt så stor som förälder. Om förälders fontstorlek är 12 punkter kommer i så fall rubriken vara 24 punkter.

* line-height

värden: normal | <number> | <length> | <percentage> (utgångsvärde - normal)
kan tilldelas: alla element
arv: ja

OBS! line-height tillhör egentligen inte fontegenskaper utan text som kommer att beskrivas i nästa avsnitt men då denna egenskap kan specificeras tillsammans med fontstorleken är det lämpligt att nämna det här.

Med denna egenskap kan du specificera radhöjden. Om t ex rubriken är 24 punkter stor kan en lämplig radhöjd vara 28 punkter; 2 punkter ovan och 2 under. Var försiktig med radhöjder. Om en rubrik (eller vilket annat element som helst) innehåller en bild eller annat element vars radhöjd är större en rubrikens kommer bilden överlappa det som finns under eller ovanför rubriken.

H1 { line-height: 2.8; font-size: 24pt } /* number */
H1 { line-height: 2.8em; font-size: 24pt } /* length */
H1 { line-height: 280%; font-size: 24pt } /* percentage */

* font

värden: <font-style>, <font-variant>, <font-weight>, <font-size>, <font-family>, /<line-height> (utgångsvärde - inte specificierat för förkortningar)
kan tilldelas: alla element
arv: ja

Om vi samlar alla deklarationer tilldelade rubriken på nivå 1 kommer regeln att se ut så här:

H1 { font-family: helvetica; font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 24pt; }

och

H1 { line-height: 28pt}

som även den kan ingå i föregående regel.

Med hjälp av font kan du på ett smidigare sätt samla ihop alla font-deklarationer och line-height tilldelade en och samma selektor. FONT är förkortning till alla ovannämnda egenskaper.

Genom att lista värderna ett i taget kan alla regler förkortas enligt följande:

H1 {font: 24pt helvetica small-caps bold italic}

Som jag skrev tidigare tillhör inte radhöjden fontegenskapen. Men du kan uppge både radhöjden och fontstorleken tillsammans. Istället för att skriva:

H1 {font-size: 24pt; line-height: 28}

kan du förkorta regeln till:

H1 {font: 24pt/28pt}

* Exempel:

Ett stycke: fontstorlek 10 pt, radhöjd 1.2 em, typsnitt arial, stil italic

P {font: 10pt/1.2em arial italic}

En rubrik på nivå 2: fontstorlek 130% (relativ till fontstorlek tilldelad BODY), typsnitt Times New Roman, stil sned

H2 {font: 130% "Times New Roman" oblique}

En division: fontstorlek 10pt, radhöjd 120 % (relativ till fontstorleken), fontvikt bolder (än förälder), typsnitt arial

DIV {font: 10pt/120% bolder arial}

BODY - gäller hela dokumentet om inga formateringsregler tilldelas andra element: fontstorlek 10 pt, fontfamilj helvetica eller sans-serif ifall användaren inte hade fonter ur den första familjen installerade på sin dator.

BODY {font: 10pt helvetica, sans-serif}

Upp | CSS-referensbok | Referensböcker

Fontegenskaper

Inledning