閱讀本文以瞭解如何在您的網頁上使用 Adobe Typekit 網頁字體、Edge 網頁字體,以及自行管理的網頁字體。

註解:

Adobe Muse 不再增加新功能,並將於 2020 年 3 月 26 日停止支援。如需詳細資訊和協助,請參閱 Adobe Muse 終止服務頁面

註解:

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

如何在 Adobe Muse 中使用 Typekit 字體

Adobe Muse「新增/移除」字體選單現在提供 Adobe Typekit 網頁字體。

您可以透過任何等級的 Creative Cloud 方案試用 Typekit 字體庫中有限的字體選項;如果您已訂閱付費方案,就能取用完整字體庫中的數千種字體。如需有關 Typekit 訂閱方案的詳細資訊,請參閱 Typekit 的網路字體代管方案

和自行管理的網頁字體不同,Typekit 會代管您決定用於網站上的字體。這表示如果您從 Typekit 字體庫選取字體,然後以 Adobe Muse 發佈您的網站,Typekit 會自動代管這些字體,並將您的 Typekit 帳戶連線至您的網站。

新增 Typekit 字體至您的網站

  1. 在 Adobe Muse 中,選取「檔案 > 新增/移除網頁字體
    」。

    FileAddRemoveWebFonts
  2. 在「新增網頁字體」對話框中,Typekit 索引標籤會列出您 Creative Cloud 帳戶類型可用的所有 Typekit 網頁字體。

    AddWebFonts
  3. 瀏覽尋找最符合您設計需求的字體。您可使用下列「排序」和「篩選」選項,選擇您需要的字體。

    • 按一下按鈕,依據「精選」、「最新」和「名稱」選項排序。
    SortTypekitFonts
    • 按一下「篩選」以利用下列任一篩選條件:
      • 分類:您可依據 Typekit 字體的分類來加以篩選,如 Serif、Sans Serif、Script 等。
      • 建議用於:依據 Typekit 建議用於段落或標題的字體進行篩選。
      • 屬性:依據粗細、寬度、高度等屬性進行篩選。
    AddWebFontsFilters
  4. 找到您想用的字體後,在字體上按一下即可。核取標記會出現,表示已選取該字體。您也可以決定是否一次新增多種字體。「選取的字體」索引標籤會顯示您已選取的所有字體。

    SelectedTypekitWebFonts
  5. 按一下「確定」。「網頁字體通知」對話方塊隨即出現,確認已加入新的網頁字體。視需要選取「不要再顯示」選項。

    fig_07_type
    按一下「確定」,關閉確認訊息。

    現在,若您再次使用「字體選單」選擇「網頁字體」選項,即會顯示您新增的字體清單。

    FileAddRemoveWebFonts

套用 Typekit 字體至您的文字

  1. 在 Adobe Muse 中,選取您要套用 Typekit 字體的文字。

    TextForEdgeWebFont
  2. 在仍然選取文字的情況下,從「字體」選單中選擇您要套用的 Typekit 字體。

    ApplyTypekitFont

在 Adobe Muse 中使用 Edge 網頁字體

網頁字體可讓您從 Typekit.com 代管的線上大型字體庫中選擇上百種字體。Adobe Muse 訂閱已包含 Adobe Muse 中的網頁字體庫。您不需要註冊或購買 Typekit 帳戶來存取字體,就能在網頁設計中使用它們。

注意:如果您有 Typekit 帳戶,您會注意到目前 Adobe Muse 中可使用的網頁字體集,與您造訪 typekit.com 時取得的字體集不同。Adobe Muse 提供的網頁字體是免費、沒有使用限制的,而且不需要 Typekit 帳戶。Typekit 帳戶提供的網頁字體會計量付費和控制存取。Adobe Muse 未來的版本可讓您從 Adobe Muse 工作區內存取您的 Typekit 字體庫,但現在此功能還無法使用。

使用網頁字體的優點是:

  • 您可選擇非常獨特和風格強烈的字體,來設定文字內容的樣式,即使您的電腦上沒有安裝這些字體。
  • 發佈、轉存或預視網站時,套用至文字的網頁字體會自動連結至頁面.
  • 字體由 Typekit.com 代管。訪客在瀏覽器中檢視線上網站時,字體會在幕後下載以顯示文字。

只有在極少數情況下,Typekit 伺服器會無法在網頁載入時動態載入您套用的字體。如果發生這種情況,系統會使用預設的備份字體來顯示文字內容。這種情況幾乎不可能發生,但您有必要知道訪客在任何情況下都能看到文字內容,網站也不會顯示錯誤訊息。

將網頁字體新增至設計時,請加以斟酌。如果您加入太多網頁字體,訪客將需要較長的下載時間,這會讓網站變慢,影響使用者對網站使用的整體感受。因此,在設計中套用字體時,應以 1 到 2 個字體系列、每個字體系列中有 4 種樣式為限。由於網頁字體是遠端資源 (就像影像和視訊),當訪客檢視網頁時,它們必須下載至訪客的瀏覽器快取。

Adobe Muse 的另一個特色是會追蹤網站使用的所有網頁字體。如果您移除了 .muse 檔使用的網頁字體,當您下次開啟 .muse 檔時,網頁字體仍會留在「字體」選單中的清單內。所以您不會意外移除網站所需的網頁字體,且您在設計網頁時,無需手動追蹤正在使用的網頁字體。

新增 Edge 網頁字體至 Adobe Muse 專案

請依照下列步驟新增新的網頁字體:

隨即會出現顯示網頁字體程式庫的新視窗。

  1. 使用「文字」工具選取文字框中的一些文字。

  2. 使用「字體」選單 (在「控制」面板或在「文字」面板中) 選擇「網頁字體 > 新增網頁字體...」。

    EdgeWebFontsLibrary
    網頁字體庫可讓您存取上百種字體,以套用至頁面。

    按一下頁面頂端的「篩選」,選擇您想新增的字體樣式。或使用搜尋欄位依名稱尋找字體。

  3. 找到您想用的字體後,在字體上按一下即可。核取標記會出現,表示已選取該字體。您也可以決定是否一次新增多種字體。

    SelectedEdgeWebFonts
    按一下您想新增的字體,核取標記表示已選取字體。

    您可按一下靠近右上方的一或多行按鈕,來檢視適合標題或段落的最佳字體。

    EdgeWebFontsFilters
    檢視適合作為標題文字樣式的字體清單。

    按一下最右邊的核取標記按鈕,視窗就會顯示您已選取的字體清單。如果您改變心意,決定不要新增字體,只要在字體名稱上再按一下即可取消選取。

    「網頁字體通知」對話方塊隨即出現,確認已加入新的網頁字體。

  4. 選完要新增的字體後,請按一下「確定」。

  5. 按一下「確定」。

    如有需要,可勾選「不要再顯示」核取方塊。

    fig_07_type
    按一下「確定」,關閉確認訊息。

    現在,若您再次使用「字體選單」選擇「網頁字體」選項,即會顯示您新增的字體清單。

    EdgeWebFonts
    在「字體」選單的「網頁字體」區段中選擇「新增網頁字體」。

新增及套用 Edge 網頁字體

  1. 在 Adobe Muse 中,選取您要套用 Edge 網頁字體的文字。

    TextForEdgeWebFont
  2. 在仍然選取文字的情況下,從「字體」選單中選擇您要套用的 Edge 網頁字體。

    ApplyEdgeWebFonts

在 Adobe Muse 中使用自行管理的網頁字體

「自行管理的網頁字體」功能可讓您存取並使用從第三方供應商購買的網頁字體。部分網頁字體可能無法於每位網站訪客的電腦或裝置上顯示。在這類情況下,視瀏覽器的文字引擎而定,系統會改用適合網頁的字體,您網站的外觀也可能因此產生明顯改變。

網頁字體必須從伺服器下載,例如由 Adobe Edge Web Fonts 所代管的網頁字體 (由 Typekit 提供)。網頁字體也可能與您的網站內容存放於同一個網頁伺服器。造訪網站期間以即時方式管理與呈現網頁字體的方法稱為「自行管理」,以此方法取得的字體則稱為「自行管理的網頁字體」。

必要條件

使用自行管理的網頁字體時,需要下列字體類型:

系統字體

在 Adobe Muse 內設計網頁時需要用到此字體。當您購買網頁字體時,請務必下載並安裝經適當授權的桌面字體。Adobe Muse 支援下列字體格式:

  • True Type Font (.ttf)
  • Open Type Font (.otf)
  • True Type Collections (.ttc)
  • Mac Data Fork Fonts (.dfont)
  • Mac Resource Fork TrueType Suitcases

網頁字體

在瀏覽器內顯示您的網站時需要用到此字體。Adobe Muse 要求您取得下列網頁字體格式,以便在所有瀏覽器上顯示該字體:

  • Web 開放字體格式 (.woff)
  • 內嵌 OpenType (.eot)
  • 可縮放向量圖形 (.svg)。此格式為舊版 Android 裝置所需。

 

新增自行管理的網頁字體

  1. 選取「檔案 > 新增/移除網頁字體」以顯示「新增網頁字體」對話方塊。

  2. 選取「新增網頁字體」對話方塊上的「自行管理的網頁字體」索引標籤。

    SelfHostedWebFontsDialog
  3. 瀏覽至包含該字體的檔案夾並加以選取,或是將該字體拖移至「新增網頁字體」對話方塊。找到網頁字體時,Adobe Muse 會顯示相應的提示。如果您之前新增過網頁字體,請按一下「+ 新增字體」按鈕以繼續。

    SelfHostedWebFontsFound
  4. Adobe Muse 會在指定檔案夾內搜尋網頁字體檔案,並且自動將其配對至對應的系統字體。請確認您已適當授權該網頁字體,然後按一下「繼續」。

  5. 「管理」模式會自動啟動,並列出已新增的網頁字體。

    ManageModeSelfHostedWebFonts

管理自行管理的網頁字體

「管理」模式會列出所有自行管理的網頁字體和相符的桌面字體。最近新增的字體、字體檔案遺失的字體或未具相符桌面字體的字體均會顯示在清單頂部。

自行管理網頁字體的「管理」模式可讓您執行下列操作:

指定相符的桌面字體

有時候,Adobe Muse 可能無法自動找出與網頁字體相符的對應桌面字體。在此情況下,您必須明確指定網頁字體的相符字體。若要指定網頁字體的相符字體,請執行下列操作:

  1. 按一下 按鈕以便顯示字體的對話方塊。

  2. 按一下「符合」按鈕以顯示系統上所安裝字體的清單。

  3. 在清單中捲動或依名稱篩選,以選取相符的系統字體。按一下「確定」以確認此配對。

指定遺失的字體檔案

如果 Adobe Muse 無法自動找出與 .woff 檔案對應的 .eot.svg 檔案,您可透過手動方式尋找。若要找出遺失的字體檔案,請按一下該字體旁邊的  按鈕。按一下「瀏覽」以瀏覽至遺失檔案的位置。按一下「確定」以新增遺失的檔案。

其他工作

  • 提供授權資訊:在要編輯的字體旁邊按一下 按鈕,提供授權資訊。按一下「確定」以完成。
  • 刪除字體:選取欲刪除的字體,然後按一下「確定」。
  • 篩選字體清單:在「篩選」文字方塊中輸入字體標籤的部分或全部字母,以便篩選字體清單。

瀏覽自行管理的網頁字體

如果您之前新增過自行管理的網頁字體,在您啟動「新增網頁字體」對話方塊時,「瀏覽」模式會自動啟動。此模式會提供字體的縮圖預視 (依系列分組),並且讓您選取要新增至「字體」下拉式清單的字體(依預設,系統會假定不存在諸如遺失字體檔案或缺少相符桌面字體等問題,將所有最近新增的自行管理字體加入「字體」下拉式清單)。您也可以依名稱篩選字體系列,或是僅顯示所選項目。 

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

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