Font-display-värde
Senast uppdaterad den
11 juli 2023
Lär dig använda font-display-inställningar för att ändra webbteckensnitts prestanda.
Med inställningen font-display kan du ange hur webbteckensnitt läses in i webbläsaren och tillämpas på webbplatsen. Det finns fem font-display-alternativ:
|
|
Beteende |
|---|---|
|
Auto |
Gör att webbläsaren kan använda sin standardmetod för att läsa in teckensnittet. |
|
Block |
Döljer texten på webbplatsen tills webbteckensnittet har hämtats. Webbplatsbesökarna kan se osynlig text blinka till eller FOIT med detta alternativ. |
|
Swap |
Visar reservteckensnittet som du har angett i CSS tills webbteckensnittet har hämtats. Besökare på din webbplats kan se en blixt av ostylad text eller FOUT med detta alternativ. |
|
Fallback |
Blockbeteendet används under en kort period. Sedan sker en växling till swap-beteendet och reservteckensnittet tillämpas på texten. Om Web Fonts inte har laddats vid slutet av swap-perioden förblir reservtypsnittet i användning. |
|
Optional |
Blockbeteendet används under en kort period. Sedan tillämpas reservteckensnittet på texten. Värdet ger webbläsaren möjligheten att inte hämta webbteckensnittet alls, till exempel om webbsidesbesökaren har en långsam internetanslutning. |
Teknisk information om font-display och de värden som stöds finns i specifikationen för CSS-teckensnittsmodulen på nivå 4.
Obs!
Som standard skapas webbteckensnittsprojekt med font-display-värdet auto.
Gör så här för att anpassa font-display-inställningen:
Klicka på Redigera projekt på webbprojektsidan.
Välj något av följande värden på font-display från sidofältet. Som standard är font-display-inställningen för webbfont-projekt inställd på auto.
Klicka på Spara ändringar så tillämpas font-display-värdet på din webbplats inom några minuter.
Den nya font-display-inställningen inkluderas automatiskt på din webbplats i den befintliga inbäddningskoden.
Uppdatera befintliga webbprojekt
Stödet för font-display lades till i Adobes webbteckensnittsinläsning i september 2020. Webbprojekt som skapades före september 2020 har uppdaterats för att använda standardbeteendet font-display: auto .
font-display-inställningen för alla befintliga projekt kan ändras på ovan nämnda sätt. När du har sparat inställningarna inkluderas den nya font-display-inställningen på din webbplats i den befintliga inbäddningskoden. Du behöver inte göra ändringar i själva webbsidan.
Utforska Adobe Fonts
Hitta det perfekta typsnittet för alla webb- och utskriftsprojekt.
