使用手冊 取消

內嵌程式碼

  1. Adobe Fonts 使用手冊
  2. 簡介
    1. 系統和訂閱需求
    2. 瀏覽器和作業系統支援
    3. 在您的電腦上新增字體
    4. 將字體新增至您的網站
    5. 在 CC Mobile 上新增字體
  3. 字體授權
    1. 字體授權
    2. 管理您的帳戶
    3. 適用於企業的 Creative Cloud 客戶的授權
    4. 將字體授權新增至您的帳戶
    5. 從訂閱資料庫中刪除字體
    6. Adobe Fonts 不適用於在中國註冊的 Adobe ID
    7. 為什麼我的 Creative Cloud 訂閱未包含這些字體?
    8. Morisawa 字體移除 2021 年 9 月
  4. 取得及使用字體
    1. 在 Creative Cloud 應用程式中使用 Adobe Fonts
    2. 管理您的字體
    3. 解決桌面應用程式中缺少字體
    4. 在 InDesign 中使用字體
    5. 字體和印刷樣式
    6. 在 HTML5 Canvas 文件中使用網頁字體
    7. 在 InCopy 中使用字體
    8. 如何在 Adobe Muse 中使用字體
    9. 在 Muse 中使用網頁字體
    10. 封裝字體檔案
    11. 疑難排解指南:新增字體
    12. 新增字體未顯示在字體選單中
    13. 「無法新增一或多個字體」或「已安裝相同名稱的字體」
    14. 當字體發行公司更新我正在使用的字體時,會發生什麼狀況?
  5. 網頁設計和開發
    1. 將字體新增至您的網站
    2. 疑難排解指南:將字體新增至網站
    3. 在 HTML 電子郵件或電子報中使用網頁字體
    4. 搭配 Accelerated Mobile Pages (AMP) 使用網頁字體
    5. CSS 選擇器
    6. 使用字體顯示設定自訂網頁字體效能
    7. 內嵌程式碼
    8. 動態子集和網頁字體服務
    9. 字體事件
    10. 為什麼我的網頁字體來自 use.typekit.net?
    11. 網站無法連線至 use.typekit.net
    12. 透過 CodePen 使用網頁字體
    13. 瀏覽器和作業系統支援
    14. 網域
    15. 在本機開發時使用網頁字體
    16. 內容安全原則
    17. 列印網頁字體
  6. 語言支援和 OpenType 特性
    1. 語言支援和子集
    2. 使用 OpenType 特性
    3. CSS 中 OpenType 特性的語法
  7. 字體技術
    1. OpenType-SVG 彩色字體
    2. Ten Mincho:從版本 1.000 更新的重點

內嵌程式碼就是在瀏覽器中將網頁字體載入您的網站,或在電子郵件用戶端中將網頁字體載入 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

更快、更輕鬆地獲得協助

新的使用者?