当前位置:首页>WordPress资讯>为您的下一个设计准备的30多种最佳Web安全字体

为您的下一个设计准备的30多种最佳Web安全字体

为您的下一个设计准备的30多种最佳Web安全字体

您不需要数以千计的字体来创建一个漂亮的网站。但是您确实需要确保访问您网站的每个人都可以看到您使用的字体。这就是网络的用武之地。

如果您能找到 a) 100% 免费使用且 b) 不需要托管在其他任何地方让您的访问者看到它们的网络安全字体,这对您来说将是一个本垒打。

这正是这篇文章的目的:我们将介绍31种外观最好的Web安全字体,并向您展示如何将它们实施到您的WordPress网站中。

使用下面的链接导航到您最感兴趣的部分,或直接跳转到我们的网络安全字体列表:

  1. 什么字体对Web来说是安全的?
  2. 2022年是否需要Web安全字体?
  3. 字体对Web来说安全吗?
  4. 31+种最佳Web安全字体
  5. 在哪里下载Web安全字体?
  6. 如何将Web安全字体添加到WordPress网站

什么字体对Web来说是安全的?

包括变体在内,在线提供超过650,000种不同的字体。大多数网络浏览器和操作系统支持的字体被认为是网络安全的。操作系统会自动包含字体文件,因此访问者不必从您的服务器下载字体。

一个例子是无处不在的Arial字体,它催生了数以千计的“衍生产品”。

2022年是否需要Web安全字体?

为您的下一个设计准备的30多种最佳Web安全字体

2019-2020年份额(图片来源:StatCounter)

当然,绝大多数用户现在都在移动设备和桌面设备上使用Google Chrome。但这并不意味着网络安全字体已成为过去。

事实上,支持的字体因操作系统而异,包括用户的当前版本。因此,如果您使用仅受最新版Windows 11支持的字体设计网站,大多数用户会看到其他内容。

此外,如果您选择使用和托管自定义,或由第三方托管的字体,则可能会降低您的网站速度。因此,切换到网络安全字体可以加快您的网站速度。这是一件很棒的事情。因为近70%的消费者表示页面速度会影响他们的购买决定。

Google字体对Web来说安全吗?

您的操作系统本身并不支持Google字体,因此根据定义,它们不是网络安全字体。相反,由于第三方谷歌托管它们,谷歌字体被称为网络字体。令人困惑,我们知道,但不同之处在于您的浏览器需要先加载文件才能显示Google字体。

Web安全字体已经在大多数设备上准备好了字体文件。但是,不要担心缺少安全这个词。使用Google字体来增强您网站的设计完全安全的。但是,对外部服务器的额外HTTP请求可能会降低您的页面加载速度。

31+种最佳Web安全字体

我们编制了一份包含30多种不同外观的Web安全字体的列表,您可以使用它们来设计您的网站。

让我们直接进入它。

1. Arial

为您的下一个设计准备的30多种最佳Web安全字体

Arial字体示例

Arial 是一种经典的无衬线字体,适用于段落和标题。长期以来,它一直是网页设计的主要内容。尽管近年来,它经常被用作字体堆栈的后备,而不是作为主要的字体系列。

字体家族:Arial、Helvetica Neue、Helvetica、sans-serif。

2. Baskerville

为您的下一个设计准备的30多种最佳Web安全字体

Baskerville字体示例

Baskerville是一种相对较粗的衬线字体,最初由John Baskerville于1750年开发为一种字体。该设计非常平衡,使用粗细笔触的混合来柔化典型衬线字体的硬边。它得到了较新的Apple和Microsoft操作系统版本的良好支持。

字体系列:Baskerville、Baskerville Old Face、Garamond、Times New Roman、serif。

3. Bodoni MT / Bodoni 72

为您的下一个设计准备的30多种最佳Web安全字体

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

为您的下一个设计准备的30多种最佳Web安全字体

Calibri字体示例

Calibri是Microsoft的标准sans serif字体,自Microsoft Office 2007一起发布以来一直存在。它具有柔软、现代的外观,圆润的边缘提升了典型的sans serif感觉,使其比机器人更温暖。

字体系列:Calibri、Candara、Segoe、Segoe UI、Optima、Arial、sans-serif。

5.Calisto MT字体示例

为您的下一个设计准备的30多种最佳Web安全字体

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

为您的下一个设计准备的30多种最佳Web安全字体

Cambria字体示例

Cambria是一种更柔和的衬线字体,在许多情况下,即使是大写字母也几乎看不到衬线字体。这给它一种更现代的感觉, 并在屏幕上保持了高水平的可读性。

字体家族:Cambria,Georgia,serif。

7. Candara

为您的下一个设计准备的30多种最佳Web安全字体

Candara字体示例

Candara是一种无衬线字体。它是Microsoft的ClearType字体集的一部分。macOS和iOS等价物 Optima Regular。不均匀的笔画粗细使它感觉不像其他无衬线字体那么现代和企业化。

字体系列:Candara、Calibri、Segoe、Segoe UI、Optima、Arial、sans-serif。

8. Century Gothic

为您的下一个设计准备的30多种最佳Web安全字体

Century Gothic字体示例

Century Gothic是一种几何无衬线字体,具有非常干净和平衡的外观。这是一种很棒的网络字体,尤其是标题和副标题。它最初是为了与字体Futura竞争而设计的。它包含在大多数Microsoft和Apple操作系统中。

字体家族:Century Gothic、CenturyGothic、AppleGothic、sans-serif。

9. Consolas

为您的下一个设计准备的30多种最佳Web安全字体

Consolas字体示例

Consolas是一种具有独特设计方法的无衬线字体。所有字符都具有相同的宽度,这就是它仅对字母“I”和小写“l”使用衬线的原因。它是ClearType集合的一部分。

字体系列:Consolas、monaco、monospace。

10.Copperplate Gothic

为您的下一个设计准备的30多种最佳Web安全字体

Copperplate Gothic字体示例

Copperplate Gothic是一种受哥特式启发的字体,在某些字母上带有轻微的字形衬线。由于它的灵感来自哥特式符文,因此没有可用的小写字体。

字体系列:Copperplate、Copperplate Gothic Light、fantasy。

11.Courier New

为您的下一个设计准备的30多种最佳Web安全字体

Courier New示例

Courier New是一种等宽厚衬线字体,与大多数其他衬线和无衬线字体相比,常规文本要细得多。和苹果在计算机和移动设备上几乎完美地覆盖了它。

字体系列:Courier New、Courier、Lucida Sans Typewriter、Lucida Typewriter、等宽字体。

12. Dejavu Sans

为您的下一个设计准备的30多种最佳Web安全字体

Dejavu Sans字体示例

Dejavu Sans是一种无衬线字体,线条干净、直线,几乎是对Arial和Verdana等经典sans字体的回归。

字体系列:Dejavu Sans、Arial、Verdana、sans-serif。

13. Didot

为您的下一个设计准备的30多种最佳Web安全字体

Didot字体示例

Didot是一种字体,其灵感来自于19世纪法国印刷企业Didot家族使用的原始Didot字体。它是Apple的中流砥柱,受到大多数操作系统和设备的支持。

字体系列:Didot、Didot LT STD、Hoefler Text、Garamond、Calisto MT、Times New Roman、衬线。

14.Franklin Gothic

为您的下一个设计准备的30多种最佳Web安全字体

Franklin Gothic字体示例

Franklin Gothic是一种无衬线字体,带有异常粗的字母,几乎就像另一种字体的粗体版本。最初的字体是由美国字体创始人在20世纪初开发的。这是标题的不错字体选择,但可能不是正文的最佳选择。

字体家族:Franklin Gothic、Arial Bold。

15. Garamond

为您的下一个设计准备的30多种最佳Web安全字体

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

为您的下一个设计准备的30多种最佳Web安全字体

Georgia字体示例

作为Garamond的近亲,Georgia是另一种衬线字体,其边缘大多为圆形,感觉相当温暖。它于1996年为Microsoft开发,至今仍是最广泛使用的MS字体之一。几乎所有Windows和macOS版本都支持它。

字体系列:Georgia、Times、Times New Roman、serif。

17. Gill Sans

为您的下一个设计准备的30多种最佳Web安全字体

Gill Sans字体示例

Gill Sans是一种无衬线字体,线条锐利、简洁,赋予其现代外观。它不是开箱即用的段落文本的理想选择,因为它缺乏字母之间的对比度和紧密的间距。但是正如您在示例文本中看到的那样,它是一个漂亮的标题。大多数iOS、macOS和Windows设备都支持它。

字体家族:Gill Sans、Gill Sans MT、Calibri、sans-serif。

18.Goudy Old Style

为您的下一个设计准备的30多种最佳Web安全字体

Goudy Old Style字体示例

Goudy Old Style是一种柔和的老式衬线字体,具有强烈的衬线和老式的外观和感觉。句点是菱形的,而不是大多数衬线字体的常规完美圆形。它包含在大多数较新版本的Windows中。

字体系列:Goudy Old Style、Garamond、Big Caslon、Times New Roman、serif。

19. Helvetica

为您的下一个设计准备的30多种最佳Web安全字体

Helvetica字体示例(来源:Kanopy)

Helvetica可能是有史以来最著名的字体,并且绝对是唯一拥有自己的专用纪录片的字体之一。这是一种现代无衬线字体,其灵感来自19世纪末和20世纪初的其他现代瑞士和德国字体。

它不是柔软、圆润和温暖的设计,而是平衡并专注于简洁的线条和形状。这使其成为适用于正文和标题的少数字体之一。所有Apple设备都包含Helvetica字体,而Microsoft默认使用与MS等效的Arial。

字体家族:Helvetica Neue、Helvetica、Arial、sans-serif。

20. Impact

为您的下一个设计准备的30多种最佳Web安全字体

Impact字体示例

Impact是一种现实主义的sans-serif字体,所有文本、大写字母和小写字母都默认采用非常粗的粗体外观。大胆使它从常规文本中脱颖而出,使其成为标题或CTA(号召性用语)的完美选择,但它并不适合正文。

它是1998年web包的原始核心字体的一部分。时至今日,Apple和Windows计算机和手机仍然广泛包含和支持它。

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

21. Lucida Bright

为您的下一个设计准备的30多种最佳Web安全字体

Lucida Bright字体示例

Lucida Bright是Microsoft Lucida字体系列中的衬线字体,于1991年为MS开发。使其脱颖而出的原因之一是使用了更方形、更坚固的衬线,例如大写的“T”和“L” . 它默认包含在大多数较新版本的Windows中,而macOS通常只包含无衬线字体Lucida Grande,使Georgia成为合乎逻辑的后备字体。

字体系列:Lucida Bright, Georgia, serif。

22. Lucida Sans

为您的下一个设计准备的30多种最佳Web安全字体

Lucida Sans字体示例

Lucida Sans是一种简洁的人文主义无衬线字体,专为补充Lucida系列中的衬线字体而设计。与更干净的无字体(如Helvetica或Arial)相比,笔画粗细的变化更大。这让它感觉不那么未来主义或机器人,而是更有趣。开箱即用,它是标题和CTA的绝佳字体。

字体家族:Lucida Sans、Helvetica、Arial、sans-serif。

23. Microsoft Sans Serif

为您的下一个设计准备的30多种最佳Web安全字体

Microsoft Sans Serif字体示例

Microsoft Sans Serif是Windows 2000中首次引入的一种无衬线字体。它是MS Sans Serif字体的继承者,也称为Helv(Helvetica的缩写)。它的灵感来自并基 Helvetica,现代领先的无衬线字体。

这是一种干净的字体,笔画粗细均匀,带来干净、专业的外观。非常适合头条新闻和企业网站。它作为Web的原始字体之一包含在内,并且仍然是所有Microsoft设备的标准字体。

字体系列:MS Sans Serif,sans-serif。

24. Optima

为您的下一个设计准备的30多种最佳Web安全字体

Optima字体示例

Optima是一种人文主义的无衬线字体,具有不同的笔画粗细和不同的对称性。这使它看起来几乎是手工完成的,这与sans serif字体典型的批量生产感觉不同。它是标准的Apple sans serif字体之一,大多数iOS和macOS设备都支持它。微软的等价物是Segoe。

字体系列:Optima、Segoe、Segoe UI、Candara、Calibri、Arial、sans-serif。

25. Palatino

为您的下一个设计准备的30多种最佳Web安全字体

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

为您的下一个设计准备的30多种最佳Web安全字体

Perpetua字体示例

Perpetua是一种设计独特的衬线字体,最初由英国雕塑家Eric Gill创作。笔画粗细形成鲜明对比,例如看小写的“e”或数字“3”。这使字体具有创造性,几乎是俏皮的品质。它通常是Windows字体,但Baskerville是大多数Apple设备的标准字体。

字体系列:Perpetua、Baskerville、Big Caslon、Palatino Linotype、Palatino、serif。

27. Rockwell

为您的下一个设计准备的30多种最佳Web安全字体

Rockwell字体示例

Rockwell 是一种方形或平板衬线字体,带有非常粗体、几乎单字重的字体。它适用于标题或 CTA,但添加的字体粗细不适用于正文。它包含在大多数较新版本的 MS Windows 中。

字体系列:Rockwell、Courier Bold、Courier、Georgia、Times、Times New Roman、serif。

28. Segoe UI

为您的下一个设计准备的30多种最佳Web安全字体

Segoe UI字体示例

Segoe UI是Segoe字体系列中领先的无衬线字体。Microsoft不仅在许多应用程序中使用它,而且还在其产品的各种营销材料中使用它。

这是一种现代字体,具有对称的字母,笔画粗细变化很小。该字体不包含在Apple计算机中,但等效的Helvetica Neue在外观和感觉上相似。

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

29. Tahoma

为您的下一个设计准备的30多种最佳Web安全字体

Tahoma字体示例

Tahoma是另一种微软开发的无衬线字体。它的字母比Segoe UI稍粗,并使用方点作为小写字母、句点和其他标记。

它是一种干净、统一的字体,在内容或标题中不会感觉不合适。它包含在所有Microsoft设备和几乎所有Apple设备中。

字体家族:Tahoma、Verdana、Segoe、sans-serif。

30. Trebuchet MS

为您的下一个设计准备的30多种最佳Web安全字体

Trebuchet MS字体示例

Trebuchet MS是微软开发的另一种无衬线字体。它是Microsoft的Web包核心字体中包含的原始字体之一。几乎所有Microsoft和Apple设备仍然支持它。这些字母比许多其他无衬线字体更细,使其成为段落和正文的选择。

字体系列:Trebuchet MS、Lucida Grande、Lucida Sans Unicode、Lucida Sans、sans-serif。

31. Verdana

为您的下一个设计准备的30多种最佳Web安全字体

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对其进行编码。如果您对和CSS或Web编码一无所知,这可能看起来有点不知所措。

但是请相信我们,这并不像您想象的那么难。我们将在下一节中逐步引导您完成整个过程。

如何将Web安全字体添加到WordPress网站

如果您的WordPress站点使用的是二〇二〇主题,您可以通过在WordPress定制器中添加自定义CSS来编辑HTML字体。

通过单击菜单中的外观 > 自定义链接来访问它,然后展开附加的CSS选项卡。

为您的下一个设计准备的30多种最佳Web安全字体

WordPress定制器——额外的CSS

然后您需要使用Chrome Dev Tools(或其他浏览器的类似工具)来识别您要更改的文本的选择器。

例如,您可以检查博客文章的标题:

为您的下一个设计准备的30多种最佳Web安全字体

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并单击“发布”即可实时推送您的更改。

为您的下一个设计准备的30多种最佳Web安全字体

WP定制器 – 新的标题字体

我们在有关如何更改WordPress字体的教程中介绍了这一点以及更多内容。如果您使用HTML和CSS构建网站,则可以直接在源代码中编辑字体。

例如,如果您使用HTML文档中的style标记将CSS代码应用于每个页面,您可以在那里编辑font-family属性。

为您的下一个设计准备的30多种最佳Web安全字体

正文CSS选择器字体系列

如果你想改变页面上所有文本的字体,你应该定位“body”选择器。如果要更改特定文本的字体,则需要使用特定选择器。

如果您使用模板来构建网站,则您的CSS很可能位于单独的样式表中。这很棒,因为这意味着您可以通过编辑一个文件来更改整个站点的字体。

在这种情况下,您需要找到您的样式表文件(通常命名为style.css或它的一些变体)。然后,您需要找到控制站点字体和字体的部分。

为您的下一个设计准备的30多种最佳Web安全字体

示例

通常,这是在顶部完成的。如果没有,您可以使用您选择的器搜索“font-family”。

小结

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

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

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

原文地址:https://www.wbolt.com/web-safe-fonts.html

WordPress资讯

13个英文写作辅助工具Grammarly替代品

2024-1-22 1:00:51

WordPress资讯

HTML字体或Web字体完整指南

2024-1-22 1:00:55

个人中心
今日签到
有新私信 私信列表
搜索