在网页上使用自定义字体
文本内容一直是重要的网站，但是在网络的早期，设计师和开发人员在他们对网页的印刷控制方面受到严重限制。 这包括他们能够在其网站上可靠使用的字体限制。 您可能听说过过去提到的术语“网络安全字体”。 这是指很可能包含在个人计算机中的一小部分字体，这意味着如果您的网站使用了其中一种字体，则可以安全地在个人浏览器上正确显示这些字体。
今天，网络专业人士有许多新的字体和类型选项可供使用，其中之一就是WOFF格式。
什么是WOFF？
WOFF是代表“Web Open Font Format”的首字母缩写词。它用于压缩与CSS @ font-face属性一起使用的字体。 这是一种在网页中嵌入字体的方法，以便您可以使用超出典型“Arial，Times New Roman，Georgia”的专用字体 - 这些是上述Web安全字体中的一部分。
WOFF作为打包网页字体的标准提交给W3C。 它在2010年11月16日成为工作草案。今天我们实际上已经有了WOFF 2.0，它将第一版格式的压缩率提高了近30％。 在某些情况下，这些节省可能更加实质！
为什么要使用WOFF？
Web字体（包括通过WOFF格式提供的字体）与其他字体选择相比具有很多优势。 就像那些网络安全字体一样有用，并且在我们的工作中这些字体当然还有一个地方，我们也很高兴能够扩大我们的选择并打开我们的印刷选项。
WOFF字体具有以下优点：
- 它们比字体更容易与图像一样。 WOFF使用CSS设置纯HTML文本，为您提供图像不允许的可访问性和设计控制。
- WOFF文件包括文字信息，如上下文形式和旧式数字。 这使您的网页更好地排版，因为您使用的是正确的字符，而不仅仅是近似值。
- WOFF字体可以帮助国际化，因为您可以使用其他语言的字符嵌入字体。
- 像所有CSS样式的文本一样，WOFF样式的字体更适合搜索引擎。 搜索引擎不会“查看”嵌入图像中的文本，而ALT文本可以提供帮助，因此不能替代文本本身。
- WOFF字体是压缩的，所以它们比其他类型的字体文件要小。 这将有助于网站下载速度和整体性能。
- 您可以使用WOFF文件通过将您的公司字体嵌入为WOFF文件来保留您的品牌标识。
WOFF浏览器支持
WOFF在现代浏览器中提供了出色的浏览器支持，其中包括：
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1+
如今，它基本上得到了全面的支持，唯一的例外是Opera Mini的所有版本。
如何使用WOFF字体
为了使用WOFF文件，需要将WOFF文件上传到Web服务器，使用@ font-face属性为其命名，然后在CSS中调用字体。 例如：
- 将称为myWoffFont.woff的字体上传到Web服务器的/ fonts目录。
- 在你的CSS文件中添加@ font-face部分：
@ font-face {
font-family：myWoffFont;
src：url（'/ fonts / myWoffFont.woff'）格式（'woff'）;
}
- 将新字体名称（myWoffFont）添加到您的CSS字体堆栈中，就像您使用任何其他字体名称一样：
p {
font-family： myWoffFont ，Geneva，Arial，Helvetica，sans-serif;
}
在哪里得到WOFF字体
有两个伟大的地方，你可以找到许多免费用于商业和非商业用途的WOFF字体：
- 打开字体库
- 字体松鼠
如果您有使用WOFF格式的字体的许可证，您可以使用WOFF创建者（如Font Squirrel）将您的字体文件转换为WOFF文件。 还有一个名为sfnt2woff的命令行工具，您可以在Macintosh和Windows上使用它将TrueType / OpenType字体转换为WOFF。
下载适合您的系统的二进制文件并在命令行（或终端）上运行它并按照说明进行操作。
WOFF示例
以下是WOFF文件的几个示例：24小时HTML5中的WOFF页面。
Jennifer Krynin的原创文章。 由Jeremy Girard于7/11/17编辑