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 sivustoihin, HTML-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.
Löydät projektisi oletusarvoisen upotuskoodin siirtymällä Verkkoprojektit-sivulle. Lisää tämä upotuskoodi sivustosi <head>-tunnisteeseen.
@import-upotuskoodia voidaan käyttää suoraan CSS-tyylisivulla. Voit etsiä projektin @import-upotuskoodin siirtymällä Verkkoprojektit-sivulle ja napsauttamalla sitten ”@import link” ‑vaihtoehtoa.
Lisää se sivustosi <head>-otsikon style-tunnisteisiin:
tai sijoita se CSS-tiedostosi alkuun:
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. Toiminta vaihtelee selaimittain sen mukaan, miten kukin käsittelee ulkoisia CSS-tiedostoja.
Asynkronista kirjasimen latausta varten, joka ei estä sivun muun sisällön latautumista, sisällytä toinen JavaScript-kirjasto CSS-upotuskoodin rinnalle kirjasimen latauksen mukauttamiseksi.
JavaScript-upotuskoodi
JavaScript-upotuskoodia tarvitaan dynaamisessa aliasetuksessa, jota käytetään itäaasialaisten verkkokirjasimien toimittamiseen.
Dynaamisen projektin JavaScript-upotuskoodi on lueteltu Verkkoprojektit-sivulla.
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.
Voit myös hyväksyä Typekit.loadin määritysobjektin.
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:
ja protokollan mukaisen JavaScript-version:
(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.
Lisää samankaltaisia
Tutustu Adobe Fontsiin
Etsi täydellinen kirjasintyyppi mitä tahansa verkkopohjaista tai painettua projektia varten.
