@font-face regel – CSS3 webfonterMed font-face regelen kan webdesignere bruke hvilken som helst font man vil, uansett om brukeren har den installert på datamaskinen sin eller ikke. Fontene er definert innenfor CSS3, og vil bli lastet ned til brukeren. Webdesignere må sørge for at fonten er lisensiert for nettbruk, før den blir lastet opp til serveren. For Internet Explorer, anbefales EOT (Embedded Opentype) filer. For resten av nettleserne kan du enten bruke OTF (Opentype) eller TTF (Truetype). Det finnes også andre formater som er tilgjengelige, som SVG (Scalable Vector Graphics) og WOFF (Web Open Font Format). Sistnevnte er støttet i alle nyere nettlesere (Chrome 5, Firefox 3.6, Internet Explorer 9, Opera 11.1, og Safari 5.1).
Code (CSS):/*
Basic @font-face regel
*/
@font-face {
font-family: myFont;
src: url('my_font.eot');
src: url('my_font.otf')
src: url('my_font.ttf')
}
h1 {
font-family:myFont;
}
Koden ovenfor vil gjøre jobben i de fleste tilfeller, men det finnes også mer pålitelige teknikker. Webdesigneren kan utvide regelen med en indikator på skriften
(format). En annen teknikk er å legge til
local i front av skrifttype. Nettleseren vil da se etter en lokal kopi av fonten i tilfelle brukeren allerede har den.
Code (CSS):/*
Utvidet @font-face regel
*/
@font-face {
font-family: myFont;
src: local('My Font'), local('My-Font'), url('my_font.eot') format('embedded-opentype');
src: local('My Font'), local('My-Font'), url('my_font.otf') format('opentype');
src: local('My Font'), local('My-Font'), url('my_font.ttf') format('truetype');
src: local('My Font'), local('My-Font'), url('my_font.svg#myfont') format('svg');
src: local('My Font'), local('My-Font'), url('my_font.woff') format('woff');
}
h1 {
font-family:myFont;
}
Home
Pages: 
