Egendefinerte skrifter er blant de mest potensielt appellerende aspektene av CSS3 for designere. Med font-face- regelen kan du gjengi hvilken som helst skrifttype du har online i webtekstteksten din, uavhengig av om brukeren har den installert eller ikke.

Som med de fleste CSS3-teknikker er grunnkoden ganske enkel, men den praktiske virkeligheten er litt mer kompleks.

I denne korte opplæringen vil vi løse grunnleggende om å inkludere egendefinerte skrifter på sidene dine.

Last opp skrifttypen

Først må du kontrollere at skrifttypen du vil bruke, er lisensiert for nettbruk. Nesten alle gratis skrifttyper kan brukes på et nettsted og mange premium skrifttyper er tilgjengelig med en lisens som dekker nettbruk.

Neste last opp den valgte fonten til serveren din. Du kan ønske å lagre den i en dedikert "skrifter" katalog, men dette er valgfritt.

Husk å inkludere filene for eventuelle varianter av skrifttypen du planlegger å bruke, for eksempel fet eller kursiv. Du kan bruke EOT (Embedded OpenType) -filer til Internet Explorer og enten OTF (OpenType) eller TTF (TrueType) for resten. (Tilleggsalternativer inkluderer WOFF (Web Open Font Format) og SVG (Scalable Vector Graphics), men vi vil holde fast ved flere vanlige typer her.)

Legg merke til hvor fontfilene er lagret på serveren din.

Legg til en font-face-seksjon i din CSS-kode

Åpne HTML- eller CSS-filen for siden du arbeider med. Legg til en skrift-ansiktsdeklarasjon til stilkoden:

@font-face {}

Først inne i font-face- delen, gi skrifttypen et navn du senere kan bruke til å referere til det:

font-family: 'lovelyFont';

Deretter fremdeles plassering av EOT-filen i font-face- delen:

src: url('fonts/lovely_font.eot');

Endre plasseringen og navnet på skrifttypen etter behov. Deretter legger du til en OTF- og / eller TTF-skrift:

src:url('fonts/lovely_font.otf')src:url('fonts/lovely_font.ttf') 

Dette er de nakne bein av den nødvendige koden, som i mange tilfeller vil være tilstrekkelig. Det er imidlertid flere skritt vi kan ta for å gjøre koden mer pålitelig. Først utvide denne delen for å inkludere en indikator for skriftfiltypen:

src:url('fonts/lovely_font.otf')format('opentype');src:url('fonts/lovely_font.ttf')format('truetype');

Som et annet valgfritt effektivitetsmål kan vi få nettleseren til å sjekke om en lokal kopi av skriften, dersom brukeren allerede har den. Utvid koden din på nytt som følger, legg til den lokale delen før du angir nettadressen, slik at skriften bare lastes ned hvis det er nødvendig:

src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.ttf')format('truetype');

Tillegget er det samme for både OTF og TTF. Vi spesifiserer skrifttypenavnet etter det lokale søkeordet.

I dette tilfellet har vi to linjer som angir den lokale fonten fordi skrifttypenavnet har mer enn ett ord i det. Den hevede versjonen angir hvordan skrifttypenavnene lagres på bestemte operativsystemer - denne ekstra linjen er ikke nødvendig dersom skrifttypen bare har et enkelt ord i navnet. Hvis du vet at en skrift kan ha forskjellige navn på forskjellige systemer, inkludere hver av mulighetene i din lokale del.

Bruk skrift til sideelementer

Endelig kan vi legge til skrifttypen på sideelementene. I CSS-koden for et bestemt element, eller en gruppe av elementer, angir du bare skrifttypen du brukte, inkludert eventuelle fallbacks du velger:

div { font-family: 'lovelyFont', sans-serif; }

Inkluder skriftvarianter

Hvis du for eksempel vil bruke en dristig versjon av fonten din, må du bare inkludere en annen font-face- seksjon med fet skriftfil-URL og en erklæring om "font-weight: bold;". Angi en skriftvekt med fet skrift for ethvert element med den egendefinerte skrifttypen som er brukt på den, og nettleseren vil automatisk gjenta den dristige versjonen:

/*default version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font.eot');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');}/*bold version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font_bold.eot');src:local('Lovely Font Bold'),local('Lovely-Font-Bold'),url('fonts/lovely_font_bold.otf')format('opentype');font-weight: bold;}/*container element*/div { font-family: 'lovelyFont', sans-serif; }/*span elements inside the container div*/span { font-weight: bold; }

Det er det!

Bruker du CSS3 for å utvide type ansikter som er tilgjengelige for deg? Bruker du en tjeneste som Adobes Typekit eller Googles webfonter? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, fonter image via Shutterstock.