2022年使用的最佳HTML和CSS友好安全网络字体

多年以来，许多网站都使用相同的字体向访问者显示消息和符号。 但是，在过去五年中，字体变得更加动态。 您可能还想在网站上使用很多字体，但发现无法在任何浏览器上正确显示它们。

Web安全字体是Web设计中的新标准。 这些字体可在所有浏览器和设备上使用。 以前，如果用户的计算机没有存储字体，他们可能会看到完全不同的字体，例如Times New Roman或Verdana。 为了避免这种情况，Web开发人员想出了一种显示正确字体的方法，无论用户计算机中安装了哪种字体。

只有少数几种Web安全字体/ css字体被认为是通用的。 但是，设计人员可以使用当前的Web CSS字体，这些字体在现代浏览器和电子邮件应用程序中几乎通用。

这些网络安全的CSS字体包括：

Arial
快递新
佐治亚州
英语字体格式一种
Verdana

但是，某些Web字体也设计用于所有类型的应用程序和网站。

一些流行的新CSS字体包括：

开放无山
机械手
拉托
海尔维蒂察
蒙特塞拉特

这些字体也用于电子邮件中。 您过去可能会担心在电子邮件中使用特定字体，因为它无**确显示。 网络安全设计改变了所有这一切。

当今的大多数Web设计都归结为Web设计资产，最重要的是，您选择的字体。 尽管您可以使用Google Web字体和Typekit来创建带有Web字体的网页，但仍然需要在设计时考虑到Web安全字体。 这是因为，即使由Google存储，也不是每个用户都可以访问这些字体。 这意味着，如果要在较旧的浏览器上显示给用户，则仍需要选择默认字体或网络安全字体。

您应该使用网络安全字体吗？

简而言之，您今天在网上看到的每个网站都可能已经使用了Web安全的CSS字体。 这是为了防止Times New Roman在某人的计算机较旧或连接不良且无法从Typekit加载Web字体的情况下在其Internet Explorer浏览器中显示。 使用不同的操作系统也会带来一些问题。 访客不一定知道您选择了什么字体，因为大多数人没有看源代码就无法理解在Times New Roman中突然出现的所有原因。

设计师和网站所有者需要指定要显示的字体类型。 如果要显示像Lato这样的sans serif字体，那么还应该安装一个Web安全字体，例如Arial，以确保在用户无法加载您的Web字体时该网站看起来与设计有点相似。

电子邮件和网络字体

Web字体在当今的现代浏览器中非常普遍。 您应该找不到太多无法加载它们的用户。 但是，对于电子邮件客户端来说，这有点不同。 有一些支持Web字体的电子邮件客户端，包括：

苹果邮件
iOS邮件
Android Mail
展望2000
Outlook.com应用

您可以使用不同的方法来设计具有Web字体的电子邮件。 例如，@ Import方法可让您通过一段代码将Google和Typekit字体导入到电子邮件中。

您还可以使用<link>方法在电子邮件代码中安装Web字体服务。 此方法有所不同，并且在所有电子邮件客户端中的性能要比导入方法好一些。

您也可以尝试使用font-family方法，这是最不成功的方法。

在每种情况下，您仍然要确保已选择默认字体，以防万一用户无法查看您的Web字体。

如何使用网络字体

您可以导航到Google或Typekit以获取用于网络字体的代码。 您可以搜索可用字体的库，包括衬线，无衬线，手写等。 每种字体都有自己独特的代码，可在您的网页设计中使用。

以下是一些可供在线选择的字体套件：

Google字体
这是当今最受欢迎的选项之一。 您可以通过Google加载数百种不同的字体。 它是完全免费的，您可以将网络字体直接下载到计算机上，以帮助您在自己喜欢的设计程序中模拟设计。 他们与Adobe和Sketch合作。

Adobe开发的Typekit
如果设计师已经使用Adobe，则这是许多设计师使用的另一种选择。 作为设计的一部分，您可以使用Adobe的字体订阅服务在Adobe中使用CSS构建字体。 对于紧密合作的Web设计和开发团队来说，这是一个不错的选择。

其他网络字体
如果您正在寻找更多选择，则可能还需要尝试其中一些服务。 这些大多数具有较高的成本。

我的字体
字体春天
字体商店
流程类型铸造
商业类型

您可以通过上述选择直接从作者那里购买字体和许可证。

记得测试字体

在上线网站或发送电子邮件之前，应始终在多个浏览器和电子邮件客户端上测试字体。 您应该知道您的网络字体是否将正确显示，或者您使用的是正确的网络安全字体，以防止用户看到完全不同的字体样式，从而影响您的设计。

正确使用网络安全字体

虽然您可以很快安装Google字体，但是您可能不知道何时使用网络安全字体。 重要的是，无论您有使用网络字体的字体家族，也要指定默认字体或网络安全字体。 这可能只是意味着您输入了“字体家族：蒙特塞拉特，阿里亚尔，无衬线”; 在代码中。 虽然计算机将首先尝试加载Web字体Montserrat，但它将默认使用Arial作为Web安全字体。

最佳安全网络字体的一长串

'sans-serif'：不带衬线的常规字体

Arial（无衬线）

Arial是世界上最流行且使用最广泛的san serif字体之一。 它在本质上与Helvetica相同，并且经常被误认为Helvetica。 最初创建时看起来像Helvetica，因此打印机无需支付使用Helvetica的许可。 因此，真正的Arial不过是字体世界的冒名顶替者。

Arial Black（无衬线）

这是基本Arial字体的粗体版本，至少可以说是粗体。 标头而不是正文的理想选择。

Helvetica（无衬线）

Helvetica是每个人最喜欢的后备字体。 如果其他所有方法都失败了，那么至少您需要Helvetica来使事情变得更好。

Verdana（无衬线）

在印刷和网络上非常流行的另一种纯字体。 由于其结构简单，流线型和大而清晰的字母，因此它是真正的网络字体。 虽然接近Arial和Helvetica，但Verdana是较旧的无衬线字体，显示时可能会有点大。 它的字体有拉长的线条，因此在某些网页设计中使用此字体时要小心。

Trebuchet MS（无衬线）

此sans-serif字体是由Vincent Connare于1996年为Microsoft公司设计的。此字体最常用于整个Internet的正文中，是一种非常流行的字体。

Gill Sans（sans-serif）

Gill Sans是一种无衬线字体，带有现代感。 作为人本主义家族的一部分，此字体具有手写的质量，可水平引导眼睛。 这使Gill Sans非常适合阅读长篇文章。

诺托（Sans-Serif）

Noto Sans是Noto字体家族的一部分。 Noto家族旨在在互联网上的不同语言和符号之间创造视觉连续性。 这使得Noto Sans是多语种文章的理想选择，并且是任何网站的安全选择。

最佳（无衬线）

像吉尔·桑斯（Gill Sans）一样，Optima是具有有机手写体质量的人文主义字体。 字体让人联想到古罗马文字，并在任何网页上都增添了富丽堂皇的气息。 它是同类中最受欢迎的字体之一，广泛用于徽标和名称。

Arial Narrow（无衬线）

Arial Narrow因其多功能性而成为最受欢迎的字体之一。 其有意的通用设计使字体成为大型文本的不错选择。 由于Arial字体家族可在Mac和Windows上使用，因此您不必担心跨操作系统的视觉差异。

'serif'：带有衬线的普通字体

时间（衬线）

Times字体是传统的报纸印刷字体。 世界上最知名的字体之一。

时代新罗马（衬线）

Time New Roman是最流行的衬线字体，也是Arial在san-serif字体家族中的含义。 Times New Roman主要在Windows设备和应用程序上使用，是Times字体的更新版本。

Didot（衬线）

Didot是一种古老的法国字体，最初用于印刷机。 这是一种衬线字体，这意味着每个字母都用细线表示样式。 迪多（Didot）以其优雅的美学而闻名，因此，它为文本增加了正式的质量。

格鲁吉亚（衬线）

像Didot一样，乔治亚州是一种衬线字体，带有优雅的气息。 粗笔触使其成为网页文本的理想选择，因为它在低分辨率屏幕上清晰可见。 因此，它通常在电子阅读器上使用。

Palatino（衬线）

Palatino是一种衬线字体，也是人文字体家族的一部分。 由于其坚实的结构，它广泛用于标题和标题。 Palatino的广泛可用性使其成为网站文本的安全字体。

布克曼（衬线）

布克曼是衬线字体。 也被称为Bookman Old Style，这种经典字体具有大胆而过时的结构。 其简单，过时的设计使Bookman成为大段小文本的绝佳选择。

新世纪教科书（衬线）

顾名思义，New Century Schoolbook是专为正文创建的衬线字体。 字体非常怀旧，因为该字体出现在许多早期阅读者的教科书中。 像Bookman一样，New Century Schoolbook是大型文本的不错字体选择。

美国打字机（衬线）

美国打字机是一种衬线字体，模仿打字机文本。 其前身的多功能性使该字体成为正文的理想选择。 字体还具有经典和怀旧的质感，可为任何网页增添程式化的气息。

'monospace'：定宽字体

Andale Mono（等宽）

Andale Mono是等宽的无衬线字体。 这意味着每个字母都具有相同的宽度，从而使字体具有机械质量。 该字体的版本支持几种不同的语言，使其成为多语言网站的理想选择。

快递新（等宽）

您可能已经看到一些使用这种较旧样式的报纸式字体的网站。 虽然类似于Times New Roman，但它已经过时了。 但是，如果您正在寻找简单的等宽字体，这将是正确的选择。

快递（等距）

Courier是一种等距的衬线字体，让人联想到打字机文本。 它是许多电子邮件提供商的默认文本，并且由于其免版税来源而实际上是通用的。 该字体还广泛用于编码和计算机编程。

FreeMono（等宽）

FreeMono是鲜为人知的等宽字体，它是GNU FreeFont项目的一部分。 与上述等宽字体一样，此字体让人联想到打字机文本，并且具有机械质量。 顾名思义，它是完全免费的。

“草书”：模仿手写的字体

Comic Sans MS（草书）

Comic Sans是人们喜欢讨厌的字体。 它是“不要太当真”字体。 有点乐趣。 但是，如果您对设计很认真，请不要使用它哈哈！

苹果机（草书）

Apple Chancery是Apple Inc.创建的草书字体。它是一种优雅的字体，唤起了人们的正式印象。 这使其成为复杂网站的理想选择。

布拉德利手（草书）

Bradley Hand是一种基于Richard Bradley笔迹的书法字体。 字体具有随便的个人风格，与大多数草书字体不同。 对于简短的文本和标题，这是一个不错的选择。

笔迹脚本MT（草书）

Brush Script MT是另一种基于随意手写的书法字体。 字体比Bradley Hand更为正式，但仍保留个人风格。 其大胆而独特的风格使其成为通用的徽标字体。

'fantasy'：装饰字体，标题等。

影响力（幻想）

Impact作为标题字体效果最好，尤其是只有几个单词时。 确实不适合正文。 看起来糟透了。

Luminari（幻想）

Luminari是一种幻想风格的字体，让人联想到中世纪的手写体。 它唤起了童话故事和哥特式教堂文字的思想。 这使Luminari成为在网页上添加异想天开或哥特式质量的绝佳字体。

粉笔（幻想）

顾名思义，Chalkduster是一种模仿黑板上的粉笔的字体。 由于黑板几乎与小学课堂密不可分，因此该字体是任何教育网页的绝佳添加。 其粗体和细致的样式使其最适合短文本和标题。

爵士乐（幻想）

爵士乐（LET）是一种字体，让人联想到《了不起的盖茨比》。 这种字体是在网页中唤起咆哮的20年代的好方法。 与Chalkduster一样，它是一种粗体且详细的字体，最适合于短文本和标题。

Blippo（幻想）

Blippo是此列表中最粗体的字体之一。 每个字符都使用矩形和圆形的形状进行样式设置。 Blippo的强大特性使它成为古怪标题和标题的理想字体。

模具标准（幻想）

顾名思义，Stencil Std是基于模板刻字的字体。 效果是带有姿态的自然字体。 最好在粗体标题和标题中使用此字体。

标记毛毡（幻想）

Marker Felt是一种基于带有毡尖标记的笔迹的字体。 字母甚至在每个标记笔触的末尾都包括残留点。 Marker Felt是教育网站的绝佳选择，因为它类似于用干擦标记笔书写。

特拉塔洛（幻想）

Trattatello是此列表中的最后一个字体，是一种基于中国书法的字体样式。 它为任何段落带来优雅而神秘的品质。 这使Trattatello成为诗歌和短文的绝佳选择。