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.
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 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,
eller placera den överst i CSS-filen,
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 var och en hanterar externa CSS-filer.
För asynkron teckensnittsinläsning som inte blockerar resten av sidan, inkludera ett annat JavaScript-bibliotek tillsammans med CSS-inbäddningskoden för att anpassa din teckensnittsinläsning.
JavaScript-inbäddningskod
JavaScript-inbäddningskoden används för dynamiska deluppsättningar, vilket krävs för visning av östasiatiska webbteckensnitt.
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.
Du kan även skicka ett konfigurationsobjekt till Typekit.load.
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,
och en protokollrelativ JavaScript-version,
(Ä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
Utforska Adobe Fonts
Hitta det perfekta typsnittet för alla webb- och utskriftsprojekt.
