Användarhandbok Avbryt

Anpassa webbteckensnittsprestanda med font-display-inställningar

  1. Adobe Fonts User Guide
  2. Introduction
    1. System and subscription requirements
    2. Browser and OS support
    3. Add fonts on your computer
    4. Add fonts to your website
    5. Add fonts on CC Mobile
  3. Font licensing
    1. Font licensing
    2. Manage your account
    3. Licensing for Creative Cloud for enterprise customers
    4. Adding font licenses to your account
    5. Removing fonts from the subscription library
    6. Adobe Fonts not available to Adobe IDs registered in China
    7. Why aren't these fonts included in my Creative Cloud subscription?
    8. Morisawa font removal September 2021
  4. Getting and using fonts
    1. Using Adobe Fonts in Creative Cloud apps
    2. Manage your fonts
    3. Resolve missing fonts in desktop applications
    4. Using fonts in InDesign
    5. Fonts and typography
    6. Using web fonts in HTML5 Canvas documents
    7. Using fonts in InCopy
    8. How to use fonts in Adobe Muse
    9. Using web fonts in Muse
    10. Packaging font files
    11. Troubleshooting guide: Adding fonts
    12. Added fonts aren't showing to font menu
    13. "Unable to add one or more fonts" or "A font with the same name is already installed"
    14. What happens when a font I'm using is updated by the foundry?
  5. Web design and development
    1. Add fonts to your website
    2. Troubleshooting guide: Adding fonts to a website
    3. Using web fonts in HTML email or newsletters
    4. Using web fonts with Accelerated Mobile Pages (AMP)
    5. CSS selectors
    6. Customize web font performance with font-display settings
    7. Embed codes
    8. Dynamic subsetting & web font serving
    9. Font events
    10. Why are my web fonts from use.typekit.net?
    11. Site can't connect to use.typekit.net
    12. Using web fonts with CodePen
    13. Browser and OS support
    14. Domains
    15. Using web fonts when developing locally
    16. Content security policy
    17. Printing web fonts
  6. Language support and OpenType features
    1. Language support and subsetting
    2. Using OpenType features
    3. Syntax for OpenType features in CSS
  7. Font technology
    1. OpenType-SVG color fonts
    2. Ten Mincho: important points on updating from Version 1.000

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:

Font-display-värde 

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:

  1. Klicka på Redigera projektwebbprojektsidan.

    Redigera projekt
    Redigera projekt

  2. 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.  

    fontvisningsinställningar

  3. 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. 

 Adobe

Få hjälp snabbare och enklare

Ny användare?

Adobe MAX 2024

Adobe MAX
Kreativitetskonferensen

14–16 okt i Miami Beach och online

Adobe MAX

Kreativitetskonferensen

14–16 okt i Miami Beach och online

Adobe MAX 2024

Adobe MAX
Kreativitetskonferensen

14–16 okt i Miami Beach och online

Adobe MAX

Kreativitetskonferensen

14–16 okt i Miami Beach och online