查看“Web字体的运用与前景”的源代码

==Web字体的运用与前景==

熟悉WEB开发的朋友都明白一个现状：想在网页上显示一种字体，该字体文件本身必须存在于用户的电脑中，由于这个限制，加上 Web 用户可能分散于各种操作系统，只有那些在各种环境都普遍存在的字体才会被用于网页。

目前各种操作系统默认安装的英文字体有 arial、verdana、tahoma 等多种字体，而中文字体仅有宋体、黑体。因此也就限定了中文用户只能用宋体或黑体去浏览网页。对于设计稿中多彩多样的字体，Web 设计师也只能采用图片的形式展现给用户。

然而Web中的动态文字是无法用图片来实现的，设计师在给文字加上样式的同时更多的是在祈祷用户安装了相应的字体。

. yahei{font-family:"微软雅黑",verdana,airal;}

设计师为文字设定了以上样式，如果用户的系统中没有安装微软雅黑，最终呈现在用户面前的中文文字将会是默认字体，正如我Blog的标题样式，如果你看到的不是雅黑的字型，说明你的系统没有安装微软雅黑这个字体。

Web 字体也因此背上了单调的恶名！
CSS 可能为这个问题带来一线曙光，CSS 包含一个 @font-face 定义，你可以指定一种位于某个 Web 服务器上的 TrueType 或 OpenType 字体。
<source lang="html4strict">
@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }
</source>

更具体的用法可以参考CSS @ Ten: The Next Big Thing
Safari, Firefox 3.1,Opera最新版目前均支持 @font-face定义。这三种浏览器目前覆盖了30%~50%的用户，对 Web 设计者来说，这个数字已经足够大。至于 IE 浏览器，虽然微软从IE4开始就宣称支持Web 字体定义，但就目前而言，也只限于Embedded OpenType(EOT)文件，所以我们必须为IE用户定义一个私有的stylesheet：

@font-face {
font-family: dreamy;
font-weight: bold;
src: url(http://www.example.com/font.eot);
}

微软在今年三月中旬向W3C提交了EOT的字型规格申请，EOT规格将在常见的TrueType/Opentype文件上增加一个DRM层，它会首先确认使用者是否对所要嵌入的字型有合法的授权，如果没有，就会被禁止使用EOT字型。微软的IE多年来一直支持EOT，但它一直被忽视，因此网页被改变后重新生成的字体文件会变得很丑陋。W3C面临着一个难题：他们是否应该允许微软的EOT对网络的限制？还是鼓励正常的字型，打破微软的垄断？

@font- face的确是小型字体Web应用的最优解决方案，然而关于中文 Web 字体问题，可能就要复杂得多，因为中文字体动辄几个MB大小，用户在访问一个网页之前，先下载一个几MB的字体是不现实的。另外，中文字体的字号的选择也要十分谨慎，12px 的宋体在屏幕上可以正常显示，然而 12px 的黑体却很难看，黑体至少要 13px 或 14px 才可以平滑地显示。