Brugerhåndbog Annuller

Indlejringskoder

Lejringskoden er den måde, webskrifttyperne indlæses på dit websted i browseren eller i en HTML-e-mail i e-mailklienten.

Standard- og @import-indlejringskoderne bruger kun CSS til indlæsning af skrifttyper (ingen JavaScript). De kan bruges til at føje skrifttyper til websider,HTML-e-mail eller -nyhedsbreve, Google AMP og mange andre typer projekter, hvor webskrifttyper understøttes. JavaScript-skrifttypeindlæsning bruges til dynamisk udskiftning, som er påkrævet til visning af østasiatiske webskrifttyper.

Indlejringskoden for hvert af dine projekter kan findes på siden for webprojekter.

Standardintegreringskode

Standardindlejringskoden er et enkelt <link>-tag, som indlæser webprojektets CSS fra skrifttypenetværket (use.typekit.net) i browseren.

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

For at finde standardindlejringskoden til dit projekt skal du besøge siden for webprojekter. Føj denne indlejringskoden til tagget <head> på dit websted.

billedet

@import-indlejringskode

@import-indlejringskoden kan bruges direkte i dit CSS-typografiark.For at finde @import-indlejringskoden for et projekt skal du gå til siden for webprojekter og derefter klikke på indstillingen " @import-link"

billedet

Tilføj det imellem typografitags i <head> på dit websted:

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

Eller placer det øverst i din CSS-fil:

Tilføjelse af en @import til din CSS

Bemærk:

Hvis du bruger @import-indlejringskoden, skal den være i begyndelsen af <style>-tagget, eller også bliver CSS-filen med en hvilken som helst anden @import-sætning eller skrifttype ikke indlæst. Det er kun posten @charset, der må vises før linjer med @import.

Brug af en af CSS-indlejringskodeindstillingerne betyder, at resten af siden muligvis ikke vises, før webskrifttypen CSS er færdig med at indlæse. Virkemåden varierer mellem browsere, afhængigt af hvordan hver enkelt håndterer eksterne CSS-filer.

Når det gælder asynkron skrifttypeindlæsning, der ikke blokerer resten af siden, skal du inkludere et andet JavaScript-bibliotek sammen med CSS-indlejringskoden for at tilpasse din skrifttypeindlæsning.

JavaScript-indlejringskode

JavaScript-indlejringskoden er påkrævet til dynamisk udskiftning, som bruges til visning af østasiatiske webskrifttyper.

<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>
<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>
<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-indlejringskoden til et dynamisk projekt er angivet på siden for webprojekter.

billedet

Den avancerede indlejringskode kan tilpasses ved at overføre et konfigurationsobjekt til Typekit.load-metoden. Se afsnittet om JavaScript API for at få flere detaljer.

JavaScript API

JavaScript viser en global variabel, Typekit, med én offentlig metodeindlæsning. Kald af "Typekit.load" uden nogen argumenter vil udløse skrifttypeindlæsning.

Typekit.load()
Typekit.load()
Typekit.load()

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

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

Følgende tilbagekald kan specificeres:

  • Indlæser – Dette tilbagekald udløses, når alle skrifttyper er blevet anmodet om.
  • aktiv – Dette tilbagekald udløses, når skrifttyperne er gengivet.
  • inaktiv – Dette tilbagekald udløses, når browseren ikke understøtter sammenkædede skrifttyper, eller hvis ingen af skrifttyperne kunne indlæses.
  • skrifttypeindlæsning – Dette tilbagekald udløses én gang for hver skrifttype, der er indlæst. Tilbagekaldet kaldes med familienavnet som det første argument og skrifttypevariationsbeskrivelsen som det andet argument.
  • skrifttype aktiv – Dette tilbagekald udløses én gang for hver skrifttype, der gengives. Tilbagekaldet kaldes med familienavnet som det første argument og skrifttypevariationsbeskrivelsen som det andet argument.
  • skrifttype inaktiv – Dette tilbagekald udløses, hvis skrifttypen ikke kan indlæses. Tilbagekaldet kaldes med familienavnet som det første argument og skrifttypevariationsbeskrivelsen som det andet argument.

Ændring af indlejringskoden på et websted

Hvis du har et websted, der allerede bruger skrifttyper via en ældre JavaScript-indlejringskode, kan du skifte til den nyere CSS-version ved at erstatte <script>-tags i din kode med HTML <link>-indlejringskode eller CSS @import-indlejringskode.

Brug af ældre indlejringskode på et websted

Selvom Adobe lejlighedsvis ændrer mulighederne for indlejringskode, efterhånden som vi foretager forbedringer af skrifttypevisningen, vil alle tidligere versioner af indlejringskoderne fortsætte med at fungere.  

Hvis du bruger en ældre indlejringskode på dit websted, bliver du ikke påkrævet at ændre den. Mange websteder vil dog drage fordel af ydeevneforbedringer ved at opdatere til en nyere version.

Tidligere versioner af indlejringskoden inkluderer en JavaScript-version, som indlæser CSS-filen asynkront:

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

Og en protokol-relativ JavaScript-version:

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

(Selv hvis dit websted bruger den protokol-relative indlejringskode, bruger skrifttypevisning HTTPS til alle anmodninger .)

Brug af flere indlejringskoder på et websted

Vi anbefaler ikke at tilføje mere end én indlejringskode til det samme websted af flere årsager:

  • Hver kopi af indlejringskoden er for det meste overflødig.
  • Hvert projekt laver separate anmodninger om skrifttyper, hvilket øger antallet af HTTP-anmodninger og yderligere forsinker indlæsningen.
  • Et enkelt projekt kan cachelagres på tværs af alle sider på dit websted efter den første indlæsning.

Få hjælp hurtigere og nemmere

Ny bruger?