Käyttöopas Peruuta

Upotuskoodit

  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

Upotuskoodi määrittää, miten kirjasimet ladataan sivustoosi selaimessa tai HTML-muotoiseen sähköpostiviestiin sähköpostiohjelmassa.

Oletusarvoiset upotuskoodit ja @import-upotuskoodit käyttävät vain CSS:ää kirjasimien lataamiseen (ei JavaScriptiä). Niitä voidaan käyttää kirjasimien lisäämiseen sivustoihinHTML-muotoisiin sähköpostiviesteihin tai uutiskirjeisiin, Google AMP:hen ja moniin muun tyyppisiin projekteihin, joissa verkkokirjasimia tuetaan. JavaScript-kirjasimien lataamista käytetään dynaamisessa aliasetuksessa, jota tarvitaan itäaasialaisten verkkokirjasimien toimittamiseen.

Kunkin projektin upotuskoodi löytyy Verkkoprojektit-sivulta.

Oletusarvoinen upotuskoodi

Oletusarvoinen upotuskoodi on yksittäinen <link>-tunniste, joka lataa verkkoprojektin CSS:n kirjasinverkosta (use.typekit.net) selaimeen.

<link rel=&quot;stylesheet&quot; href=&quot;https://use.typekit.net/xxxxxxx.css&quot;>

Löydät projektisi oletusarvoisen upotuskoodin siirtymällä Verkkoprojektit-sivulle. Lisää tämä upotuskoodi sivustosi <head>-tunnisteeseen.

kuva

@import-upotuskoodi

@import-upotuskoodia voidaan käyttää suoraan CSS-tyylisivulla. Voit etsiä projektin @import-upotuskoodin siirtymällä Verkkoprojektit-sivulle ja napsauttamalla sitten ”@import link” ‑vaihtoehtoa.

kuva

Lisää se sivustosi <head>-otsikon style-tunnisteisiin:

<style>
  @import url(&quot;https://use.typekit.net/xxxxxxx.css&quot;);
</style>

tai sijoita se CSS-tiedostosi alkuun:

@import-tunnisteen lisääminen CSS:ään

Huomautus:

Jos käytät @import-upotuskoodia, sen on oltava <style>-tunnisteen tai CSS-tiedoston alussa muiden @import-ilmoitusten kanssa, sillä muussa tapauksessa kirjasimet eivät lataudu. Vain @charset-merkintä voi olla ennen @import-rivejä.

Jommankumman CSS-upotuskoodivaihtoehdon käyttäminen tarkoittaa, että sivun loppuosa ei ehkä näy, ennen kuin verkkokirjasimen CSS on latautunut kokonaan. Toimintatapa vaihtelee selainkohtaisesti sen mukaan, miten kukin selain käsittelee ulkoisia CSS-tiedostoja.

Jos käytät asynkronista kirjasimien latausta, joka ei estä sivun loppuosaa, lisää toinen JavaScript-kirjasto CSS-upotuskoodin rinnalle kirjasimien latauksen mukauttamiseksi.

JavaScript-upotuskoodi

JavaScript-upotuskoodia tarvitaan dynaamisessa aliasetuksessa, jota käytetään itäaasialaisten verkkokirjasimien toimittamiseen.

<script>
  (function(d) {
    var config = {
      kitId: 'xxxxxxx',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,&quot;&quot;)+&quot; wf-inactive&quot;;},config.scriptTimeout),tk=d.createElement(&quot;script&quot;),f=false,s=d.getElementsByTagName(&quot;script&quot;)[0],a;h.className+=&quot; wf-loading&quot;;tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!=&quot;complete&quot;&&a!=&quot;loaded&quot;)return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

Dynaamisen projektin JavaScript-upotuskoodi on lueteltu Verkkoprojektit-sivulla.

kuva

Edistyksellinen upotuskoodi voidaan mukauttaa hyväksymällä Typekit.load-menetelmän määritysobjekti. Lisätietoja on JavaScript API ‑osiossa.

JavaScript API

JavaScript paljastaa yleisen Typekit-muuttujan yhdellä julkisella menetelmän latauksella. Typekit.load-komennon suorittaminen ilman argumentteja käynnistää kirjasimien lataamisen.

Typekit.load()

Voit myös hyväksyä Typekit.loadin määritysobjektin.

Typekit.load({
      // configuration…
 });

Voit määrittää seuraavat vastakutsut:

  • loading – Tämä vastakutsu käynnistetään, kun on pyydetty kaikkia kirjasimia.
  • active – Tämä vastakutsu käynnistetään, kun kirjasimet on hahmonnettu.
  • inactive – Tämä vastakutsu käynnistetään, kun selain ei tue linkitettyjä kirjasimia *tai* jos yhtäkään kirjasinta ei voitu ladata.
  • fontloading – Tämä vastakutsu käynnistetään kerran jokaiselle ladatulle kirjasimelle. Vastakutsun ensimmäisenä argumenttina käytetään kirjasinperheen nimeä ja toisena argumenttina käytetään kirjasinmuunnelman kuvausta.
  • fontactive – Tämä vastakutsu käynnistetään kerran jokaiselle hahmonnetulle kirjasimelle. Vastakutsun ensimmäisenä argumenttina käytetään kirjasinperheen nimeä ja toisena argumenttina käytetään kirjasinmuunnelman kuvausta.
  • fontinactive – Tämä vastakutsu käynnistetään, jos kirjasinta ei voi ladata. Vastakutsun ensimmäisenä argumenttina käytetään kirjasinperheen nimeä ja toisena argumenttina käytetään kirjasinmuunnelman kuvausta.

Upotuskoodin muuttaminen sivustossa

Jos sinulla on sivusto, jossa käytetään jo kirjasimia vanhalla JavaScript-upotuskoodilla, voit vaihtaa uudempaan CSS-versioon korvaamalla koodisi <script>-tunnisteet HTML-muotoisella <link>-upotuskoodilla tai CSS:n @import-upotuskoodilla.

Vanhan upotuskoodin käyttäminen sivustossa

Vaikka Adobe muuttaa ajoittain upotuskoodiasetuksia, kun se tekee parannuksia kirjasimien tarjontaan, kaikki upotuskoodien aikaisemmat versiot toimivat edelleen.  

Jos käytät sivustossasi vanhaa upotuskoodia, sinun ei ole pakko vaihtaa sitä. Monien sivustojen toiminta kuitenkin paranee, kun päivität uudempaan versioon.

Upotuskoodin aikaisemmat versiot sisältävät JavaScript-version, joka lataa CSS-tiedoston asynkronisesti:

<script src=&quot;https://use.typekit.net/xxxxxxx.js&quot;></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

ja protokollan mukaisen JavaScript-version:

<script src=&quot;//use.typekit.net/xxxxxxx.js&quot;></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

(Vaikka sivustossasi käytettäisiin protokollan mukaista upotuskoodia, kirjasimien tarjontaan käytetään HTTPS:ää kaikissa pyynnöissä.)

Useiden upotuskoodien käyttäminen sivustossa

Emme suosittele useiden upotuskoodien lisäämistä samalle verkkosivulle useista syistä:

  • Jokainen upotuskoodin kopio on enimmäkseen tarpeeton.
  • Jokainen projekti tekee kirjasimille erilliset pyynnöt, mikä lisää HTTP-pyyntöjen määrää ja hidastaa lataamista entisestään.
  • Yksittäinen projekti voidaan tallentaa välimuistiin sivustosi kaikille sivuille ensimmäisen latauskerran jälkeen.

Pyydä apua nopeammin ja helpommin

Oletko uusi käyttäjä?