简化的 web 字体(关于 Web 开放字体格式 WOFF)

设计与排版是相辅相成的。但每当我想在我的网页上使用特别的字体时，总是让人十分头痛，很难实现。因为这个原因，许多网页设计师放弃使用这种方式，通过将文字处理为背景图片来解决这个问题。但这样带来了另一些问题，包括可访问性（注：针对盲人等残障人士，例如他们需要文字朗读功能）及页面内容警惕性问题（图片不如文字那样具有可调整性），有时候有必要对页面渲染进行像素级的控制，但另外一些时候，我们希望由浏览器和用户来控制文字的排列和显示。

浏览器支持

在本文中，我主要介绍过去和现在浏览器对 Web 字体的支持情况，使用的字体类型及如何在页面标记中使用它们。

Microsoft 在 1995 年就已经在首个 Internet Explorer 版本中通过 FONT FACE 标记来支持嵌入字体，随后的 3、4、5 几个版本又增加了 CSS 支持。不过，这种技术需要用户的系统中已经安装有要使用的字体。最后，Microsoft 提供了一个 WEFT 工具，让大家可以将字体嵌入到自己的网页中，用户无需实现安装该字体就可以正确浏览该页面。

Internet Explorer 所支持的字体格式是 Embedded Open Type (EOT) 文件格式，这种格式还没有被其他浏览器支持（注：最新版本的 Chrome 浏览器已经支持）。经我测试的其它所有浏览器（包括最新版本的 Firefox、Opera 和 Safari）都支持 TrueType (TTF) 字体格式。

转换字体

在 Windows 中使用的大多数字体都是 True Type 字体。为了使我们的（特殊）字体能在 Internet Explorer 中使用，他们必须变成 EOT 格式。

Microsoft 早前就提供了一个 Web Embedding Fonts Tool (WEFT) 工具，帮助网页开发人员生成 EOT。它具有完全图形化的界面，能够扫描并识别网站中使用该字体的所有字符，然后只把这些字符编码并打包到 EOT 字体格式中，随后就可以上传到服务器上使用了。我使用过这款软件，感觉用起来不方便不直观，而且并没有处理到我是用的字体。

除此之外，我还发现了另外一款开源的命令行工具 ttf2eot (采用 GNU GPL v2 许可)，并有 Windows 版本提供下载。该工具最初为 Unix 系统而开发，因此用法上和普通的 Windows 程序不太一样，它会将字体转换为输入流，然后写入到输出流中，也就是说，需要在 Windows 命令提示符中运行类似下方的命令：

TTF2EOT < MyFont.ttf > MyFont.eot

使用 CSS @font-face

现在，需要使用的字体同时准备好了被浏览器所使用的两种格式，需要在网页中引用该字体，然后在标记中调用。

要让所有浏览器都能正确显示这种嵌入字体，其 CSS 代码非常简单。只需按正确顺序排列 @font-face 声明，这样所有浏览器就都可以调用合适的字体信息了：

声明 font-face 之后，就可以像其他系统内置字体一样使用了：

就是这样简单！准备好这种字体的两种格式，然后以正确的顺序引用它们，最后就可以在网页中使用它了。

本文由 wbpluto 翻译自 MSDN Blog ，目的是让国内爱好者更多的了解相关技术。全文内容忠于原文，词汇遵照微软官方翻译，只有少数语句为了便于理解和阅读而做了语序上的调整。以括号加斜体书写的是译者添加的备注。

（编辑：温州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!