隨著 CSS3 面世,網站現可用 @fonts 自訂字體。不過中文網站可用的免費自訂字體並不多,除了 Google Fonts 之外,Adobe 的思源黑體和思源宋體亦是熱門選擇。不過網站要怎樣才能用到該兩款字型呢,除了把字型檔上載至伺服器外,其實還可以用 Adobe Typekit 直接套用。

甚麼是 Adobe Typekit?

Adobe Typekit 是一個字體訂閱服務,用戶能把字體同步到到電腦和網站。要使用 Typekit,用戶必須要有 Adobe ID。

Adobe Typekit 共設有三個計劃,其中一個為免費,但功能較其餘兩個的收費版有所局限;如果用戶本身有訂閱 Adobe Creative Cloud 則可使用 Typekit。

▼Adobe Typekit 三個計劃的細節

以下為 Adobe Typekit 的主要三大功能:

1.同步字體至 Adobe Creative Cloud 產品

用戶可在 Typekit 上搜尋字體並將之與 Creative Cloud 中的程式同步,如 Photoshop、Illustrator 等。用戶可選擇 Serif、Sans-serif,以及用於標題、段落等來找出所需字體。之後只需點選「Sync」便可。

▼點選「Sync」便可把字體同步到 Adobe Creative Cloud 其他產品

在 Adobe Typekit 內選擇要 Sync 的字體

 

2.以圖搜尋字體

用戶可上載圖片,Typekit 就會自動選出最近似的字體。這功能是由 Adobe 近期經常提到的人工智能技術 Sensei 技援。

▼用戶可上載圖片,之後 Typekit 就會分析字體

用戶可上載圖片,之後 Typekit 就會分析字體

用戶可上載圖片,之後 Typekit 就會分析字體

▼上載圖片後,Adobe Typekit 就會找出與圖片最相似的字體。

上載圖片後,Adobe Typekit 就會找出與圖片最相似的字體。

上載圖片後,Adobe Typekit 就會找出與圖片最相似的字體。

 

3.嵌入網頁字體

透過 Typekit 內的 Kits,用戶就可以把 Typekit 內的字體用於網站,這樣用戶就不用把字型檔上載,並改善字體載入效率。接下來將講解如何將有襯線的「思源宋體」和無襯線的「思源黑體」加入網頁字體之中。

▼可把字體加入 Adobe Typekit 內的 Kits,以套用字體至指定網頁之中

可把字體加入 Adobe Typekit 內的 Kits,以套用字體至指定網頁之中

可把字體加入 Adobe Typekit 內的 Kits,以套用字體至指定網頁之中

如何透過 Adobe Typekit 把自訂字體加至網頁?

1.搜尋字體

首先當然要在 Adobe Typekit 內搜尋思源宋體和思源黑體。只需輸入「Chinese」就會找到該兩款字體。直接輸入「思源宋體」或「思源黑體」並不會找到任何結果,因為兩者在 Typekit 的名稱分別為「Source Han Serif Traditional Chinese」和「Source Han Sans Traditional Chinese」。

▼只需輸入「Chinese」就會找到「思源宋體」和「思源黑體」

Adobe Typekit 內輸入Chinese 搜尋思源明體和思源黑體

 

點擊所需字體,就可看到字體在不同粗幼度的效果。

2.加入至 Kit

接著就可以點擊「Add to Kit」。用戶可選擇把字體加入現有的 Kit 或創建一個新的 Kit。如果是建立新 Kit 的話,就需要為 Kit 命名和設定字體所用的域名。注意:免費版只能建立一個 Kit,但每一個 Kit 可使用多於一個的字體。

▼可選擇把字體加至現有的 Kit,或建立一個新的 Kit

▼建立 Kit 時需要設定 Kit 的名稱和使用域名(Source : Adobe)

 

3.加入 CSS/JS 檔案至網頁

設定好 Kit 後,Typekit 就會顯示網頁需要的 HTML 碼。如果是英文字體的話會是 CSS 檔,但如果是中文等東亞字體就是 JS 檔。把 HTML 碼複製至網頁之中便可。

▼需要把以下 CSS 檔加入網頁方能使用自訂字體(Source : Adobe)

 

▼如果是東亞字體就會是 JS 檔

 

4.設定要套用字體的文字

最後一步,就是為網頁指定元素套用字體!方法有兩種。

第一,用戶可在 Adobe Typekit 內的 Selectors 設定要套用字體的元素,可以是 HTML 元素、Class 或 ID。

▼可在左邊新增 Selectors 以確定要套用字體的網頁元素

第二,用戶可在自己的 CSS 檔設定字體。

▼亦可在自己的 CSS 檔加入 font-family 。

點擊 Using Fonts in CSS 後,就可以看到字體的 font-family 值(如 “source-han-serif-tc” ),之後直接在自己的 CSS 檔中為元素加入相應的 font-family 便可,例如:

h1 {
font-family: "source-han-serif-tc",serif;
}

 

不同字型大小、顏色的思源宋體效果如下: