為您的下一個設計準備的30多種最佳Web安全字型

您不需要數以千計的字型來建立一個漂亮的網站。但是您確實需要確保訪問您網站的每個人都可以看到您使用的字型。這就是網路安全字型的用武之地。

如果您能找到 a) 100% 免費使用且 b) 不需要託管在其他任何地方讓您的訪問者看到它們的網路安全字型，這對您來說將是一個本壘打。

這正是這篇文章的目的：我們將介紹31種外觀最好的Web安全字型，並向您展示如何將它們實施到您的WordPress網站中。

使用下面的連結導航到您最感興趣的部分，或直接跳轉到我們的網路安全字型列表：

1. 什麼字型對Web來說是安全的？
2. 2022年是否需要Web安全字型？
3. Google字型對Web來說安全嗎？
4. 31+種最佳Web安全字型
5. 在哪裡下載Web安全字型？
6. 如何將Web安全字型新增到WordPress網站

什麼字型對Web來說是安全的？

包括變體在內，線上提供超過650,000種不同的字型。大多數網路瀏覽器和作業系統支援的字型被認為是網路安全的。作業系統會自動包含字型檔案，因此訪問者不必從您的伺服器下載字型。

一個例子是無處不在的Arial字型，它催生了數以千計的“衍生產品”。

2022年是否需要Web安全字型？

2019-2020年瀏覽器市場份額（圖片來源：StatCounter）

當然，絕大多數使用者現在都在移動裝置和桌面裝置上使用Google Chrome。但這並不意味著網路安全字型已成為過去。

事實上，支援的字型因作業系統而異，包括使用者的當前版本。因此，如果您使用僅受最新版Windows 11支援的字型設計網站，大多數使用者會看到其他內容。

此外，如果您選擇使用和託管自定義本地字型，或由第三方託管的字型，則可能會降低您的網站速度。因此，切換到網路安全字型可以加快您的網站速度。這是一件很棒的事情。因為近70%的消費者表示頁面速度會影響他們的購買決定。

Google字型對Web來說安全嗎？

您的作業系統本身並不支援Google字型，因此根據定義，它們不是網路安全字型。相反，由於第三方谷歌託管它們，谷歌字型被稱為網路字型。令人困惑，我們知道，但不同之處在於您的瀏覽器需要先載入檔案才能顯示Google字型。

Web安全字型已經在大多數裝置上準備好了字型檔案。但是，不要擔心缺少安全這個詞。使用Google字型來增強您網站的設計是完全安全的。但是，對外部伺服器的額外HTTP請求可能會降低您的頁面載入速度。

31+種最佳Web安全字型

我們編制了一份包含30多種不同外觀的Web安全字型的列表，您可以使用它們來設計您的網站。

讓我們直接進入它。

1. Arial

Arial字型示例

Arial 是一種經典的無襯線字型，適用於段落和標題。長期以來，它一直是網頁設計的主要內容。儘管近年來，它經常被用作字型堆疊的後備，而不是作為主要的字型系列。

推薦的字型堆疊

字型家族：Arial、Helvetica Neue、Helvetica、sans-serif。

2. Baskerville

Baskerville字型示例

Baskerville是一種相對較粗的襯線字型，最初由John Baskerville於1750年開發為一種字型。該設計非常平衡，使用粗細筆觸的混合來柔化典型襯線字型的硬邊。它得到了較新的Apple和Microsoft作業系統版本的良好支援。

推薦的字型堆疊

字型系列：Baskerville、Baskerville Old Face、Garamond、Times New Roman、serif。

3. Bodoni MT / Bodoni 72

Bodoni MT字型示例

Bodoni MT是一種襯線字型，和Times New Roman一樣，對於大多數網站來說，比起標題更適合段落文字。Bodoni MT預設可用於Microsoft 10和一些舊版本。Bodoni 72包含在macOS Sierra和更新版本中。

推薦的字型堆疊

字型系列：Bodoni MT、Bodoni 72、Didot、Didot LT STD、Hoefler Text、Garamond、Times New Roman、serif。

4. Calibri

Calibri字型示例

Calibri是Microsoft的標準sans serif字型，自Microsoft Office 2007一起釋出以來一直存在。它具有柔軟、現代的外觀，圓潤的邊緣提升了典型的sans serif感覺，使其比機器人更溫暖。

推薦的字型堆疊

字型系列：Calibri、Candara、Segoe、Segoe UI、Optima、Arial、sans-serif。

5.Calisto MT字型示例

Calisto MT字型示例

Calisto MT是一種襯線字型，與大多數類似字型相比，襯線字型更柔和且不那麼明顯。它是標準的 Microsoft 字型，包含在大多數較新版本的Windows中。macOS或iOS等效字型是Bookman Old Style字型。

推薦的字型堆疊

字型系列：Calisto MT、Bookman Old Style、Bookman、Goudy Old Style、Garamond、Hoefler Text、Bitstream Charter、Georgia、serif。

6. Cambria

Cambria字型示例

Cambria是一種更柔和的襯線字型，在許多情況下，即使是大寫字母也幾乎看不到襯線字型。這給它一種更現代的感覺， 並在螢幕上保持了高水平的可讀性。

推薦的字型堆疊

字型家族：Cambria，Georgia，serif。

7. Candara

Candara字型示例

Candara是一種無襯線字型。它是Microsoft的ClearType字型集的一部分。macOS和iOS等價物 Optima Regular。不均勻的筆畫粗細使它感覺不像其他無襯線字型那麼現代和企業化。

推薦的字型堆疊

字型系列：Candara、Calibri、Segoe、Segoe UI、Optima、Arial、sans-serif。

8. Century Gothic

Century Gothic字型示例

Century Gothic是一種幾何無襯線字型，具有非常乾淨和平衡的外觀。這是一種很棒的網路字型，尤其是標題和副標題。它最初是為了與字型Futura競爭而設計的。它包含在大多數Microsoft和Apple作業系統中。

推薦的字型堆疊

字型家族：Century Gothic、CenturyGothic、AppleGothic、sans-serif。

9. Consolas

Consolas字型示例

Consolas是一種具有獨特設計方法的無襯線字型。所有字元都具有相同的寬度，這就是它僅對字母“I”和小寫“l”使用襯線的原因。它是ClearType集合的一部分。

推薦的字型堆疊

字型系列：Consolas、monaco、monospace。

10.Copperplate Gothic

Copperplate Gothic字型示例

Copperplate Gothic是一種受哥特式啟發的字型，在某些字母上帶有輕微的字形襯線。由於它的靈感來自哥特式符文，因此沒有可用的小寫字型。

推薦的字型堆疊

字型系列：Copperplate、Copperplate Gothic Light、fantasy。

11.Courier New

Courier New示例

Courier New是一種等寬厚襯線字型，與大多數其他襯線和無襯線字型相比，常規文字要細得多。微軟和蘋果在計算機和移動裝置上幾乎完美地覆蓋了它。

推薦的字型堆疊

字型系列：Courier New、Courier、Lucida Sans Typewriter、Lucida Typewriter、等寬字型。

12. Dejavu Sans

Dejavu Sans字型示例

Dejavu Sans是一種無襯線字型，線條幹淨、直線，幾乎是對Arial和Verdana等經典sans字型的迴歸。

推薦的字型堆疊

字型系列：Dejavu Sans、Arial、Verdana、sans-serif。

13. Didot

Didot字型示例

Didot是一種字型，其靈感來自於19世紀法國印刷企業Didot家族使用的原始Didot字型。它是Apple的中流砥柱，受到大多數作業系統和裝置的支援。

推薦的字型堆疊

字型系列：Didot、Didot LT STD、Hoefler Text、Garamond、Calisto MT、Times New Roman、襯線。

14.Franklin Gothic

Franklin Gothic字型示例

Franklin Gothic是一種無襯線字型，帶有異常粗的字母，幾乎就像另一種字型的粗體版本。最初的字型是由美國字型創始人在20世紀初開發的。這是標題的不錯字型選擇，但可能不是正文的最佳選擇。

推薦的字型堆疊

字型家族：Franklin Gothic、Arial Bold。

15. Garamond

Garamond字型示例

Garamond是一種襯線字型，其靈感來自16世紀巴黎雕刻師Claude Garamond製作的字型。與Times New Roman等一些更標準的襯線字型相比，它的邊緣更柔和、更圓潤。Microsoft和Apple OS的現代版本包括他們自己的Garamond字型版本。

推薦的字型堆疊

字型系列：Garamond、Baskerville、Baskerville Old Face、Hoefler Text、Times New Roman、serif。

16. Georgia

Georgia字型示例

作為Garamond的近親，Georgia是另一種襯線字型，其邊緣大多為圓形，感覺相當溫暖。它於1996年為Microsoft開發，至今仍是最廣泛使用的MS字型之一。幾乎所有Windows和macOS版本都支援它。

推薦的字型堆疊

字型系列：Georgia、Times、Times New Roman、serif。

17. Gill Sans

Gill Sans字型示例

Gill Sans是一種無襯線字型，線條銳利、簡潔，賦予其現代外觀。它不是開箱即用的段落文字的理想選擇，因為它缺乏字母之間的對比度和緊密的間距。但是正如您在示例文字中看到的那樣，它是一個漂亮的標題。大多數iOS、macOS和Windows裝置都支援它。

推薦的字型堆疊

字型家族：Gill Sans、Gill Sans MT、Calibri、sans-serif。

18.Goudy Old Style

Goudy Old Style字型示例

Goudy Old Style是一種柔和的老式襯線字型，具有強烈的襯線和老式的外觀和感覺。句點是菱形的，而不是大多數襯線字型的常規完美圓形。它包含在大多數較新版本的Windows中。

推薦的字型堆疊

字型系列：Goudy Old Style、Garamond、Big Caslon、Times New Roman、serif。

19. Helvetica

Helvetica字型示例（來源：Kanopy）

Helvetica可能是有史以來最著名的字型，並且絕對是唯一擁有自己的專用紀錄片的字型之一。這是一種現代無襯線字型，其靈感來自19世紀末和20世紀初的其他現代瑞士和德國字型。

它不是柔軟、圓潤和溫暖的設計，而是平衡並專注於簡潔的線條和形狀。這使其成為適用於正文和標題的少數字體之一。所有Apple裝置都包含Helvetica字型，而Microsoft預設使用與MS等效的Arial。

推薦的字型堆疊

字型家族：Helvetica Neue、Helvetica、Arial、sans-serif。

20. Impact

Impact字型示例

Impact是一種現實主義的sans-serif字型，所有文字、大寫字母和小寫字母都預設採用非常粗的粗體外觀。大膽使它從常規文字中脫穎而出，使其成為標題或CTA（號召性用語）的完美選擇，但它並不適合正文。

它是1998年web包的原始核心字型的一部分。時至今日，Apple和Windows計算機和手機仍然廣泛包含和支援它。

推薦的字型堆疊

字型系列：Impact、Charcoal、Helvetica Inserat、Bitstream Vera Sans Bold、Arial Black、sans serif。

21. Lucida Bright

Lucida Bright字型示例

Lucida Bright是Microsoft Lucida字型系列中的襯線字型，於1991年為MS開發。使其脫穎而出的原因之一是使用了更方形、更堅固的襯線，例如大寫的“T”和“L” . 它預設包含在大多數較新版本的Windows中，而macOS通常只包含無襯線字型Lucida Grande，使Georgia成為合乎邏輯的後備字型。

推薦的字型堆疊

字型系列：Lucida Bright, Georgia, serif。

22. Lucida Sans

Lucida Sans字型示例

Lucida Sans是一種簡潔的人文主義無襯線字型，專為補充Lucida系列中的襯線字型而設計。與更乾淨的無字型（如Helvetica或Arial）相比，筆畫粗細的變化更大。這讓它感覺不那麼未來主義或機器人，而是更有趣。開箱即用，它是標題和CTA的絕佳字型。

推薦的字型堆疊

字型家族：Lucida Sans、Helvetica、Arial、sans-serif。

23. Microsoft Sans Serif

Microsoft Sans Serif字型示例

Microsoft Sans Serif是Windows 2000中首次引入的一種無襯線字型。它是MS Sans Serif字型的繼承者，也稱為Helv（Helvetica的縮寫）。它的靈感來自並基 Helvetica，現代領先的無襯線字型。

這是一種乾淨的字型，筆畫粗細均勻，帶來乾淨、專業的外觀。非常適合頭條新聞和企業網站。它作為Web的原始字型之一包含在內，並且仍然是所有Microsoft裝置的標準字型。

推薦的字型堆疊

字型系列：MS Sans Serif，sans-serif。

24. Optima

Optima字型示例

Optima是一種人文主義的無襯線字型，具有不同的筆畫粗細和不同的對稱性。這使它看起來幾乎是手工完成的，這與sans serif字型典型的批量生產感覺不同。它是標準的Apple sans serif字型之一，大多數iOS和macOS裝置都支援它。微軟的等價物是Segoe。

推薦的字型堆疊

字型系列：Optima、Segoe、Segoe UI、Candara、Calibri、Arial、sans-serif。

25. Palatino

Palatino字型示例

Palatino是另一種老式襯線字型，在任何線上報紙或雜誌上都會有賓至如歸的感覺。但它不如Georgia或Times New Roman那樣統一，具有不同的筆畫粗細和形狀。

這種設計方法有助於柔化像k、l、x、y和z這樣尖銳的字母。它也比其他襯線字型稍微粗一些。這兩個因素使它感覺有點溫暖。Palatino包含在大多數Windows和Apple裝置中。

推薦的字型堆疊

字型系列：Palatino、Palatino Linotype、Palatino LT STD、Book Antiqua、Georgia、serif。

26. Perpetua

Perpetua字型示例

Perpetua是一種設計獨特的襯線字型，最初由英國雕塑家Eric Gill創作。筆畫粗細形成鮮明對比，例如看小寫的“e”或數字“3”。這使字型具有創造性，幾乎是俏皮的品質。它通常是Windows字型，但Baskerville是大多數Apple裝置的標準字型。

推薦的字型堆疊

字型系列：Perpetua、Baskerville、Big Caslon、Palatino Linotype、Palatino、serif。

27. Rockwell

Rockwell字型示例

Rockwell 是一種方形或平板襯線字型，帶有非常粗體、幾乎單字重的字型。它適用於標題或 CTA，但新增的字型粗細不適用於正文。它包含在大多數較新版本的 MS Windows 中。

推薦的字型堆疊

字型系列：Rockwell、Courier Bold、Courier、Georgia、Times、Times New Roman、serif。

28. Segoe UI

Segoe UI字型示例

Segoe UI是Segoe字型系列中領先的無襯線字型。Microsoft不僅在許多應用程式中使用它，而且還在其產品的各種營銷材料中使用它。

這是一種現代字型，具有對稱的字母，筆畫粗細變化很小。該字型不包含在Apple計算機中，但等效的Helvetica Neue在外觀和感覺上相似。

推薦的字型堆疊

字型系列：Segoe UI、Frutiger、Dejavu Sans、Helvetica Neue、Arial、sans-serif。

29. Tahoma

Tahoma字型示例

Tahoma是另一種微軟開發的無襯線字型。它的字母比Segoe UI稍粗，並使用方點作為小寫字母、句點和其他標記。

它是一種乾淨、統一的字型，在內容或標題中不會感覺不合適。它包含在所有Microsoft裝置和幾乎所有Apple裝置中。

推薦的字型堆疊

字型家族：Tahoma、Verdana、Segoe、sans-serif。

30. Trebuchet MS

Trebuchet MS字型示例

Trebuchet MS是微軟開發的另一種無襯線字型。它是Microsoft的Web包核心字型中包含的原始字型之一。幾乎所有Microsoft和Apple裝置仍然支援它。這些字母比許多其他無襯線字型更細，使其成為段落和正文的選擇。

推薦的字型堆疊

字型系列：Trebuchet MS、Lucida Grande、Lucida Sans Unicode、Lucida Sans、sans-serif。

31. Verdana

Verdana字型示例

Verdana是一種乾淨的無襯線字型，是自1996年以來一直存在的另一種Microsoft主打字型。無襯線字型的筆畫粗細相當低，從而使字母變得纖細、易於閱讀。您可以毫無問題地將它用於段落文字和標題。幾乎所有Apple和Windows裝置都支援它。

推薦的字型堆疊

字型家族：Verdana、Geneva、sans-serif。

Web安全草書字型

如果您想使用Web安全的草書字型，您沒有太多選擇可供選擇。具體來說：

• Segoe script
• Rage
• Script MT
• Snell Roundhand
• Lucida Handwriting

沒有任何在Apple和Microsoft裝置上普遍支援的草書字型。您應該考慮到為正文使用草書字型可能不是一個好主意，因為可讀性是網站可用性的重要組成部分。

您應該始終為您的段落使用高度可讀的文字，否則視力受損的訪問者將很難閱讀您網站上的文字。這會導致高跳出率和您的內容普遍缺乏參與度。

Web安全無襯線字型

Sans在法語中的意思是“沒有”，所以sans serif本質上的意思是“沒有襯線”。襯線是新增到字母中較長筆畫的線條或筆畫。例如，在報紙或雜誌標題中常見的大寫字母“T”中頂部筆劃下方的小垂直線。無襯線字型是網路上最常見和最受歡迎的字型，因此您有很多選擇：

• Arial
• Calibri
• Candara
• Century Gothic
• Consolas
• Dejavu Sans
• Franklin Gothic
• Gill Sans
• Helvetica
• Lucida Sans
• MS Sans Serif
• Neue Helvetica
• Optima
• Segoe UI
• Tahoma
• Trebuchet MS
• Verdana

在哪裡下載Web安全字型？

網路安全字型的好處在於您不必擔心下載它們。每個訪問者的作業系統都已經支援它們，因此您只需要使用CSS對其進行編碼。如果您對HTML和CSS或Web編碼一無所知，這可能看起來有點不知所措。

但是請相信我們，這並不像您想象的那麼難。我們將在下一節中逐步引導您完成整個過程。

如何將Web安全字型新增到WordPress網站

如果您的WordPress站點使用的是二〇二〇主題，您可以通過在WordPress定製器中新增自定義CSS來編輯HTML字型。

通過單擊選單中的外觀 > 自定義連結來訪問它，然後展開附加的CSS選項卡。

WordPress定製器——額外的CSS

然後您需要使用Chrome Dev Tools（或其他瀏覽器的類似工具）來識別您要更改的文字的選擇器。

例如，您可以檢查部落格文章的標題：

Chrome開發工具——檢查

我們可以看到主題使用標準的“entry-title”選擇器作為標題。您還可以搜尋“font-family”屬性以檢視主題如何設定文字樣式以及處於什麼級別。

由於二〇二〇不使用特定的標題字型，您可以通過定位“font-family”選擇器輕鬆修改標題的字型。

比如我們想把標題改成Impact字型，可以使用如下程式碼：

h1.entry-title { font-family: Impact, Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; }

只需將其新增到其他CSS並單擊“釋出”即可實時推送您的更改。

WP定製器 – 新的標題字型

我們在有關如何更改WordPress字型的教程中介紹了這一點以及更多內容。如果您使用HTML和CSS構建網站，則可以直接在原始碼中編輯字型。

例如，如果您使用HTML文件中的style標記將CSS程式碼應用於每個頁面，您可以在那裡編輯font-family屬性。

正文CSS選擇器字型系列

如果你想改變頁面上所有文字的字型，你應該定位“body”選擇器。如果要更改特定文字的字型，則需要使用特定選擇器。

如果您使用模板來構建網站，則您的CSS很可能位於單獨的樣式表中。這很棒，因為這意味著您可以通過編輯一個檔案來更改整個站點的字型。

在這種情況下，您需要找到您的樣式表檔案（通常命名為style.css或它的一些變體）。然後，您需要找到控制站點字型和字型的部分。

CSS樣式表示例

通常，這是在頂部完成的。如果沒有，您可以使用您選擇的程式碼編輯器搜尋“font-family”。

小結

就像主題和外掛一樣，在字型創意方面不乏選擇。

有各種襯線字型、無襯線字型、等寬字型甚至草書字型可供免費使用，網路安全字型是建立網站的理想起點。

完美的字型使您的品牌脫穎而出，提高可讀性，並支援您的資訊。做出明智的選擇！