07 Jun 2010 av Dieter Kalisch

@font-face css

[tweetmeme] Efter en herrans massa år med ett smalt utbud av webbsäkra typsnitt har fler och fler fått upp ögonen för en teknik som kallas @font-face. @font-face gör det möjligt att baka in ett valfritt typsnitt på hemsidor. Hur fungerar det? @font-face är smartare än man kan tro. På Fontsquirrel kan man ladda upp det typs...

[tweetmeme]
Efter en herrans massa år med ett smalt utbud av webbsäkra typsnitt har fler och fler fått upp ögonen för en teknik som kallas @font-face. @font-face gör det möjligt att baka in ett valfritt typsnitt på hemsidor.

Hur fungerar det?


@font-face är smartare än man kan tro. På Fontsquirrel kan man ladda upp det typsnitt man vill använda (förutsatt att du har tillåtelse att använda det på webben) och göra ett gäng val. Generatorn genererar sedan filer som funkar till alla vanliga webbläsare idag: Internet Explorer 6-9, Firefox, Chrome, Safari och Opera, som står för 99.3% av all trafik på webben (Källa: W3schools.com).

När besökaren surfar in på en sida som använder sig av @font-face gör tekniken tre saker:

1. Kollar om besökaren har fonten installerad på datorn.
2. Hämtar fonten från servern och sparar den i webbläsarens Cache.
3. Visar fonten på hemsidan.


Fördelen med @font-face är att besökaren inte behöver ha flash installerat som man behöver vid användning av t.ex. sIFR.

När man skriver CSS bör man jobba med ”backup-fonter”. Dvs att om användaren inte har en viss font installerad på datorn, ska en annan font visas istället. En sådan css-kod kan se ut såhär (OBS! detta är inte @font-face):

body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, Verdana, sans-serif;
}

Här ser vi att fonten Lucida Grande är den primära fonten. Om besökaren inte har Lucida Grande installerat på sin datorn försöker webbläsaren visa Lucida Sans Unicode istället. Om inget av dessa typsnitt (Lucida Grande, Lucida Sans Unicode, Lucida Sans, Helvetica, Arial, Verdana) finns installerade så visar webbläsaren första bästa sans-serif.

 Så använder vi @font-face


När du bakar in ett @font-face typsnitt ska koden se ut såhär:
@font-face {
font-family: 'FontNamn';
src: url(/font/fontnamn.eot);
src: local('☺'), url(/font/fontnamn.woff) format('woff'), url(/font/fontnamn.otf) format('opentype'), url(/font/fontnamn.svg#fontO6bAbzgz) format('svg');
font-weight: normal;
font-style: normal;
}

.eot-filen används av Internet Explorer.


.woff används av Firefox.


.otf och svg används av alla andra webbläsare.



Alla dessa filer genererar du ut på http://www.fontsquirrel.com/fontface/generator

Som ni ser i ” src: local('☺')” har vi valt att inte leta efter denna font lokalt på datorn då det i vissa fall finns olika fonter med samma namn (en font heter aldrig en smiley-symbol). Har man otur kommer fonten då se väldigt udda ut.

En @font-face deklaration i CSS kan se ut såhär:
h1, h2, h3, h4, h5, h6 {
font-family: 'FontNamn', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, Verdana, sans-serif;
font-weight: normal;
}

Om besökaren har en väldigt slö internetuppkoppling kan han/hon se en webbsäker font i någon hundradel innan @font-face fonten har hämtats till dennes dator. I dagsläget använder vi inte @font-face på brödtext, eftersom det finns en risk att det blir svårläst, men det fungerar utmärkt på rubriker.

Andra sätt att styla en font på


font-size: storlek på texten.


font-weight: fet text


text-decoration: bla understreck.


font-variant: small-caps.


text-transform: stora/små bokstäver.


letter-spacing: avståndet mellan varje tecken.



Vill man lyxa till det kan man även styla till första textraden eller bara första bokstaven. Detta fungerar (självklart) inte i alla Internet Explorer-versioner.

:first-line: ändra bara första textraden.


:first-letter: ändra bara första bokstaven.



Detta kan se ut såhär:
div#text p:first-line {
font-variant: small-caps;
}

Som min kollega Michal har pratat om tidigare på denna blogg så har Google börjat erbjuda en @font-face-lösning som heter Google Font. Detta är en bra lösning för vissa, tyvärr har de en så länge ett begränsat antal typsnitt, därför kommer jag i fortsättningen alltid generera ut egna filer så att jag har full koll på allting.

Frågan är nu om ni märkt att vi använder @font-face på www.produktion203.se?