Font-display-värde
Senast uppdaterad den
23 juni 2023
- Adobe Fonts User Guide
- Introduction
- Font licensing
- Font licensing
- Manage your account
- Licensing for Creative Cloud for enterprise customers
- Adding font licenses to your account
- Removing fonts from the subscription library
- Adobe Fonts not available to Adobe IDs registered in China
- Why aren't these fonts included in my Creative Cloud subscription?
- Morisawa font removal September 2021
- Getting and using fonts
- Using Adobe Fonts in Creative Cloud apps
- Manage your fonts
- Resolve missing fonts in desktop applications
- Using fonts in InDesign
- Fonts and typography
- Using web fonts in HTML5 Canvas documents
- Using fonts in InCopy
- Using web fonts in Muse
- Packaging font files
- Troubleshooting guide: Adding fonts
- Added fonts aren't showing to font menu
- "Unable to add one or more fonts" or "A font with the same name is already installed"
- What happens when a font I'm using is updated by the foundry?
- Web design and development
- Add fonts to your website
- Troubleshooting guide: Adding fonts to a website
- Troubleshoot font issues
- Using web fonts in HTML email or newsletters
- Using web fonts with Accelerated Mobile Pages (AMP)
- CSS selectors
- Customize web font performance with font-display settings
- Embed codes
- Dynamic subsetting & web font serving
- Font events
- Why are my web fonts from use.typekit.net?
- Site can't connect to use.typekit.net
- Using web fonts with CodePen
- Browser and OS support
- Domains
- Using web fonts when developing locally
- Content security policy
- Printing web fonts
- Language support and OpenType features
- Font technology
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. Webbplatsbesökarna kan se text utan stil blinka till 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 webbteckensnitten inte har lästs in i slutet av utbytesperioden blir reservteckensnittet kvar i bruk. |
|
Optional |
Blockbeteendet används under en kort period. Sedan tillämpas reservteckensnittet på texten. Värdet ger webbläsaren möjlighet att inte hämta webbteckensnittet alls, till exempel om besö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.
Redigera projekt Redigera projekt -
Välj något av följande värden på font-display från sidofältet. Som standard är värdet på font-display för ett webbteckensnittsprojekt 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 till 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 på själva webbplatsen.
