为您的下一个设计准备的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”。

小结

就像主题和插件一样，在字体创意方面不乏选择。

有各种衬线字体、无衬线字体、等宽字体甚至草书字体可供免费使用，网络安全字体是创建网站的理想起点。

完美的字体使您的品牌脱颖而出，提高可读性，并支持您的信息。做出明智的选择！