# Font ## Hvad det er En font, i daglig tale ofte en skrifttype, kaldt en webfont, når et site serverer den, og et font face i CSS-specifikationerne, er den fil, der rummer de tegnede bogstaver i ét design i én vægt og én stil, sammen med de tabeller, der fortæller software, hvilken tegning der hører til hvilket tegn, og hvor tæt tegnene skal stå. Typografer holder designet og filerne ude fra hinanden. Ubuntu er en skrifttype; Ubuntu Light og Ubuntu Bold Italic er snit af den, hver i sin egen fil. CSS holder samme skel. En fontfamilie samler snit under ét navn, og hver `@font-face`-regel beskriver ét enkelt snit: den familie, det hører til, hvor det hentes fra, den vægt og stil, det dækker, de tegn, det kan tegne, og hvad der skal vises, mens det indlæses. ```css @font-face { font-family: "Reading Serif"; src: local("Reading Serif Regular"), local("ReadingSerif-Regular"), url("/fonts/reading-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } body { font-family: "Reading Serif", Georgia, serif; } ``` Egenskaben `font-family` på et element er en liste, der læses fra venstre mod højre. Specifikationen vælger en familie og et snit for hvert tegn i en tekststump og tager det første snit, der matcher den ønskede vægt og stil og har en glyf for netop det tegn. Én linje kan derfor blive sat med to fonte, når den første mangler et bogstav, og det generiske navn sidst i listen, `serif`, `sans-serif`, `monospace` eller `system-ui`, sikrer, at en installeret font altid tager resten. På nettet er filen næsten altid WOFF2: de samme OpenType- eller TrueType-konturer og -tabeller, pakket om til overførsel og komprimeret med Brotli. Indeni kobler `cmap`-tabellen hver tegnkode til en glyf, og andre tabeller rummer de tal, en layoutmotor har brug for, som ascent, descent og line gap, og hvor en understregning ligger, og hvor tyk den er. De tal bestemmer linjehøjde og afstand lige så meget, som bogstavformerne bestemmer udseendet. ## Hvorfor det betyder noget Hver vægt og stil er en separat download. Et design, der bruger normal, kursiv og fed, lægger tre filer mellem læseren og den tekst, der er sat med dem, og hver af dem lægger bytes til det første besøg. Deskriptoren `unicode-range` lader en familie dele sig op efter skriftsystem, og specifikationen forbyder en browser at hente en del for tegn uden for dens område, så en side kun henter de dele, dens tekst bruger. Tekst i en webfont kan først tegnes, når filen er ankommet, så browseren har brug for en politik for ventetiden. Deskriptoren `font-display` sætter den. Med `block` anbefaler specifikationen en blokperiode på 3 sekunder, hvor teksten er sat, men tegnes usynligt. Med `swap` er blokperioden 100 ms eller mindre, reservefonten vises næsten med det samme, og webfonten tager over, når den lander. Med `fallback` er skiftevinduet kort, med 3 sekunder anbefalet, og derefter beholder siden reservefonten. Med `auto` bestemmer browseren, og mange behandler det som `block`. Hvor filen ligger, betyder også noget. Fontforespørgsler bruger CORS, så en font fra en anden origin indlæses kun, når den server tillader det, og hver forespørgsel til en anden virksomheds server fortæller den læserens adresse, og hvilket site læseren er på. At servere fonte fra sitets egen vært fjerner både den ekstra forbindelse og iagttageren. En font er software under en licens. SIL Open Font License tillader brug, studier, ændring og videredistribution, så længe fontene ikke sælges for sig selv, og forbyder en ændret version at bruge et reserveret fontnavn uden tilladelse. En font, der er købt til tryk, kan have andre vilkår på nettet, så læs licensen, før filen kommer på en server. Dækning er den sidste bekymring. En font tegner kun de tegn, dens `cmap` nævner. Det meste af det kyrilliske alfabet ligger i området U+0400–045F, men det ukrainske bogstav ґ ligger i U+0490–0491, så et udsnit eller et område skrevet til russisk tekst overlader det til den næste reservefont. ## Sådan ser det ud i praksis Sitets [kolofon](/da/credits/) opregner det, der når frem til en læsers browser, som fem ting, og tre af dem er webfonte. Ubuntu, af Dalton Maag for Canonical, er under Ubuntu Font Licence. Ubuntu Mono, samme families fastbredde-snit, sætter koden. Shantell Sans, der bygger på kunstneren Shantell Martins tuschhåndskrift, er under SIL Open Font License og skriver marginnoterne. Alle tre kommer fra sitets egen maskine, og siden siger hvorfor: en webfont fra en andens CDN er en tredjepart, der ser dig læse. Ubuntu Mono og Shantell Sans indlæses kun på de sider, der viser kode eller bærer en marginnote. At dele én skrifttype op efter skriftsystem er emnet for [noten om Safaris understregninger](/da/notes/safari-underline-font-subset/). Sitet serverer Ubuntu i seks dele, tre vægte latinsk og tre kyrillisk, og hver del angiver de tegn, den dækker, så engelske og danske sider henter tre latinske filer og ingen kyrilliske, og ukrainske sider omvendt. Alle seks delte ét familienavn, og i Safari forringer et snit med et ikke-latinsk tegnområde skip-ink, det hul, en understregning lader stå om en underlænge, for hvert tegn i sin familie, også latinsk tekst. Da de tre kyrilliske erklæringer blev slettet under kørsel, gik de målte huller fra 1,8/1,0/1,0px til 4,5/11,0/5,0px. Rettelsen gav de kyrilliske snit deres eget familienavn og satte det i stakken efter Ubuntu: tre omdøbte erklæringer og én post i stakken, med Chrome urørt og ukrainsk stadig sat i Ubuntu i nøjagtig samme bredder. Samme note viser, hvor meget en fonts egne tal svinger: Ubuntu angiver en understregningstykkelse på 0,056em for Light, 0,020em for Medium og 0,120em for Bold. Landingssiden foran virksomhedens [egen git-forge](/da/portfolio/deployed-the-companys-own-git-forge-121/) havde været en håndvedligeholdt kopi af hovedsitets design, og hver forskel, der blev fundet mellem de to, var et uheld og ikke en beslutning. To af de fem handlede om fonte: en fonterklæring, der slog to vægte sammen til én på enhver maskine, hvor familien var installeret, og en vægt, der blev brugt, uden at der fulgte en font med. Ingen af de fem kunne ses på et skærmbillede. Kopien blev slettet, og landingssiden bygges nu af hovedsitets egne skabeloner. ## Hvor det går galt - **Teksten er usynlig, mens filen indlæses.** Under `block`, og ofte under `auto`, viser en langsom forbindelse en færdigsat side uden ord i op til hele blokperioden. Brug `swap` til brødtekst, og forudindlæs de en eller to filer, den første skærm har brug for. En forudindlæsning af en font kræver `crossorigin`-attributten, også for en fil fra samme origin, fordi den skal matche den CORS-forespørgsel, den står i stedet for. - **Siden hopper, når fonten ankommer.** En reservefont med andre bredder og linjehøjder bryder linjerne andre steder, og skiftet ombryder dem. Specifikationen råder til reservefonte, hvis mål ligger tæt på webfontens. Hvor ingen gør det, bringer et `local()`-snit til reservefonten med `ascent-override`, `descent-override` og `line-gap-override` dens lodrette mål på linje, så skiftet ændrer bogstavformer og ikke layout. - **Fed og kursiv, som ingen har tegnet.** Når en familie mangler et fedt snit, kan browseren gøre det normale tykkere, og den kan skråstille det normale, når der ikke er nogen kursiv. Stregerne flyder ud, og bogstaver, der skulle stå oprejst, læner sig. Lever hvert snit, designet bruger, eller sæt `font-synthesis` til `none`, så et manglende snit viser sig ved gennemgangen som opret tekst i normal vægt i stedet for en efterligning. - **`local()` tager et snit, ikke en familie.** Navnet i `local()` matcher ét snit på dets fulde navn eller dets PostScript-navn. Skriver man familienavnet der for hver vægt, kan det matche ét installeret snit for dem alle, så fed vises som normal på netop de maskiner, hvor familien er installeret. Navngiv hvert snit på begge måder, eller udelad `local()`. - **Et manglende tegn blander skrifttyper.** Et snit, der mangler et tegn, sender det videre til den næste familie, så ét ord kan vise to designs. Et for stramt skåret udsnit gør det samme for et helt skriftsystem. Kontrollér dækningen mod den tekst, sitet faktisk udgiver, på hvert sprog, det udgiver på. ## Læs mere - [CSS Fonts Module Level 4](https://www.w3.org/TR/css-fonts-4/) — `@font-face`, matchningsalgoritmen, `unicode-range`, `font-display` og styringen af syntese. - [WOFF File Format 2.0](https://www.w3.org/TR/WOFF2/) — hvordan OpenType- og TrueType-fonte pakkes og komprimeres til nettet. - [OpenType cmap table](https://learn.microsoft.com/en-us/typography/opentype/spec/cmap) — tabellen, der afgør, hvilke tegn en font kan tegne. - [SIL Open Font License](https://openfontlicense.org/open-font-license-official-text/) — selve licensen med dens betingelser for kopier, ændrede versioner og reserverede navne. - [WebKit bug 255159](https://bugs.webkit.org/show_bug.cgi?id=255159) — Safari-fejlrapporten om skip-ink på understregninger, som sitets note bygger på.