Brukerveiledning Avbryt

Innebyggingskoder

Søk

Sist oppdatert 28. feb. 2022

Innebyggingskoden brukes til å laste inn webskriftene på nettstedet ditt i nettleseren eller til en HTML-e-post i e-postklienten.

Standard og @import-innebyggingskoder bruker kun CSS til innlasting av skriften (ikke JavaScript); de kan brukes til å legge til skrifter på nettsteder, i HTML-e-post eller nyhetsbrev, Google AMP og mange andre prosjekttyper som støtter webskrifter. JavaScript-innlasting av skrifter brukes til dynamisk underinnstilling, som kreves for visningen av østasiatiske webskrifttyper.

Innebyggingskoden for hvert av prosjektene dine finner du på Webprosjekter-siden.

Standard innebyggingskode

Standard innebyggingskode er en enkel <link>-tag som laster inn CSS-en til webprosjektet fra skriftnettverket (use.typekit.net) i nettleseren.

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

Hvis du vil finne den standard innebyggingskoden for prosjektet ditt, går du til Webprosjekter-siden. Legg til denne innebyggingskoden i <head>-taggen på nettstedet ditt.

@import-innebyggingskode

@import-innebyggingskoden kan brukes direkte i CSS-stilarket ditt. Hvis du vil finne @import-innebyggingskoden for et prosjekt, går du til Webprosjekter-siden. Deretter kikker du på alternativet "@import-kobling"

Legg den til mellom stil-taggene i <head> for nettstedet ditt:

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

eller plasser den øverst i CSS-filen:

Merk:

Hvis du bruker @import-innebyggingskoden, må den plasseres i begynnelsen av <style>-taggen eller CSS-filen med eventuelle andre @import-uttalelser, ellers kommer ikke skriftene til å lastes inn. Kun en @charset-oppføring kan være oppført før @import-linjene.

Hvis du bruker et av alternativene for CSS-innebyggingskode, kan det hende at resten av siden ikke vises før etter at webskrift-CSS-en har fullført innlastingen. Atferden varierer mellom ulike nettlesere, avhengig av hvordan hver enkelt håndterer eksterne CSS-filer.

Hvis du ønsker asynkron skriftinnlasting som ikke blokkerer resten av siden, kan du inkludere et annet JavaScript-bibliotek i tillegg til CSS-innebyggingskoden for å tilpasse innlastingen av skriften.

JavaScript-innebyggingskode

JavaScript-innebyggingskoden kreves for dynamisk underinnstilling, som brukes for visningen av østasiatiske nettskrifttyper.

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

JavaScript-innbyggingskoden for et dynamisk prosjekt er oppført på Webprosjekter-siden.

Den avanserte innebyggingskoden kan tilpasses ved å sende et konfigurasjonsobjekt til Typekit.load-metoden; se avsnittet JavaScript API for mer informasjon.

JavaScript API

JavaScript avslører en globalt variabel Typekit med én offentlig metodeinnlastning. Oppringing av "Typekit.load" uten noen argumenter, utløser innlastingen av skrifter.

Typekit.load()

Du kan også sende et konfigurasjonsobjekt til Typekit.load.

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

Følgende tilbakeringinger kan spesifiseres:

innlasting – Denne tilbakeringingen utløses når alle skriftene har blitt forespurt.
aktiv - Denne tilbakeringingen utløses når skriftene har blitt gjengitt.
inaktiv - Denne tilbakeringingen utløses hvis nettleseren ikke støtter koblede skrifter *eller* hvis ingen av skriftene kan lastes inn.
innlasting av skrifter - Denne tilbakeringingen utløses én gang for hver skrift som lastes inn. Tilbakeringingen utføres med familienavnet som det første argumentet og beskrivelsen av skriftvarianten som det andre argumentet.
aktiv skrift - Denne tilbakeringingen utløses én gang for hver skrift som vises. Tilbakeringingen utføres med familienavnet som det første argumentet og beskrivelsen av skriftvarianten som det andre argumentet.
inaktiv skrift - Denne tilbakeringingen utløses hvis skriften ikke kan lastes inn. Tilbakeringingen utføres med familienavnet som det første argumentet og beskrivelsen av skriftvarianten som det andre argumentet.

Endre innebyggingskoden på et nettsted

Hvis du har et nettsted som allerede bruker skrifter via en eldre JavaScript-innebyggingskode, kan du bytte til den nyere CSS-versjonen ved å erstatte <script>-taggene i koden med HTML <link>-innebyggingskoden eller CSS @import-innebyggingskoden.

Bruke endre innebyggingskode på et nettsted

Selv om Adobe endrer alternativene for innebyggingskoder etter hvert som vi forbedrer skriftvisningen, kommer alle tidligere versjoner av innebyggingskodene til å fortsette å fungere.

Hvis du bruker en eldre innebyggingskode på nettstedet ditt, er det ikke påkrevd å endre den. Imidlertid er det mange nettsteder som drar nytte av ytelsesforbedringene man får ved å oppdatere til en nyere versjon.

Tidligere versjoner av innebyggingskoden omfatter en JavaScript-versjon som laster inn CSS-filen asynkront:

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

og en protokoll-relativ JavaScript-versjon:

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

(Selv om nettstedet bruker den protokollrelative innebyggingskoden, bruker skriftvisningen HTTPS for alle forespørsler.)

Bruke flere innebyggingskoder på et nettsted

Vi fraråder å legge til mer enn én innebyggingskode på samme nettsted av flere årsaker:

Hver kopi av innbyggingskoden er stort sett overflødig.
Hvert prosjekt gjør separate forespørsler om skrifter, noe som øker antallet HTTP-forespørsler og fører til en tregere innlasting.
Ett enkelt prosjekt kan bufres på tvers av alle sidene på nettstedet ditt etter den første innlastingen.