內嵌程式碼

內嵌程式碼就是在瀏覽器中將網頁字體載入您的網站,或在電子郵件用戶端中將網頁字體載入 HTML 電子郵件的方式。

預設和 @import 內嵌程式碼只會針對字體的載入使用 CSS (而非 JavaScript);它們可以用來新增字體到網頁HTML 電子郵件或電子報Google AMP,以及支援網頁字體的其他許多類型的專案中。JavaScript 字體載入是用於動態子集 (這是東亞網頁字體服務所需)。

您的每個專案的內嵌程式碼都可以在「網頁專案」頁面中找到。

預設內嵌程式碼

預設內嵌程式碼是單一 <link> 標記,此標記會從字體網路 (use.typekit.net) 將網頁專案 CSS 載入到瀏覽器中。

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

若要尋找專案的預設內嵌程式碼,請造訪「網頁專案」頁面。將此內嵌程式碼新增至您網站中的 <head> 標記。

@import 內嵌程式碼

@import 內嵌程式碼可直接用在您的 CSS 樣式表中。若要尋找專案的 @import 內嵌程式碼,請造訪「網頁專案」頁面,然後按一下「@import 連結」選項

在您網站的 <head> 中,將其新增到 style 標記之間:

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

或將其置於 CSS 檔案的最上方:

將 @import 新增到 CSS

註解:

如果您使用 @import 內嵌程式碼,它必須位在包含其他任何 @import 陳述式的 <style> 標記或 CSS 檔案的開頭,否則無法載入字體。只允許 @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 內嵌程式碼會列在「網頁專案」頁面上。

若要自訂進階內嵌程式碼,請將設定物件傳遞給 Typekit.load 方法;如需詳細資訊,請參閱 JavaScript API 區段

JavaScript API

JavaScript 透過一個公用方法 load 公開全域變數 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 要求的數量並進一步減緩載入速度。
  • 在初次載入後,就可以在您網站上的所有頁面中快取單一專案。
Adobe 標誌

登入您的帳戶