Användarhandbok Avbryt

Inbäddningskoder

Sök

Senast uppdaterad den 28 feb. 2022

Det är med inbäddningskoden webbteckensnitt läses in på din webbplats i webbläsaren eller i ett HTML-e-postmeddelande i e-postklienten.

Standardinbäddningskoden @import innehåller endast CSS-kod för inläsning av teckensnitt (inte JavaScript). Den kan användas för att lägga till teckensnitt på webbsidor, i e-post eller nyhetsbrev i HTML-format, i Google AMP och många andra typer av projekt där webbteckensnitt stöds. Inläsning av teckensnitt med JavaScript används för dynamiska deluppsättningar, vilket krävs för visning av östasiatiska webbteckensnitt.

Inbäddningskoden för vart och ett av dina projekt finns på webbprojektsidan.

Standardinbäddningskod

Standardinbäddningskoden är en <link>-tagg som läser in webbprojektets CSS-kod från teckensnittsnätverket (use.typekit.net) i webbläsaren.

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

Besök sidan Webbprojekt om du vill ta reda på standardinbäddningskoden för ditt projekt. Lägg till inbäddningskoden i taggen <head>på webbplatsen.

Inbäddningskoden @import

Inbäddningskoden @import kan användas direkt i din CSS-stilmall. Besök sidan Webbprojekt och klicka sedan på alternativet ”@import link” för att hitta @import-inbäddningskoden för ett projekt

Lägg till den mellan style-taggarna i <head>-avsnittet på din webbplats,

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

eller placera den överst i CSS-filen,

Obs!

Om du använder inbäddningskoden @import måste den finas i början av<style>-taggen eller CSS-filen med alla andra @import-satser. Annars läses teckensnitten inte in. Endast en @charset-post tillåts vara med före @import-rader.

Om du använder något av alternativen för CSS-inbäddningskoder kommer resten av sidan kanske inte att visas förrän efter att webbteckensnittets CSS-kod har laddats klart. Beteendet varierar mellan webbläsare beroende på hur de hanterar externa CSS-filer.

För asynkron teckensnittsladdning som inte blockerar resten av sidan ska du inkludera ett annat JavaScript-bibliotek jämte CSS-inbäddningskoden för att anpassa teckensnittsladdningen.

JavaScript-inbäddningskod

JavaScript-inbäddningskoden används för dynamiska deluppsättningar, vilket krävs för visning av östasiatiska webbteckensnitt.

<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-inbäddningskoden för ett dynamiskt projekt listas på webbprojektsidan.

Den avancerade inbäddningskoden kan anpassas genom att skicka ett konfigurationsobjekt till metoden Typekit.load. Se avsnittet JavaScript API om du vill veta mer.

JavaScript API

JavaScript exponerar den globala variabeln Typekit med en offentlig metod, load. Om du anropar Typekit.load utan argument läses teckensnitt in.

Typekit.load()

Du kan även skicka ett konfigurationsobjekt till Typekit.load.

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

Följande callback-funktioner kan anges:

loading – Denna callback-funktion anropas när alla teckensnitt har begärts.
active – Denna callback-funktion anropas när teckensnitten har renderats.
inactive – Denna callback-funktion anropas om webbläsaren inte stöder länkade teckensnitt *eller* om inget av teckensnitten gick att läsa in.
fontloading – Denna callback-funktion anropas en gång för varje teckensnitt som läses in. Callback-funktionen anropas med familjenamnet som första argument och beskrivningen av teckensnittsvarianten som andra argument.
fontactive – Denna callback-funktion anropas en gång för varje teckensnitt som renderas. Callback-funktionen anropas med familjenamnet som första argument och beskrivningen av teckensnittsvarianten som andra argument.
fontinactive – Denna callback-funktion anropas om teckensnittet inte kan läsas in. Callback-funktionen anropas med familjenamnet som första argument och beskrivningen av teckensnittsvarianten som andra argument.

Ändra inbäddningskoden på en webbplats

Om du har en webbplats som redan använder teckensnitt via en äldre JavaScript-inbäddningskod, kan du byta till den nyare CSS-versionen genom att ersätta <script>-taggarna i koden med HTML-inbäddningskoden <link> eller CSS-inbäddningskoden @import.

Använda en gammal inbäddningskod på en webbplats

Även om Adobe ibland ändrar alternativen för inbäddningskod när vi förbättrar teckensnittsvisningen, kommer alla tidigare versioner av inbäddningskoderna fortsätta att fungera.

Om du använder en äldre inbäddningskod på din webbplats behöver du inte ändra den. Men många webbplatser kommer att få högre prestanda genom att uppdatera till en nyare version.

Tidigare versioner av inbäddningskoden innehåller en JavaScript-version som läser in CSS-filen asynkront,

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

och en protokollrelativ JavaScript-version,

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

(Även om din webbplats använder den protokollrelativa inbäddningskoden används HTTPS för alla förfrågningar vid teckensnittsvisning.)

Använda flera inbäddningskoder på en webbplats

Vi rekommenderar inte att du lägger till fler än en inbäddningskod på samma webbsida av flera skäl:

Varje exemplar av inbäddningskoden är för det mesta överflödig.
Varje projekt gör separata förfrågningar om teckensnitt, vilket ökar antalet HTTP-förfrågningar och saktar ner inläsningen ytterligare.
Ett enstaka projekt kan cachelagras på alla sidor på din webbplats efter den första inläsningen.

Liknande innehåll

Varför kommer mina webbteckensnitt från use.typekit.net?

Få hjälp snabbare och enklare

Ny användare?