註解:

 Typekit 現在稱為 Adobe Fonts,並隨附在 Creative Cloud 和其他訂閱中。了解更多

使用 Adobe Fonts 中的網頁字體

Adobe Fonts 中的網頁字體現已在 Adobe Animate CC 中提供 HTML5 Canvas 文件使用。

由於 Adobe Fonts 與 Animate CC 的整合,優良字型提供商所提供數千種優質的網頁字體將能立即供您在 HTML5 Canvas 文件中取用。

您可以透過任何等級的 Creative Cloud 計劃,試用 Adobe Fonts 元件庫中的精選字體,而且若您已訂閱繳費類型的計劃,將能取用包含數千種字體的完整元件庫。

如需有關 Adobe Fonts 訂閱計劃的詳細資訊,請參閱 Adobe Fonts 寄存的網頁字體

不同於自行寄存的網頁字體,Adobe Fonts 會寄存您決定要在寄存內容中使用的字體。如果您從 Adobe Fonts 元件庫中選取字體,然後將文件發佈到網路上,Adobe Fonts 會自動寄存那些字體,並將您的 Adobe Fonts 帳戶連線到網路上的內容。

您可以透過 Creative Cloud 訂閱取用 Adobe Fonts 元件庫。如需詳細資訊,請參閱 https://fonts.adobe.com。此外,您也可以購買新的 Adobe Fonts。重新啟動 Animate CC 以在「所有字體」標籤的 Adobe Fonts 畫面中檢視已購買的字體。

在 HTML5 Canvas 文件中使用網頁字體

  1. 開啟 HTML5 Canvas 文件,並在「工具」面板中選取「文字」工具。

  2. 在「屬性」面板中,選取「動態文字」,然後按一下「字體系列」下拉式清單方塊旁邊的「新增網頁字體」按鈕。

    TypeKit-Selection
  3. 在出現的「新增網頁字體」視窗中,按一下「開始使用」。

    新增 Adobe Fonts
    新增 Adobe Fonts
  4. 「新增 Adobe Fonts」對話方塊會列出您的 Creative Cloud 訂閱計劃可以使用的所有 Adobe Fonts 字體。現在,您可以瀏覽字體、搜尋特定字體,或者依字體屬性篩選,來選取最符合您設計需求的字體。

    請按一下「篩選」,善加利用下列任一篩選條件:

    • 分類:您可以根據字體分類來篩選網頁字體,例如 Serif、Sans Serif 和字體。
    • 推薦用於:根據網頁字體對於段落或標題的推薦來篩選字體。
    • 屬性:根據粗細、寬度及高度等屬性來篩選。
    新增 Adobe Fonts 對話方塊
    新增 Adobe Fonts 對話方塊
  5. 找到您要使用的字體之後,只要按一下字體即可。隨即出現核取標記,表示已選取字體。您可以一次選擇增加多個字體。「選取的字體」標籤會顯示您已選取的所有字體。

    您可以按一下字體預覽頁尾,來查看如細體、粗體及斜體等所有變體。

    選取字體
    選取字體

    按一下「確定」以新增選取的字體。

    selected-web-font-family-menu
    selected-web-font-family-menu
  6. 選取所增加的網頁字體,運用在您的 HTML5 Canvas 文件中。

    font-in-use
    將選取的字體用在文件中

  7. 將內容發佈到網路之前,先開啟「發佈設定」,按一下「網頁字體」標籤,然後指定您的 HTML5 內容寄存所在頁面的 URL。例如,www.adobe.com。您也可以使用逗號來指定多個 URL。

    網頁字體 URL 對話方塊
    網頁字體 URL 對話方塊

    註解:

    • Adobe Fonts 中的網頁字體將只會在發佈設定所列的網域名稱上載入。如果字體無法使用,或者您在網頁上看到來自 Adobe Fonts 的 403 錯誤,請確認您已在該清單中加入網站網域,並重新發佈專案。
    • 透過「測試影片」選項而產生的輸出僅供預覽之用。請使用「檔案 > 發佈」選項來產生用於最終部署的輸出。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策