用户指南取消(C)

嵌入代码

搜索

上次更新日期： 2021年4月29日

嵌入代码指明在浏览器中如何将字体加载到您的网站或在电子邮件客户端中如何加载到 HTML 电子邮件中。

默认和 @import 嵌入代码仅使用 CSS 加载字体（不使用 JavaScript）；它们可以用来将字体添加到网页、HTML 电子邮件或新闻稿、Google AMP 以及支持 Web 字体的许多其他类型的项目。JavaScript 字体加载用于动态子集，这是东亚 Web 字体服务所必需的。

每个项目的嵌入代码都可以在 Web 项目页面找到。

默认嵌入代码

默认嵌入代码是单个 <link> 标记，用于在浏览器中从字体网络 (use.typekit.net) 加载 Web 项目 CSS。

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

要找到项目的默认嵌入代码，请访问 Web 项目页面。将此嵌入代码添加到您网站中的 <head> 标签中。

@import 嵌入代码

@import 嵌入代码可以直接在 CSS 样式表中使用。要找到项目的 @import 嵌入代码，请访问 Web 项目页面，然后单击“@import 链接”选项。

在网站的 <head> 中的 style 标记之间添加该代码：

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

或将其放在 CSS 文件的顶部：

注意:

如果您使用 @import 嵌入代码，则它必须位于 <style> 标记或 CSS 文件的开头，与任何其他 @import 语句在一起，否则字体将不会加载。在 @import 行之前只允许列出一个 @charset 条目。

使用任一个 CSS 嵌入代码选项都意味着直到 Web 字体 CSS 加载完成后，页面的其余部分才会显示。不同浏览器的行为不同，具体取决于每种浏览器如何处理外部 CSS 文件。

对于不阻止页面其余部分显示的异步字体加载，在 CSS 嵌入代码中包括另一个 JavaScript 库，以便自定义字体加载。

JavaScript 嵌入代码

动态子集需要 JavaScript 嵌入代码，用于东亚 Web 字体服务。

<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 嵌入代码列在 Web 项目页面中。

可以通过将配置对象传递给 Typekit.load 方法来自定义高级嵌入代码；有关详细信息，请参阅 JavaScript API 部分。

JavaScript API

JavaScript 公开了一个全局变量 Typekit，带有一个公共方法加载。不带任何参数调用“Typekit.load”将触发字体加载。

Typekit.load()

您还可以将配置对象传递给 Typekit.load。

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

可以指定以下回调：

loading — 请求所有字体后触发此回调。
active — 呈现字体后触发此回调。
inactive — 当浏览器不支持链接的字体或无法加载任何字体时，将触发此回调。
fontloading — 加载每个字体时都会触发一次此回调。使用系列名称作为第一个参数，使用字体变化描述作为第二个参数来调用回调。
fontactive — 呈现每个字体时都会触发一次此回调。使用系列名称作为第一个参数，使用字体变化描述作为第二个参数来调用回调。
fontinactive — 如果无法加载字体，则会触发此回调。使用系列名称作为第一个参数，使用字体变化描述作为第二个参数来调用回调。

更改网站中的嵌入代码

如果您的网站已经在通过旧版 JavaScript 嵌入代码使用字体，则可以通过将代码中的 <script> 标记替换为 HTML <link> 嵌入代码或 CSS @import 嵌入代码来切换到更新的 CSS 版本。

在网站中使用旧版嵌入代码

尽管随着我们对字体服务作出改进，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 请求数并进一步减慢加载速度。
首次加载后，可以在站点上的所有页面缓存单个项目。

更快、更轻松地获得帮助

新用户？