Web字体的运用与前景
日期:2009-01-19 阅读:124 分类:Web前端
熟悉WEB开发的朋友都明白一个现状:想在网页上显示一种字体,该字体文件本身必须存在于用户的电脑中,由于这个限制,加上 Web
用户可能分散于各种操作系统,只有那些在各种环境都普遍存在的字体才会被用于网页。
目前各种操作系统默认安装的英文字体有 arial、verdana、tahoma 等多种字体,而中文字体仅有宋体、黑体。因此也就限定了中文用户只能用宋体或黑体去浏览网页。对于设计稿中多彩多样的字体,Web 设计师也只能采用图片的形式展现给用户。
然而Web中的动态文字是无法用图片来实现的,设计师在给文字加上样式的同时更多的是在祈祷用户安装了相应的字体。
Web 字体也因此背上了单调的恶名!
CSS 可能为这个问题带来一线曙光,CSS 包含一个 @font-face 定义,你可以指定一种位于某个 Web 服务器上的 TrueType 或 OpenType 字体。
Safari, Firefox 3.1,Opera最新版目前均支持 @font-face定义。这三种浏览器目前覆盖了30%~50%的用户,对 Web 设计者来说,这个数字已经足够大。至于 IE 浏览器,虽然微软从IE4开始就宣称支持Web 字体定义,但就目前而言,也只限于Embedded OpenType(EOT)文件,所以我们必须为IE用户定义一个私有的stylesheet:
@font-face的确是小型字体Web应用的最优解决方案,然而关于中文 Web 字体问题,可能就要复杂得多,因为中文字体动辄几个MB大小,用户在访问一个网页之前,先下载一个几MB的字体是不现实的。另外,中文字体的字号的选择也要十分谨慎,12px 的宋体在屏幕上可以正常显示,然而 12px 的黑体却很难看,黑体至少要 13px 或 14px 才可以平滑地显示。
参考文献:
The future of web font embedding
CSS @ Ten: The Next Big Thing
from:
目前各种操作系统默认安装的英文字体有 arial、verdana、tahoma 等多种字体,而中文字体仅有宋体、黑体。因此也就限定了中文用户只能用宋体或黑体去浏览网页。对于设计稿中多彩多样的字体,Web 设计师也只能采用图片的形式展现给用户。
然而Web中的动态文字是无法用图片来实现的,设计师在给文字加上样式的同时更多的是在祈祷用户安装了相应的字体。
. yahei{font-family:"微软雅黑",verdana,airal;}
Web 字体也因此背上了单调的恶名!
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:
@font-face {
font-family: dreamy;
font-weight: bold;
src: url(http://www.example.com/font.eot);
}
@font-face的确是小型字体Web应用的最优解决方案,然而关于中文 Web 字体问题,可能就要复杂得多,因为中文字体动辄几个MB大小,用户在访问一个网页之前,先下载一个几MB的字体是不现实的。另外,中文字体的字号的选择也要十分谨慎,12px 的宋体在屏幕上可以正常显示,然而 12px 的黑体却很难看,黑体至少要 13px 或 14px 才可以平滑地显示。
参考文献:
The future of web font embedding
CSS @ Ten: The Next Big Thing
from:
相关文章
- 如何开启浏览器的WebGL功能? 2012-01-06
- Css选择符 2008-07-03
- 国外10个优秀网站模板欣赏 2008-07-17
- W3C公布HTML5的WEB标准草案 2008-07-29
- web标准相关的一些链接 2008-07-04
- 如何修改Foxmail字体,编辑器属性 2011-07-11
- win7窗口字体大小设置 2011-11-22
- 让Safari支持微软雅黑的CSS样式表 2011-12-07
- flex利用source属性嵌入字体 2009-01-06
- 10个效果最佳的编程使用的字体 2011-07-26