閱讀本文以瞭解如何在 Adobe Muse 中使用印刷樣式與字體。

註解:

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

註解:

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

使用 Adobe Muse 設計網頁時,您可對文字套用三種不同的字體類型。發佈或轉存頁面時,您套用的字體類型會決定文字內容如何呈現。這三種不同的字體類型也對網站的運作和效能造成不同的影響,因此有必要了解選擇每一種類型的結果。

若要將文字新增至網頁,您可以:

  • 使用「文字」工具直接在頁面中輸入文字
  • 選擇「檔案 > 置入」並選擇外部 TXT 檔案以置入文字內容
  • 從其他外部來源拷貝文字,然後將文字貼在頁面上

建立包含文字的文字框後,您可以使用「文字」面板中的選項或「控制」面板設定字體的顏色、大小、樣式、對齊方式及其他格式設定選項。您也可以使用「字體」選單選擇符合您頁面設計的字體 (如 Arial 或 Helvetica)。

在本文中,您將取得三種不同字體類型的概覽,您可使用「字體」選單套用這些字體。您也將學習每種字體的優缺點,以及控制文字和編輯文字框的方法。

了解網頁字體、標準字體及系統字體間的差異

當您套用字體以格式化文字內容時有三種選擇:

  • 網頁字體
  • 標準字體
  • 系統字體

以下簡介各個選項:

Adobe Muse 中的網頁字體包括 Typekit 字體、Edge 網頁字體,以及自行管理的網頁字體。它們讓您能夠取用龐大的字體庫 (數百種英文字體),並套用於 Adobe Muse 中的網頁。當您套用網頁字體於文字內容時,Adobe Muse 會自動在頁面加入程式碼,連結至該字體系列。當瀏覽器造訪此頁面時,即會下載呈現頁面所需的網頁字體,再以文字顯示頁面內容。如此有許多優點,因為您擁有多樣的字體可用於設計頁首與其他重要文字內容,且發佈或轉存後的頁面文字均以可選取的文字呈現。不過,請小心勿在同一頁面使用過多種網頁字體。連結過多檔案的頁面就如同嵌入大量影像的設計,會延緩瀏覽器載入頁面時間。每頁使用的網頁字體不應超過三種,字體大小亦應偏大,以確保可讀性。如需詳細資訊,請參閱 Typekit 和其他網頁字體

標準字體 (含後援字體) 即是造訪您網站的所有電腦均較可能擁有的字體。此類字體包含標準的字體系列,如 Arial、Georgia 以及 Times New Roman。標準字體種類雖少卻常見,選用此類字體時,線上網站將以文字呈現內容。標準字體載入速度快,但是裝飾性低。長篇段落文字內容的格式即可選用標準字體,因為這些字體均是為網頁可讀性而最佳化。網站盡可能採用標準字體,即可確保網站運作順暢,避免載入時間過久。

系統字體讓您使用較獨特的字體,採用的是您 (設計師) 本身電腦上所安裝的特定字體。例如,若您設計的網站有特定主題,如園藝網站,就可以安裝 Typekit 網頁字體庫中所沒有的特殊花卉字體。文字偶爾使用系統字體並無不可,但是請記住此類文字內容將轉存為影像。這代表頁面載入時間較長,訪客也將無法選取、複製或貼上該文字。系統字體最適合小段的文字,如標題類。若要使網站便利易用,請避免將系統字體用於地址、電話號碼及其他任何訪客可能需要複製貼上到行事曆或電子郵件訊息的文字內容。請記得,有些訪客閱讀過小的字體有困難,因此可能設定瀏覽器放大字體大小;但是此法仍然無助於閱讀轉存為影像檔案的文字。另外也請記得,搜尋引擎是依據文字內容製作網站索引,並以此計算網站在搜尋結果的排名。綜合以上理由,系統字體僅適合用於有必要展現設計力道的地方。若有同效的網頁字體或標準字體,請改用該字體。

要套用上述三種字體,請用「文字」工具選取文字後,在「字體」選單選擇要使用的選項。

「字體」選單
用「字體」選單選擇您要使用的字體。

在「字體」選單的上方會看見最近使用過的字體清單。如此即可在設計頁面時,輕鬆套用重複的字體。若稍後決定不需見到如此多種字體,或要清除所有最近使用的字體,僅需更新 Adobe Muse 偏好設定即可。

最近使用的字體
在「字體」選單設定記錄幾個最近使用的字體或清除此清單。

在以下小節中,您會進一步了解每種字體類型的詳細說明,以及套用這些字型時,對線上網站呈現的文字內容會有怎樣的影響。

將字體套用至選取的文字

為了讓字體能有最佳呈現結果,請選擇符合使用目的的字體。例如,將字體套用至段落時 (以較小字體顯示大量的連續性文字),不要選擇太過華麗或過多裝飾的字體 (通常這種字體是用於以較大字體顯示的標題)。

網站文字其中一項重要的考量,就是文字必須清晰可辨。華麗的字體不適合以小型字體呈現,因為網路沒有足夠的解析度呈現這類字體視覺上的細節。

此外,段落字體應可用一般、斜體、粗體或粗斜體樣式表達,讓您可增強或加重文字,以強調人名、書名、片名和段落中的其他特殊內容。許多裝飾性或風格強烈的字體系列並不包含這些樣式選項。

字體也可以針對特殊用途做技術性最佳化。字體可使用外框格式,此在大型尺寸下有特別佳的呈現效果;字體也可以包含字體微調,以使用較小字體在不同平台上呈現最佳化的結果。如前所述,當您在 Adobe Muse 中存取網頁字體時,網頁字體庫可讓您篩選字體,查看適合用於段落或標題的推薦清單。如果您不確定設計中的某種字體是否適合用於標題或段落,請選擇系統推薦的段落和標題字體,這樣就可確保您建立的頁面可以輕鬆閱讀。

您可使用網頁字體設定文字樣式,程序與套用標準字體及系統字體相同。若要使用網頁字體設定文字樣式,請依照下列步驟操作:

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

  2. 在「字體」選單中選取要套用的字體,方法為選擇「網頁字體」,然後從清單中選取字體系列的名稱。

    選擇「網頁字體」
    選擇字體名稱,將網頁字體套用至選取的文字內容。

    套用某種字體後,就可使用「文字」面板或「控制」面板中的選項,來設定字體大小、顏色及其他所需的屬性。

    註解:

    進行網頁設計時,網頁字體的運作方式就如同其他的字體類型。您可編輯文字的格式設定、編輯和調整文字框大小,並將文字框放在您想要它在頁面上出現的地方。

  3. 完成網站設計後,按一下「預視」在 Adobe Muse 中查看設計顯示的結果。或選擇「檔案 > 在瀏覽器中預視網頁」,在瀏覽器視窗中檢閱設計。

    如上所述,網頁字體在設計有趣的頁面時特別有用,因為您有上百種字體可選擇 (此與系統字體不同),且頁面中特殊的印刷樣式會轉存成文字,不會轉存成影像檔。

  4. 請注意,在瀏覽器中預視頁面時,網頁字體文字會以文字內容呈現。請試著選取及拷貝這些文字,來查看它們的運作方式。

    可選取的網頁字體文字
    網頁字體文字會轉存為文字,因此可在網路瀏覽器中選取。

將文字內容轉存成文字,會比轉存成影像更佳。選擇系統字體時,文字內容會轉存為影像,這會使頁面需要較長時間載入。

使用網頁字體,訪客就能直接從網頁拷貝和貼上文字內容。這樣他們就能存取及儲存地址、電話號碼,以及其他想與他人分享或離線儲存在通訊錄的重要內容。

以文字呈現網頁字體,也有助於提高網站的搜尋結果排名,因為搜尋引擎製作網站內容的索引時,判讀文字內容比判讀影像檔容易。因此,使用網頁字體可提高網站的流量,也可讓訪客載入頁面時更有效率。

最後,對使用文字閱讀程式瀏覽的訪客來說,文字內容較易讀取。以文字呈現重要區域 (如頁面標題),可確保您的網站更容易讓所有人存取。

使用標準字體

「字體」選單包含一個列出標準字體的區段。您可在網頁設計中自由應用標準字體,因為所有現代電腦都已安裝這些字體。您不需要在電腦上安裝任何新東西,訪客的電腦上也已安裝了可用字體,能夠呈現頁面的文字內容。

標準字體是一小組常用電腦字體,所有的電腦都用其來顯示文字內容。文字若使用標準字體,便能以文字格式呈現於上線網站。

如同網頁字體一般,標準字體具備所有以文字格式呈現文字的優點,包括:

  • 訪客能選取、拷貝及貼上網頁內容
  • 相較於使用大量影像的頁面,使用文字內容的頁面載入的速度較快
  • 提高搜尋結果排名,因為搜尋引擎可製作文字內容的索引
  • 相較於存取影像內容,使用螢幕閱讀程式的訪客能夠更輕鬆地存取文字

不過,使用標準字體也有缺點,您在設計頁面時將受限於少量的字體選擇。

當您使用「字體」選單選擇「標準字體」時,會顯示完整清單。

「標準字體」完整清單
從「字體」選單選擇「標準字體」以查看完整清單。

標準字體限於:

  • Arial
  • Comic Sans
  • Courier New
  • Geneva
  • Georgia
  • Helvetica
  • Lucida Sans
  • Palatino
  • Times
  • Trebuchet
  • Verdana

請注意,如果將游標移至某個選項上,工具提示會顯示替代字體清單。

此工具提示表示,假如訪客沒有安裝您套用的字體,系統將自動使用相似的字體替換。替換字體後的頁面設計看起來仍與原始設計相仿,缺少的字體會在訪客未查覺的情況下悄悄地消失。訪客不會看到錯誤訊息,頁面內容仍會照常載入。系統會使用已安裝在訪客電腦上的相似替代字體來顯示文字。

一般而言,標準字體是頁面內容的好選擇,因為它能讓網頁的文字清晰可辨,使訪客易於瀏覽,但此類字體數量有限,不容易找到能夠顯現網站美感的字樣。

使用系統字體

系統字體指的是已在您個人電腦上安裝的字體。您可在安裝後將它們用於各種不同的程式,包括影像編輯程式。在 Adobe Muse 中設計頁面時,也可套用這些字體。

例如,如果您正在設計一個有關地震的網站,您可安裝一種看起來搖晃或破裂的字體,使頁面標題符合設計主題。您安裝的任何字體都可在 Adobe Muse 中使用,因此您的頁面版面不會受到限制,能夠完全以個人化的風格加以設計 (或在客戶的網站使用客戶的自訂字體)。系統字體可讓您使用各種獨特字體,為頁面賦予不同的特色。

訪客會看到您套用系統字體所設定的文字樣式,即使他們的電腦上沒有安裝這些字體。為了達到這樣的結果,Adobe Muse 會自動將所有使用系統字體的文字轉存為影像檔。這項作業會在幕後順暢地執行。當您設計頁面時,採用系統字體的文字也會處於可編輯狀態,以便繼續進行變更。

在「字體」選單選擇「系統字體」後,您會看到已安裝在您電腦上的字體清單。

「系統字體」清單
「系統字體」區段會顯示已安裝的字體清單。

將文字套用系統字體的缺點是,此類文字在上線網站中會以影像呈現,因此需要比文字內容更長的載入時間。

使用系統字體也有好處,依據您 (設計師) 電腦上所安裝的特定字體而定,您可使用更多較獨特的印刷樣式。不過,套用這些字體系列時,頁面可能會使用大量影像,而需要較長時間載入。這也會影響網站的效能。

所以若要在設計中套用系統字體,請酌量使用。

此外,即使文字沒有連結,也最好選取套用系統字體的文字,並在「超連結」選單的「標題」欄位輸入描述性標題。

當您在瀏覽器中預視頁面時,「標題」會在游標移到文字上時以工具提示顯示。

「標題」文字以工具提示顯示
輸入的「標題」文字會以工具提示顯示。

標題標籤對於使用螢幕閱讀程式的訪客相當實用,這些訪客會聆聽您的網站內容,而非用眼睛閱讀。加入標題也是很重要的一件事,因為建立網站索引的搜尋引擎會使用影像的標題,以便對網站內容做更佳的分類,這在影像文字傳達重要訊息 (如頁面標題) 時尤其重要。

請盡可能使用可媲美已安裝之系統字體的標準字體,並用後者取代前者。

套用及重設最近使用的字體

在 Adobe Muse 套用字體至文字後,該字體名稱即會顯示於「字體」選單的第一個區段。此功能因較容易找到字體,有助於重複套用相同字體至網站上的其他文字。您並不需要記住哪些是網頁字體、標準字體或是系統字體。此三種字體均會列於上方,只要之前套用過即可。

一般而言,網頁慣例避免在頁面使用過多不同字體。若單一頁面使用 4 種以下字體,則訪客在螢幕上閱讀時,其可讀性亦較佳。通常「最近使用的字體」區段僅會列出少數字體名稱以方便瀏覽。

但是,您或許會在設計時試用許多種字體。或者您可能在設計網站不同的區段時,發現發現「字體」選單中的「最近使用的字體」清單太長。若清單太長,挑選要用的字體也就較困難。

您可以控制「最近使用的字體」區段中所列出的字體。請依照下列步驟操作:

  1. 請選擇「Adobe Muse > 偏好設定」,開啟「偏好設定」對話方塊。

  2. 在「類型」區段中,輸入數值或使用上下箭頭重設「最近使用的字體大小」。

    重設「最近使用的字體數量」
    設定最近使用的字體顯示數量。

    若您按下「清除最近使用的字體」按鈕,將會清除清單中所有最近使用的字體。

  3. 按一下「確定」儲存您的變更,並關閉「偏好設定」對話方塊。

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

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