CSS font

Med CSS går det enkelt att bestämma typsnitt, storlek samt om texten ska vara kursiv eller i fetstil.

HTML

<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean imperdiet iaculis nulla vitae interdum.
Aliquam semper sodales mauris, eget pulvinar risus viverra ac.</p>

Typsnitt

CSS-egenskapen "font-family" bestämmer vilket typsnitt en text ska ha.

CSS

p {font-family:"Palatino Linotype", Palatino, serif;}

Eftersom alla webbläsare inte har stöd för alla typsnitt går det att ange flera liknande typsnitt efter varandra och avsluta med namnet på huvudgruppen. Webbläsaren kommer att börja längst fram i listan och visa det första typsnittet som stöds.

Läs mer om typsnittslistor

Vanliga typsnitt

Det finns en mängd olika typsnitt som kan delas in fem huvudgrupper. Dessa är några av de vanligaste typsnitten:

 

Huvudgrupp	Typsnitt
Serif	Bookman Old Style, Times New Roman, Georgia, Garamond, Palatino Linotype
Sans-serif	Arial, Geneva, Helvetica, Verdana, Tahoma, Trebuchet MS
Monospace	Courier, Courier New, Lucida, Console
Cursive	Comic Sans MS
Fantasy	Impact

Några exempel:

CSS

h1,p {font-family: Georgia, "Times New Roman", Times, serif;}

CSS

h1,p {font-family: Monaco, "Lucida Console", monospace;}

CSS

h1,p {font-family: Arial, Helvetica, sans-serif;}

CSS

h1,p {font-family: "Bradley Hand ITC", "Apple Chancery",
      "URW Chancery L", cursive; }

CSS

h1,p{font-family: "Lucida Sans", Lucida, sans-serif;}

CSS

h1,p{font-family: "Times New Roman",Times,serif;}

CSS

h1,p{font-family: "Courier New", Courier, monospace;}

Textstorlek

CSS-egenskapen "font-size" bestämmer storleken på texten. Textstorleken kan anges på flera olika sätt.

Med pixlar (px) eller em

CSS

h1 {font-size:32px}
p {font-size:16px}

CSS

h1 {font-size:2em}
p {font-size:1em}

1em är 16px

Med procent (%)

CSS

h1 {font-size:200%}
p {font-size:100%}

Ett enkelt sätt att snabbt kontrollera textstorleken på en sida är att använda en kombination av px och procent. Jämför nedanstående två exempel.

CSS

body {font-size:11px}
h1 {font-size:200%}
p {font-size:100%}

CSS

body {font-size:13px}
h1 {font-size:200%}
p {font-size:100%}

Läs mer om olika sätt att ange textstorlek

Kursiv stil

CSS.egenskapen "font-style" används för att ange kursiv stil.

CSS

h1 {font-style:normal}
p {font-size:italic}

Fetstil

CSS-egenskapen "font-weight" används för att ange fet stil.

CSS

h1 {font-weight:normal}
p {font-weight:bold}

Text varianter

CSS-egenskapen "font-varianter" används för att skriva texten med små kapilärer.

CSS

h1 {font-variant:small-caps}
p {font-variant:small-caps}

Samlingsegenskap för font

Med CSS-egenskapen "font" gör det möjligt at ange alla egenskaper på samma gång.

Egenskaperna måste anges i ordningen: font-style, font-variant, font-weight, font-size/line-height, font-family.

CSS

p { font:italic bold 12px/18px Times,serif; }