熟悉WEB开发的朋友都明白一个现状:想在网页上显示一种字体,该字体文件本身必须存在于用户的电脑中,由于这个限制,加上 Web 用户可能分散于各种操作系统,只有那些在各种环境都普遍存在的字体才会被用于网页。
目前各种操作系统默认安装的英文字体有 arial、verdana、tahoma 等多种字体,而中文字体仅有宋体、黑体。因此也就限定了中文用户只能用宋体或黑体去浏览网页。对于设计稿中多彩多样的字体,Web 设计师也只能采用图片的形式展现给用户。
然而Web中的动态文字是无法用图片来实现的,设计师在给文字加上样式的同时更多的是在祈祷用户安装了相应的字体。
.yahei{font-family:"微软雅黑",verdana,airal;}
设计师为文字设定了以上样式,如果用户的系统中没有安装微软雅黑,最终呈现在用户面前的中文文字将会是默认字体,正如我Blog的标题样式:
如果你看到的文章标题不是雅黑的字型,说明你的系统没有安装微软雅黑这个字体。
CSS 可能为这个问题带来一线曙光,CSS 包含一个 @font-face 定义,你可以指定一种位于某个 Web 服务器上的 TrueType 或 OpenType 字体。
@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }
Safari, Firefox 3.1,Opera最新版目前均支持 @font-face定义。这三种浏览器目前覆盖了30%~50%的用户,对 Web 设计者来说,这个数字已经足够大。至于 IE 浏览器,虽然微软从IE4开始就宣称支持Web 字体定义,但就目前而言,也只限于Embedded OpenType(EOT)文件,所以我们必须为IE用户定义一个私有的stylesheet。



