Hvordan du bruker innebygde fonter for HTML5 og CSS3-baserte websider - dummies

Selv om en HTML5-webutvikler kan foreslå en hvilken som helst skrift for en nettside, er fontfilene tradisjonelt en klientnivåaktivitet. Hvis klienten ikke har skrifttypen installert, vil hun ikke se den. Heldigvis støtter CSS3 en fornuftig løsning for å gi nedlastbare fonter.

Stilen fungerer ikke som de fleste CSS-elementene. Det gjelder ikke merking til noen del av siden. I stedet definerer den en ny CSS-verdi som kan brukes i andre markup. Spesielt lar den deg legge inn en skrifttypefil på serveren din og definere en skrifttypefamilie ved hjelp av denne skrifttypen.

@ font-face {font-family: "Miama"; src: url ("Miama. otf");}

Skriftfamilieattributtet angir navnet du vil gi denne skrifttypen i resten av CSS-koden. Vanligvis ligner det på skriftfilnavnet. Skriftfamilieattributtet er nettadressen til den faktiske skrifttypefilen som den er funnet på serveren. Etter at et skrifttype-ansikt er definert, kan det brukes i et vanlig attributt i resten av CSS-koden din:

h1 {font-family: Miama;}

Her er koden for det egendefinerte skrifttypeeksemplet:

EmbeddedFont @ font-face {font-family: "Miama"; src: url ("Miama. otf");} @ font-face {font-family: "spray"; src: url ("ideoma_SPRAY. otf");} h1 {font-familie: Miama; fontstørrelse: 300%;} h2 {font-family: spray;}

Embedded Font Demo

Her er en annen tilpasset font

Selv om alle moderne nettlesere støtter @ font-face-funksjonen, støttes de faktiske filtypene varierer fra nettleser til nettleser. Her er de primære skrifttypene:

• TTF: Standard TrueType-formatet er godt støttet, men ikke av alle nettlesere. Mange åpen kilde fontene er tilgjengelige i dette formatet.

• OTF: Dette ligner på TTF, men er en virkelig åpen standard, så det er foretrukket av de som er interessert i åpne standarder. Den støttes av de fleste nettlesere bortsett fra IE.

• WOFF: WOFF er et foreslått standardformat som for øyeblikket støttes av Firefox. Microsoft har antydet å støtte dette formatet i IE.

• EOT: Dette er Microsofts proprietære innebygde skriftformat. Den fungerer bare i IE, men for å være rettferdig har Microsoft hatt innebygd skriftstøtte i mange år.

Du kan bruke et fontkonverteringsverktøy som onlinefontconverter. com / å konvertere til hvilket skriftformat du helst foretrekker.

Det er mulig å levere flere src-attributter. På denne måten kan du inkludere både en EOT- og OTF-versjon av en skrift slik at den vil fungere på et bredt utvalg av nettlesere.

Når du bruker denne teknikken, må du ha en kopi av skriftfilen lokalt.Det skal være i samme katalog som din nettside. Når du begynner hosting på en webserver, vil du flytte fontfilen din til serveren sammen med alle de andre ressursene websiden din trenger. Bare fordi du kan inkludere en skrift, betyr ikke at du burde. Tenk nøye om lesbarhet.

Vær også respektert av immateriell rettighet. Heldigvis finnes det mange gode gratis åpen kildekode skrifter. Begynn med å se på Open Font Library. Google Fonts er en annen flott ressurs for gratis fonter. Med Google Font-verktøyet kan du velge en skrift som er innebygd på Googles servere, og du kan kopiere kode som gjør at skriftstørrelsen er tilgjengelig uten nedlasting.