Käyttöopas Peruuta

Verkkokirjasimien toimintatavan mukauttaminen font-display-asetuksilla

Hae
Fonts

Fonts

Selaa kirjasimia
  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. Fonts added from Adobe Fonts
    2. Web fonts from Adobe Fonts
    3. Creative Cloud for enterprise customers
    4. Removed fonts
    5. Why aren't these fonts included in my Creative Cloud subscription?
    6. Why am I being asked to purchase a license for fonts in Adobe Fonts?
    7. Adobe Fonts not available to Adobe IDs registered in China
  4. Getting and using fonts
    1. Using Adobe Fonts in Creative Cloud apps
    2. Manage your fonts
    3. Find fonts from images
    4. Resolve missing fonts in desktop applications
    5. Using fonts in InDesign
    6. Fonts and typography
    7. Using web fonts in HTML5 Canvas documents
    8. Using fonts in InCopy
    9. Using web fonts in Muse
    10. Packaging font files
    11. Troubleshooting guide: Adding fonts
    12. Added fonts aren't showing to the 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?
    15. Hide fonts in Adobe programs
  5. Web design and development
    1. Add fonts to your website
    2. Troubleshooting guide: Adding fonts to a website
    3. Troubleshoot font issues
    4. Using web fonts in HTML email or newsletters
    5. Using web fonts with Accelerated Mobile Pages (AMP)
    6. CSS selectors
    7. Customize web font performance with font-display settings
    8. Embed codes
    9. Dynamic subsetting & web font serving
    10. Font events
    11. Why are my web fonts from use.typekit.net?
    12. Site can't connect to use.typekit.net
    13. Using web fonts with CodePen
    14. Browser and OS support
    15. Domains
    16. Using web fonts when developing locally
    17. Content security policy
    18. 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

Ota selvää, miten voit muuttaa verkkokirjasimien toimintatapaa font-display-asetuksilla.

Font-display-asetuksen avulla voit määrittää, miten verkkokirjasimet ladataan verkkoselaimeen ja miten niitä käytetään sivustossasi. Font-display-asetuksia on viisi:

Font-display-asetuksen arvo 

Toimintatapa 

Auto (Automaattinen)

Antaa selaimen käyttää oletusmenetelmää kirjasimen lataamiseen.

Block (Estä)

Piilottaa tekstin sivustossa, kunnes verkkokirjasin on ladattu. Sivustosi kävijät saattavat nähdä Flash of invisible text (FOIT) ‑merkinnän tätä asetusta käytettäessä.

Swap (Vaihda)

Näyttää CSS:ssä määrittämäsi varakirjasimen, kunnes verkkokirjasin on ladattu. Sivustosi kävijät saattavat nähdä Flash of unstyled text (FOUT) ‑merkinnän tätä asetusta käytettäessä.  

Fallback (Vara)

Käyttää estotoimintoa lyhyen ajan, siirtyy sitten vaihtotoimintoon ja käyttää tekstissä varakirjasinta. Jos verkkokirjasimet eivät ole latautuneet vaihtojakson loppuun mennessä, varakirjasin pysyy käytössä. 

Optional (Valinnainen)

Käyttää estotoimintoa lyhyen ajan ja käyttää sitten tekstissä varakirjasinta. Arvo antaa verkkoselaimelle mahdollisuuden olla lataamatta verkkokirjasinta ollenkaan, jos esimerkiksi sivuston kävijä käyttää hidasta Internet-yhteyttä. 

Teknisiä tietoja kirjasimien näytöstä ja tuetuista arvoista on CSS-kirjasinmoduulin tason 4 määrityksissä.

Huomautus:

Oletusarvoisesti verkkokirjasinprojektit luodaan niin, että font-display-asetuksena on auto.

Voit mukauttaa font-display-asetuksen seuraavasti:

  1. Valitse verkkoprojektisivulla Edit Project (Muokkaa projektia).

    Muokkaa projektia
    Muokkaa projektia

  2. Valitse sivupalkista jokin seuraavista font-display-arvoista. Oletusarvoisesti verkkokirjasinprojektien font-display-asetuksena on auto.

    font-display-asetukset

  3. Valitse Save Changes (Tallenna muutokset), niin font-display-arvo otetaan sivustossasi käyttöön muutamassa minuutissa.

Uusi font-display-asetus sisällytetään automaattisesti sivustoosi osana olemassa olevaa upotuskoodia.

Olemassa olevien verkkoprojektien päivittäminen

Font-display-tuki lisättiin Adoben verkkokirjasimien lataukseen syyskuussa 2020. Ennen syyskuuta 2020 luodut verkkoprojektit on päivitetty käyttämään oletusarvoista font-display: auto ‑arvoa. 

Olemassa olevien projektien font-display-arvoa voidaan muuttaa toimimalla edellä annettujen ohjeiden mukaan. Muutosten tallentamisen jälkeen uusi font-display-arvo sisällytetään sivustoosi osana olemassa olevaa upotuskoodia. Sinun ei tarvitse tehdä muutoksia itse sivustoon. 

Pyydä apua nopeammin ja helpommin

Oletko uusi käyttäjä?

Pikalinkit

Näytä kaikki sopimuksesi Sopimusten hallinta
Näytä pikalinkit
Piilota pikalinkit

Lakisääteiset ilmoitukset    |    Online-tietosuojakäytäntö