- Adobe Fonts 使用手冊
- 簡介
- 字體授權
- 取得及使用字體
- 網頁設計和開發
- 語言支援和 OpenType 特性
- 字體技術
內嵌程式碼就是在瀏覽器中將網頁字體載入您的網站，或在電子郵件用戶端中將網頁字體載入 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 內嵌程式碼，它必須位在包含其他任何 @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 要求的數量並進一步減緩載入速度。
- 在初次載入後，就可以在您網站上的所有頁面中快取單一專案。
