HTML Wed字体 - 站长百科

一、Web安全字体

在HTML中，Web安全字体是一组常见的字体，被Web内容创作者广泛使用，以增加他们的内容在实际中以所选字体来显示的可能性。这些字体通常是由操作系统预先安装的，因此可以在各种计算机系统中使用。当网站访问者没有指定字体时，浏览器将尝试根据作者指定的保护字体列表选择替代字体。这样可以确保在不同的设备和浏览器上，网站的文本都能按照设计者的意图正确显示。

通用字体（在本例中为 Tahoma）称为 Web 安全字体。Web 安全字体是大多数计算机操作系统和浏览器支持的字体，因此可以在 Web 上安全使用。可以在字体堆栈中使用相当多的 Web 安全字体，并且高度确信网站访问者使用想要的字体查看你的网站不会有任何问题：

Web 安全衬线字体：Times New Roman、Georgia、Palatino、Lucida Bright；
Web 安全无衬线字体：Arial、Tahoma、Trebuchet MS、Verdana；
Web 安全等宽字体：Courier、Courier New、Lucida Sans Typewriter；
Web 安全专用字体：Copperplate、Papyrus、Arial Black、Arial Narrow。

这些是在所有操作系统中具有最广泛支持的 Web 安全字体。

二、测试字体堆栈

即使按相同的值调整大小，不同字体的呈现方式仍会使它们看起来大小明显不同。以Times New Roman和Lucida Bright为例。这些 Web 安全字体通常用作衬线样式 Web 字体的后备选项。但是，如果我们并排比较它们，我们可以看到一些显着差异。

示例代码：

<style> .timestext { font-family: "Times New Roman", Times, serif; font-size: 1em; } .lucidatext { font-family: "Lucida Bright", Lucida, serif; font-size: 1em; } </style> <p class="timestext">This sentence is written in Times New Roman.</p> <p class="lucidatext">This sentence is written in Lucida Bright.</p>

上面的代码定义了两个 HTML 段落元素。首先，我们应用了一个 CSS 规则，使其以 1em 大小的 Times New Roman 字体显示。第二句话将以 1em 大小的 Lucida Bright 字体显示。

.timestext { font-family： “Times New Roman”， Times， serif; font-size： 1em; } .lucidatext { font-family： “Lucida Bright”， Lucida， serif; font-size： 1em; }
第一句话是用Times New Roman写的。
第二句话是用Lucida Bright写的。

如果打开文字处理应用程序并以两种不同的字体显示相同的句子，将看到相同的行为，但即使大小相同，不同的字体显示也大不相同。虽然网站内容在 Lucida Bright 中可能看起来很棒，但如果使用 Times New Roman 作为后备，如果系统不支持 Lucida Bright，文本最终可能会变得太小，使访问者无法舒适地阅读。下面介绍如何测试字体堆栈，以确保回退字体选项呈现良好：

注释掉字体堆栈中除一种字体之外的所有字体，并在字体堆栈中只有一种字体处于活动状态的情况下查看网站；
重复该过程，直到使用每种回退字体查看了网站；
如果任何字体产生可读性问题，请将其从堆栈中删除；
确保在每个字体堆栈中至少保留三到四种呈现良好的字体，以便在字体堆栈中提供足够的浏览器和操作系统覆盖率。

三、使用Web字体

一旦探索到可用的大量Web字体，可能不希望仅限于使用一些Web安全字体。Web字体并不是预装在用户设备上的，而是与网站的其他内容一起传送给访问者。尽管它们可能会对网站加载速度产生一定影响，但随着宽带互联网连接的普及，这种延迟的影响已降至最低，并且大多数现代网站都使用Web字体。

在使用Web字体时，最好将它们嵌入到字体堆栈中。字体堆栈确定了在无法加载首选字体时要使用的后备字体。例如，在示例的字体堆栈中，我们首先列出了Open Sans Web字体，这意味着它会首先尝试加载Open Sans字体，如果无法加载，则会回退到下一个字体。

有两种常见的方法可以将Web字体添加到网站中：

1、@font-face规则

通过使用CSS的@font-face规则，可以将自定义字体文件链接到网页。这样，浏览器会下载并显示这些字体。例如，可以在CSS中添加以下代码来定义字体：

@font-face {
font-family: 'Open Sans';
src: url('opensans.woff2') format('woff2'),
url('opensans.woff') format('woff');
}

在上面的示例中，我们定义了一个名为Open Sans的字体，并提供了它的WOFF2和WOFF格式的文件链接。

2、Web字体服务

另一种方法是使用Web字体服务，如Google Fonts或Typekit。这些服务提供了大量的Web字体供选择，并且它们会自动处理字体文件的传递和浏览器兼容性问题。只需将提供的代码片段添加到网站中即可。例如，对于Google Fonts，可以在HTML文件的头部添加以下代码：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" rel="external nofollow" >

上述代码将从Google Fonts服务加载Open Sans字体，并将其应用于网页。

四、自托管字体

自托管 Web 字体与网站文件一起托管。当访问者访问网站时，字体文件将与构成网站的其余文件一起从服务器发送到访问者的浏览器。

CSS at-rule 用于加载网站服务器上存在的 Web 字体。我们之前提到的网络字体 Open-Sans 可以从 Font Squirrel 免费下载。要使用 Open Sans 作为自托管字体，我们首先会下载所有可用格式的字体，并将它们上传到与我们的 CSS 文件相同的目录中。加载自托管字体的规则如下所示：

/*The following rule is a modified version of the rule included with the download of Open Sans from Font Squirrel. Do not copy and paste this rule. Download the font from a font service and use the code provided with the font.*/ @font-face{ font-family: 'Open Sans'; src: url('OpenSans-Regular-webfont.eot'); src: url('OpenSans-Regular-webfont.eot?iefix') format('embedded-opentype'), url('OpenSans-Regular-webfont.woff') format('woff'), url('OpenSans-Regular-webfont.ttf') format('truetype'), url('OpenSans-Regular-webfont.svg#open_sans') format('svg'); }

现在我们可以将 Open Sans 添加到 CSS 样式表中的任何字体堆栈中，选定的 HTML 元素将显示在 Open Sans 中。Font Squirrel 只是众多地方之一，可以在其中找到免费和高级可下载字体以用作自托管字体。另外两个值得一看的字体市场包括 Creative Market 和 Font Spring。

五、CDN托管字体

至少有三种服务在面向公众的内容分发网络（CDN）上托管字体。要使用这些字体，需要将一些代码添加到 HTML 文档中，浏览器会从 CDN 下载文件。

使用此模型的三个最知名的服务包括：head

谷歌字体：这项完全免费的服务可能是最常见的网络字体交付方式。它非常易于使用，包括 700 多种字体系列；
Typekit：Typekit 被认为是字体的主要来源。它与大多数网页设计师使用的 Adobe Creative Suite 捆绑在一起，并包括一千多种高质量字体系列。对 Typekit 的完全访问权限需要 Adobe Creative Suite 许可证或付费 Typekit 帐户。但是，可以免费使用有限数量的字体；
Adobe Edge Web Fonts：Adobe 提供的这项免费服务包括大约 500 个免费字体系列。将此服务视为 Typekit 的显著缩减版本。

使用托管字体服务还有一个额外的好处，即不必担心代码语法是否完美，也不必考虑为每个用户包含正确的字体文件格式。字体服务会处理所有这些问题。只需将字体服务中的一两行代码直接复制并粘贴到 HTML 文档中，然后使用 CSS 属性将字体应用于网站的不同元素。例如，Open Sans 可从上述所有三种字体服务获得。下面是用于使用所有这些源将此字体添加到网页的代码。

<head> <!--Google Fonts are added using the link element--> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <!--Edge Fonts code uses a JavaScript file to deliver the font--> <script src="//use.edgefonts.net/open-sans.js"></script> <!--Typekit Fonts are a bit more complicated to use--> <script src="https://use.typekit.net/font_kit.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> </head>

六、图标字体

过去，使用图标字体有点复杂，需要图标字体文件是自托管的。由于 MaxCDN 和 Bootstrap 赞助的 CDN 托管，任何人都可以将 Font Awesome 图标添加到他们的网站，而无需将字体文件托管在自己的服务器上，就像采取以下两个步骤一样简单：

使用 link head 将单个元素添加到 HTML 文档中；
使用图标名称将图标添加到 HTML 元素。

下面是这两个步骤的运行示例。

<head> <!--This link is available at Font Awesome's "Get Started" page--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="external nofollow" > </head> <body> <p><i class="fa fa-lightbulb-o"></i> Using the i element produces the cleanest code.</p> <p><span class="fa fa-check-square-o"></span> Using the span element is more semantically correct.</p> </body>

图标字体之所以比图像图标字体更好用，是因为它们可以使用用于设置字体样式的所有相同 CSS 属性进行样式设置。例如，如果我们想增加图标大小，添加圆形背景颜色，更改图标颜色，并在图标周围添加一些额外的填充，我们可以使用一些相当简单的 CSS 来实现。

.fa { padding: 15px; color: white; background-color: gray; border-radius: 50%; font-size: 1.5em; }

现在，当我们呈现同一段落时，我们可以看到我们的规则已经生效。

.fa-example { padding： 15px; color： white; background-color： gray; border-radius： 50%; font-size： 1.5em; } 使用 i 元素生成最干净的代码