@font-face er en CSS-regel som gjør det mulig å vise skrifttyper på nettsider på internett. Før denne regelen fantes, kunne nettredaktører bruke et begrenset sett med skrifttyper på nettsidene sine, som er de vanligste og som er installert på brukernes datamaskiner. Med innføringen av @font-face er det enkelt å knytte en hvilken som helst font til et nettsted.
Hvis du har lastet ned skriften på nettstedet vårt, finner du ferdig CSS-kode i arkivet med skrifter som skal kopieres og legges inn i CSS-dokumentet som er vedlagt prosjektet.
Trinnvis installasjon
1. Velg ønsket skrifttype og klikk på "last ned for nettsted".
2. Opprett en mappe fonter i roten av nettstedet ditt, og kopier de nedlastede skriftene.
Åpne CSS-dokumentet ditt og kopier innholdet i tekstfilen fra arkivet inn i det.
4. Kontroller at banen til fontmappen er stavet riktig. Avhengig av plasseringen av mappen der skriftene ligger, kan banen inneholde en eller flere prikker.
5. Ferdig. Kopier egenskapen med familienavnet og lim den inn i velgeren du skriver stilene for.
Hva om jeg allerede har lastet ned skrifttypen et annet sted og vil koble den til?
I dette tilfellet må du finne en fontkonverterer på internett og konvertere ttf-fonten (eller otf) til de riktige formatene, nemlig eot, svg, woff og woff2. Dette for å sikre at fonten vises og fungerer korrekt i alle nettlesere og på mobile enheter.
Deretter må du stave @font-face-regelen selv og respektere syntaksen.
Syntaksen for @font-face
Regelens syntaks kan grovt sett deles inn i grunnleggende egenskaper og avanserte egenskaper.
Grunnleggende:
- font-family - angir navnet på skrifttypen.
- src - angir banen til skrifttypen. Dette kan være URL-adressen til skrifttypen som ligger på nettstedets server, URL-adresser til skrifttyper som ligger på andres servere (for eksempel Google Fonts), eller ganske enkelt navnet på skrifttypen som ligger på brukerens datamaskin (Helvetica New Bold, Tahoma, Georgia osv.) .
Utvidet:
- font-display - bestemmer hvordan skrifttypen vil vises, avhengig av om den er lastet ned og klar til bruk.
- font-stretch - lar deg justere bredden på teksten.
- font-style - bestemmer om skriften er vanlig, kursiv eller skråstilt (de to sistnevnte er ikke det samme).
- font-weight - Angir skrifttypens metning på en skala fra 100 til 900 (100-liten, 900-liten).
- font-variant - bestemmer hvordan de små bokstavene skal presenteres - la dem stå uendret eller gjør dem til små bokstaver (versaler).
- font-feature-settings - lar deg administrere avanserte typografiske funksjoner i OpenType-fonter.
- font-variations-settings - tillater kontroll på lavt nivå over variasjoner av Open Type- og TrueType-fonter ved å angi aksenavn på fire bokstaver.
- unicode-range - spesifiserer utvalget av Unicode-koder (glyfer) som skal brukes i skrifttypen.
Koble til en skrifttype til nettstedet ditt med Google Fonts
Den enkleste måten å knytte en font til nettstedet ditt på, er å bruke Google Fonts. Gå til nettsiden deres, finn skriften du ønsker, velg riktig skrifttype å installere og kopier koden.
Den kopierte koden skal plasseres i brødteksten til head-taggen på html-siden din.
Ulempen med denne metoden er at hvis du under sminke av nettstedet har mistet internett - skrifter vil ikke vises og erstattes av standard fordi filene ikke er plassert på den lokale datamaskinen, og på Googles servere. Sjansen er også stor for at problemet vil oppstå igjen når du kommer til klienten for en layoutpresentasjon (eller bare for bekreftelse) og han ikke har Wi-Fi.
