HTML字体或Web字体完整指南

如果有一件事对您网站的品牌和外观最重要，它可能只是字体。精心选择的字体可以传达个性，使长篇文字更清晰，并在人们的脑海中巩固您的品牌。

但是您不能只是下载任何旧字体并在您的网站上使用它。首先需要考虑很多事情。

您在哪里可以找到网络字体，哪些字体与HTML兼容，哪些字体是“Web安全的”并且可以在任何网站上使用？我们将在本文中探讨它们。

1. HTML字体：什么是Web字体？
2. 如何使用HTML添加字体
3. 从哪里获得HTML字体？
4. 值得推荐的10种HTML字体

HTML字体：什么是Web字体？

字体有着悠久的历史，但正如我们今天所知，字体随着计算机和互联网的兴起而得到广泛使用。数字字体需要特殊处理才能在屏幕上呈现。当不同的屏幕尺寸和设备发挥作用时，事情只会变得更加复杂。

Google Fonts是一组流行的网络字体

谈到数字字体，有几种不同的类型。某些字体主要用于印刷和图形设计。这些往往很大，不适合网站，但非常适合创建图形。大多数机器上也有“Web安全”字体。

但是对于网页设计，您需要寻找的是网页字体，专门设计用于在网页和各种设备上完美呈现的字体。您还可以在电子邮件或其他在线服务中使用网络字体。

有一些事情使网络字体与标准的可下载桌面字体不同。一方面，它们通常不能与您计算机上的程序一起使用；它们必须上传到服务器并在网络上使用。

它们还被设计为在不同的屏幕和不同的尺寸上都清晰易读。它们可以使用CSS设置样式（例如应用粗体或斜体、颜色和其他属性）并支持其他条件，例如从右到左呈现。

虽然 Web 字体不会安装在您或您的访问者的设备上，但有一些特殊的方式来显示它们，以便访问您网站的任何人都可以看到它们。

您可以像平常一样下载这些字体并将它们上传到您的服务器，或者使用特殊的网络字体托管服务将它们嵌入您的网站而无需下载。

你可以在HTML中使用哪些字体？

有些字体不打算在网络上使用，但哪些可以插入到您的HTML站点中？

本质上，您可以在您的网站上使用任何可下载的字体。您需要做的就是上传并正确配置它，它应该会显示在您的网站上。

Scribble字体不适用于网页

但是，虽然您可以在技术上使用网站上的任何字体，但这并不总是最好的主意。您应该专门寻找 Web 字体，而不是旨在用于印刷或图形设计的字体。某些字体是如此风格化或用于如此大的文本大小，以至于它们无法在您的网站上正确呈现。使用网络字体，这不是问题。

在您的网站上使用桌面字体（或使用网络字体进行印刷设计）时，还需要担心许可问题。在与您购买字体不同的媒体中使用字体会给您带来麻烦。在购买之前，请务必仔细阅读字体的许可证。

您还可以寻找某些允许您使用HTML中的简单调用通过免费或付费计划在您自己的网站上呈现其字体的主机。

无论哪种方式，只要您使用的字体正确上传并具有正确的文件类型：

• TTF
• OTF
• WOFF/WOFF2
• SVG
• EOT

有了这些字体文件类型，您就可以在整个站点中使用它们，并使用HTML和CSS对其进行样式设置。

还有一些网络安全字体通常可以在所有浏览器和程序中通用。

什么是Web安全字体？

大多数网络字体的一个问题是无法保证它们会在您的网站上正确显示。与平面设计不同，您只需在程序中创建图像并打印出来进行分发，浏览器必须在每次打开页面时呈现Web字体。如果您的字体无法加载，您最终可能会得到一个空白、损坏的​​网站。

出于这个原因，一些网站所有者选择仅依赖网络安全字体。它们预装在大多数系统上，因此可以保证在除最晦涩的设备之外的所有设备上都能正确显示。它们的加载速度也往往比Web字体快得多，后者显示起来可能很慢。

Arial是一种常见的Web安全字体

如果您所担心的只是最大限度地提高性能并确保您的网站正确显示字体，那么网络安全字体适合您。

这是一个通常可以使用的Web安全字体列表。

• Arial
• Brush Script MT
• Comic Sans
• Courier New
• Garamond
• Georgia
• Helvetica
• Impact
• Lucida Console
• Palatino
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

还有数十种Web安全字体，但这些是各种设备中最普遍的字体。

在所有这些中，Arial、Times New Roman、Helvetica和Courier New是最安全的。尽管被认为是网络安全的，但其他一些不能在某些操作系统上运行。

问题是，除非您运行的是政府网站或简单的信息网站之类的网站，否则通过避免使用大多数字体来牺牲您的品牌是不值得的。网络安全字体清晰易读，但它们也过于通用和过度使用。

最好选择一组更好、更独特的字体在您的网站上使用，特别是因为有一个解决 Web 字体无法加载的问题的方法：后备字体。

关于字体堆栈的注释

字体堆栈，也称为后备字体，是使用粗体和创意网络字体的唯一原因。

无论您做什么或采取什么预防措施，总会有人无法加载您的字体。也许他们禁用了Javascript，因此您的托管字体无法正确呈现，或者代码中出现问题并阻止您上传的字体显示。或者某种字体可能与某人的设备不兼容。

多亏了后备字体，如果出现问题，很容易加载网络安全字体。这是通过选择用户根据字体系列安装的字体来工作的：

• 衬线字体由附加到字母线末端的小笔划定义。这些字体被认为是优雅和易读的。
• 无衬线字体的设计与衬线字体类似，但缺少笔画。它们更简单，更易读。
• 等宽字体在每个字母之间均匀分布，使它们具有独特的外观。
• 草书字体（或脚本字体）描绘了正式的手写字母。它们不太清晰，更适合标题或图形设计。
• 梦幻字体（或装饰字体）高度程式化，像草书字体，不适合作为正文。

请记住，字体堆栈确实是一个“堆栈”；完全有可能按顺序拥有多个后备字体。只要确保在堆栈的末尾始终有一个网络安全字体，如果主要字体失败，您仍然有机会使用类似的字体来宣传您的品牌。

如何使用HTML添加字体

如果您想向您的网站添加Web字体，您有几个选择。

对于WordPress用户，将字体添加到您的网站的最简单方法是使用插件。两个最受欢迎的字体是Easy Google Fonts和Use Any Font。前者简化了将Google字体添加到您的网站的过程，而UAF允许您直接将字体上传到您的网站。

如果您不使用WordPress，或者不想依赖插件，则该过程将需要一些手动修改。

首先，您可以使用托管在其他地方的字体，例如Google Fonts。此处的说明取决于您选择的服务。使用谷歌字体，你需要在你的中嵌入你想要使用的字体，然后在你想要使用它的时候调用它。

您还可以在您的网站上本地托管您Internet下载的字体。这可能更可取，因为您不需要依赖第三方服务。

幸运的是，只要你有一个正确配置的网络字体，这很容易做到。只需将文件上传到您的服务器，然后使用样式表中的@font-face规则来定义它。例如：

@font-face {
font-family: FontName;
src: url(FontLocationOnServer);
}

然后，您可以使用font-family标记在HTML文档中的任何位置调用您的字体。

使用HTML和CSS设计字体

一旦您的字体安全地上传到您的网站，您现在就可以使用HTML和CSS对其进行样式设置。即使您的编程技能很少，设计字体也很容易。您可以更改文本颜色、背景颜色、大小、样式或粗细。

注意：如果您使用过旧的HTML版本，您可能会记住标签。这不再受支持，不应使用。相反，您可以使用CSS或HTML样式元素来设置文本样式。

首先，您可以使用颜色代码更改字体。您可以使用“红色”等颜色名称、RGB代码或HEX值。这是使用color属性设置的，如下所示：

p {
color: blue;
}

或者在单个HTML样式元素中：

Text.

背景颜色相同，但使用背景颜色属性。

p {
background-color: blue;
}

接下来是字体大小。这可以是像素、百分比或em（这有利于设计响应式网站）。

 p {
font-size: 16px;
}

或者：

使用CSS设置字体大小

最后是字体样式和粗细，或斜体和粗体。对于倾斜的文本，请使用“italic”标签。

.italic {
font-style: italic;
}
And for bold: 
.bold {
font-weight: bold;
}

使用CSS设置字体样式。

您也可以改用HTML标签。对于斜体，您可以使用：

对于表达重点的文本，或使用：

对于旨在在视觉上不同的文本。

对于粗体，请使用：

 或者 

例如：

Bold Text

或者

I'm of special importance.

从哪里获得HTML字体？

无论您是要使用第三方字体主机还是下载它们，您都需要知道查找字体的最佳位置在哪里。那里有数百个分销商，但众所周知，少数分销商是获取字体的可靠来源。这里有一些：

• Google Fonts是获取字体的最佳场所之一。为什么？您可以轻松地将它们嵌入您的网站而无需下载任何内容，其选择范围广泛且美观，最重要的是，它是完全免费的。Google服务器总是很快，因此您可以相信它们会以尽可能少的延迟交付字体。

谷歌字体

• Adobe Fonts通过任何Creative Cloud订阅提供数千种字体。对于其他服务（至少不依赖于像Google Fonts这样的开源字体），您通常需要担心许可问题。这些字体可用于任何个人或商业项目。
• Fonts.com有多种可供桌面和网络使用的字体。他们为您提供在您的网站上获取所需的代码。问题是有几个不同的许可证，这可能有点令人困惑。付款基于一次性费用或现收现付模式。
• TypeNetwork为具有各种许可选项的严肃项目提供高质量字体。为桌面、Web、应用程序或ePub购买字体。Web字体还带有一个额外的选项：托管或自托管。
• 在Google Fonts出现之前，Font Squirrel是一个可以在任何项目中找到免费的、商业许可的字体的地方。它有很多选择，但遗憾的是没有字体托管选项。您需要下载字体并将它们手动上传到您的网站。并非所有字体都针对网络进行了优化，但您可以尝试使用Webfont Generator。

Top 10值得推荐的HTML字体

有数以千计的网络字体，但从哪里开始呢？这里有十种简单的HTML字体，它们在任何网站上看起来都很棒。这些都是网络安全的，因此它们应该适用于几乎所有设备。他们还制作了很棒的后备字体。

1. Arial

Arial字体的示例。

Arial是所有字体中最著名的。它不是最漂亮的，但它在各种情况下都很简单和有用。

2. Times New Roman

Times New Roman也是一种非常常见的字体。如果您正在运行更正式的网站，则最好。这种衬线字体并不是特别令人兴奋，但也不会让人分心。

3. Palatino

Palantino字体的一个例子。

Palatino可能看起来很熟悉，因为它经常用于书籍印刷。现在它是一种优雅的数字字体，默认包含在许多设备上。

4. Verdana

Verdana以非常易于阅读而著称，并且即使在大尺寸下仍然看起来很棒。这个 sans serif 是一个很好的 Arial 替代品。

5.Courier New

Courier New字体的示例。

让人想起旧的打字机文本，Courier New是一个伟大的等宽设计，适用于想要老式但清晰的外观的网站。

6. Calibri

Calibri字体的示例。

Calibri是一种简单、可爱的无衬线字体，是Microsoft Office等程序的标准配置。但是，它是一种专有字体，因此通常仅在Windows操作系统上受支持。

7. Georgia

Georgia字体的示例。

这种圆形衬线字体的灵感来自类似的网络安全字体Garamond。如果您需要一种不像Times New Roman那样严肃的正式字体，这是一个不错的选择。

8. Garamond

Garamond字体的示例。

与Palatino非常相似，Garamond是一种经常用于书籍印刷的经典字体。尽管针对现代操作系统进行了更新，但它看起来仍然相当老式。

9. Didot

Didot字体的示例。

这种衬线字体的最小字母间距赋予它独特的外观和感觉。您可以在大多数Apple设备上找到它。

10.Tahoma

Tahoma字体的示例。

这种干净的字体已成为旧版Windows操作系统的默认字体。其更大胆的外观使其脱颖而出而不会分散注意力。

小结

重要的是选择在您的网站上看起来不错、可读性强且能将您的品牌个性化的网络字体。您可以在各种网站上安装免费字体或付费下载获得许可的字体，我们提供了一些好的字体示例。

您不必坚持使用几十年来在互联网上看到的无聊的网络安全字体。多亏了后备字体，您可以使用任何您喜欢的排版，并设置一个后备字体，以便在未加载时使用。

无论您是在您的网站、电子邮件还是徽标中使用这些HTML字体，请确保您进行大量测试，以便您的网站保持可读性，并且排版与您的其他设计完美融合。

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