使用手冊 取消

將字體新增至您的網站

  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. 在 Muse 中使用網頁字體
    9. 封裝字體檔案
    10. 疑難排解指南:新增字體
    11. 新增字體未顯示在字體選單中
    12. 「無法新增一或多個字體」或「已安裝相同名稱的字體」
    13. 當字體發行公司更新我正在使用的字體時,會發生什麼狀況?
  5. 網頁設計和開發
    1. 將字體新增至您的網站
    2. 疑難排解指南:將字體新增至網站
    3. 疑難排解字型問題
    4. 在 HTML 電子郵件或電子報中使用網頁字體
    5. 搭配 Accelerated Mobile Pages (AMP) 使用網頁字體
    6. CSS 選擇器
    7. 使用字體顯示設定自訂網頁字體效能
    8. 內嵌程式碼
    9. 動態子集和網頁字體服務
    10. 字體事件
    11. 為什麼我的網頁字體來自 use.typekit.net?
    12. 網站無法連線至 use.typekit.net
    13. 透過 CodePen 使用網頁字體
    14. 瀏覽器和作業系統支援
    15. 網域
    16. 在本機開發時使用網頁字體
    17. 內容安全原則
    18. 列印網頁字體
  6. 語言支援和 OpenType 特性
    1. 語言支援和子集
    2. 使用 OpenType 特性
    3. CSS 中 OpenType 特性的語法
  7. 字體技術
    1. OpenType-SVG 彩色字體
    2. Ten Mincho:從版本 1.000 更新的重點

Adobe Fonts 中的網頁字體可用於您的網站、HTML 電子郵件行銷活動Google AMP 格式的文章,以及支援網頁字體的其他許多專案。

Adobe Fonts 網頁服務要求透過他們提供的內嵌程式碼來使用網頁字體。 使用條款不允許您自行託管網頁字體檔案或上傳到網站設計平台。

選擇要使用的字體

請先瀏覽字體庫。您可以從語言和寫作系統下拉式選單中選擇所需的語言支援。

顯示字體 Web 介面,並將語言設定醒目顯示
選取語言和寫作系統選單,以查看字體的語言篩選器選單

新增標籤或篩選器,以縮小字體清單範圍。使用我們的自然語言標籤來瀏覽適合您的專案風格的字體,或者您可以按分類 (例如襯線體或無襯線體)、屬性 (x 高度、寬度或粗細) 或語言進行篩選。 

Adobe Fonts 標籤瀏覽

建立網頁專案

當您找到喜歡的字體後,請按一下 </> 按鈕,將該系列新增至網頁專案。

Gilbert 會使用醒目顯示的新增系列選項顯示字體影像

您還可以按一下字體名稱以開啟該系列頁面,並查看所有可用的字體粗細和樣式。接著,按一下頁面頂端的「</> 新增至網頁專案」,將該系列新增至網頁專案。

從字體 Web 新增字體系列並選擇樣式和字體粗細

在「新增字體至網頁專案」視窗中,您將可以為網頁專案命名並決定要包含哪些字體。

  1. 按一下選單,然後選擇「建立新專案」
  2. 為您的網頁專案命名
  3. 使用核取方塊,選擇要包含的字體粗細和樣式。
  4. 建立專案。

您稍後也可以透過「管理字體」頁面,變更專案設定。

選取字體以將其新增到字體 Web 的新專案中的快顯視窗影像

接著,系統會為您提供內嵌程式碼,以便將字體載入您的網站。不同選項的說明可在內嵌程式碼說明頁面中找到,而預設的內嵌程式碼對大多數專案都適用。

請複製內嵌程式碼並將其新增至您網站中的 <head> 標記。

字體的內嵌程式碼會和字體樣式一起顯示在影像中

按一下「完成」關閉網頁專案視窗,然後繼續瀏覽。若要將更多字體新增至您的專案,請按一下另一個字體系列的 </> 按鈕,然後從選單 (而不是「建立新專案」) 中選擇您的專案名稱。

自訂您的網頁專案

您的 Web 專案以及您新增至專案中的所有字體都會列在「管理字體」下方。

請按一下「編輯專案」按鈕以變更包含的字體粗細和樣式、從專案中將網頁字體系列完全移除,或是指定字體顯示設定。您也可以在網頁專案編輯器中變更字元集,其指定專案的語言支援。  

東亞字體必須與動態子集一起提供,而其他字體則具有基於語言的子集選項:預設、全部字元或自訂的語言子集。語言支援和子集說明頁面提供了不同選項的更多資訊。

您可以透過選取「OpenType 特性」方塊來包含任何 OpenType 特性。選取此方塊後,也會顯示該特定網頁字體系列可用的特性清單,例如連字、替代字元或小寫字母。

字體顯示可讓您指定如何在網頁瀏覽器中載入網頁字體並套用到您的網站。有關這些選項的詳細資訊,請參閱我們的字體顯示設定說明頁面。

當您按照所要的方式設定專案後,請按一下「儲存變更」以儲存專案。幾分鐘後,這些更新便可在您的網站上使用。

在 CSS 中套用字體

「網頁專案」頁面會列出專案中每種字體的 CSS 字體系列名稱、粗細數值和字體樣式。請使用 CSS 中的這些字體系列名稱,將字體套用至文字。

wp-page

更快、更輕鬆地獲得協助

新的使用者?