Руководство пользователя Отмена

Коды встраивания

Поиск

Последнее обновление 21 мая 2021 г.

Код встраивания определяет то, как веб-шрифты загружаются на ваш веб-сайт в браузере или в электронное письмо в формате HTML в почтовом клиенте.

Коды встраивания по умолчанию и коды встраивания @import используют только CSS для загрузки шрифтов (без JavaScript); их можно использовать для добавления шрифтов на веб-страницы, в сообщения электронной почты или информационные бюллетени в формате HTML, Google AMP, и многие другие типы проектов, в которых поддерживаются веб-шрифты. Загрузка шрифтов JavaScript используется для динамического подмножества, что требуется для работы с восточноазиатскими веб-шрифтами.

Код встраивания для каждого из ваших проектов можно найти на Странице веб-проектов.

Код встраивания по умолчанию

Код встраивания по умолчанию представляет собой один тег <link>, который загружает CSS веб-проекта из сети шрифтов (use.typekit.net) в браузере.

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

Чтобы найти код встраивания по умолчанию для своего проекта, посетите страницу веб-проектов. Добавьте этот код встраивания к тегу <head> на своем веб-сайте.

@импорт кода встраивания

@импорт кода встраивания можно выполнять непосредственно в таблице стилей CSS. Чтобы найти код встраивания @import для проекта, откройте страницу веб-проектов и выберите пункт @import.

Добавьте между тегами стиля в поле<head> вашего сайта:

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

или поместите его вверху вашего файла CSS:

Примечание.

Если вы используете код встраивания @import, то он должен находиться в начале тега <style> или файла CSS с любыми другими операторами @import, в противном случае шрифты загружены не будут. Только запись @charset может быть указана перед строками @import.

Использование любого из вариантов кода встраивания CSS означает, что остальная часть страницы может не отображаться до тех пор, пока не завершится загрузка CSS веб-шрифта. Поведение варьируется в зависимости от браузера и используемого способа обработки внешних файлов CSS.

Для асинхронной загрузки шрифтов, которая не блокирует остальную часть страницы, добавьте еще одну библиотеку JavaScript вместе с кодом встраивания CSS для индивидуальной настройки загрузки шрифта.

Код встраивания JavaScript

Код встраивания JavaScript требуется для динамического подмножества, которое используется для работы с восточноазиатскими веб-шрифтами.

<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,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

Код встраивания JavaScript для динамического проекта указан на странице веб-проектов.

Код встраивания JavaScript для динамических проектов

Расширенный код встраивания можно настроить, передав объект конфигурации методу Typekit.load; подробные сведения см. в разделе API-функции JavaScript.

API-функции JavaScript

JavaScript предоставляет глобальную переменную Typekit с одной загрузкой общедоступного метода. Вызов «Typekit.load» без аргументов запустит загрузку шрифта.

Typekit.load()

Вы также можете передать объект конфигурации в Typekit.load.

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

Можно указать следующие обратные вызовы:

loading — этот обратный вызов запускается, когда были запрошены все шрифты.
active — этот обратный вызов запускается, когда шрифты отображаются.
inactive — этот обратный вызов запускается, когда браузер не поддерживает связанные шрифты или если ни один из шрифтов не может быть загружен.
fontloading — этот обратный вызов запускается один раз для каждого загруженного шрифта. Обратный вызов вызывается с именем семейства в качестве первого аргумента и описанием варианта шрифта в качестве второго аргумента.
fontactive — этот обратный вызов запускается один раз для каждого отображаемого шрифта. Обратный вызов вызывается с именем семейства в качестве первого аргумента и описанием варианта шрифта в качестве второго аргумента.
fontinactive — этот обратный вызов запускается, если шрифт не может быть загружен. Обратный вызов вызывается с именем семейства в качестве первого аргумента и описанием варианта шрифта в качестве второго аргумента.

Изменение кода встраивания на веб-сайт

Если у вас есть веб-сайт, который уже использует шрифты через устаревший код встраивания JavaScript, вы можете переключиться на более новую версию CSS, заменив теги <script> в вашем коде на код встраивания HTML <link> или на код встраивания CSS @import.

Использование устаревшего кода встраивания на веб-сайте

Хотя Adobe время от времени меняет параметры кодов встраивания по мере улучшения обслуживания шрифтов, все предыдущие версии кодов встраивания продолжают работать.

Если вы используете устаревший код встраивания на своем веб-сайте, вам не обязательно его менять. Однако многие веб-сайты выиграют от повышения производительности после обновления до более новой версии.

Предыдущие версии кода встраивания включают версию JavaScript, которая загружает файл CSS асинхронно:

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

и версию JavaScript, зависящую от протокола:

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

(Даже если ваш сайт использует код встраивания, зависящий от протокола, обслуживание шрифтов использует HTTPS для всех запросов.)

Использование нескольких кодов встраивания на веб-сайте

Мы не рекомендуем добавлять более одного кода встраивания на одну и ту же веб-страницу по нескольким причинам:

Каждая копия кода встраивания в основном избыточна.
Каждый проект делает отдельные запросы шрифтов, что увеличивает количество HTTP-запросов и еще больше замедляет загрузку.
Один проект можно кэшировать на всех страницах вашего сайта после первой загрузки.