[教程] 谈谈网页设计中的字体应用 (3) 实战应用篇·上
2008-05-11 20:44
801 查看
font-family: "Comic Sans MS", "幼圆", "黑体", sans-serif;
按照W3C的规范,浏览器在使用这个 font-family 显示一个字符时,首先应该寻找 Comic Sans MS 字体。如果找不到 Comic Sans MS 字体,那么顺序搜寻下一个字体,即幼圆字体。如果找到 Comic Sans MS 这个字体,那么浏览器会在 Comic Sans MS 字体中寻找这个字符。如果找到这个字符,就使用 Comic Sans MS 字体来显示这个字符。如果没有找到这个字符,或者这个字符对应一个缺字符(缺字符是字体文件中的一种特殊字符,用来表示字体文件中没有这个字符。通常就是显示一个方块),那么就要到下一个字体,也就是幼圆体中继续搜寻这个字符。如此搜索整个字体表,知道搜索到这个字符为止。如果在通用字体,也就是这里的 sans-serif 字体中也找不到这个字符的话,那么浏览器就应该显示该字体的缺字符。
所以,如果有下面这句话:
所以我说:“这也是没办法的,it ain't going nowhere”。
那么,在一个正常的Windows XP系统上,所有中文字符都会被显示为幼圆,英文字符都被显示为 Comic Sans MS 字体。比如“说”字,浏览器先搜索 Comic Sans MS 字体,得到一个缺字符,于是搜索幼圆。系统中存在幼圆字体,于是终止搜索,将“说”字显示为幼圆字体。对于英文字符“i”,浏览器在 Comic Sans MS 这个字体中就能找到这个字符,于是就用 Comic Sans MS 显示 i 这个字符。
另外,双引号——“”,这两个字符其实在 Comic Sans MS 中也有。所以浏览器会用 Comic Sans MS 中的双引号来显示。
Internet Explorer 7
font-family: "幼圆", "Comic Sans MS", sans-serif;
这样就可以保证所有中文字符都显示为幼圆。至于为什么 IE 和 Opera 又认了在 font-family 首位的幼圆,这个也不要问偶,总之它们就是认了 font-family: "微软雅黑", "黑体", sans-serif;
但实际测试下来,他会发现,即使第一个字体设置成了中文字体,在这个字体缺失的情况下,IE 和 Opera 还是不会使用第二位的黑体,而继续它们自己的莫名其妙的规则,使用了系统默认字体——宋体。这显然还是不能满足设置 font-family 属性的初衷。
第二个方案是,仍旧按照CSS标准的解释方式来写 font-family,但是在 font-size 上做些手脚,只用 12px, 14px, 16px 等稳扎稳打的字体大小。这样做最大的好处是能优先用最合适的字体显示英文字符。至于中文字符,XP的宋体也好,Vista的雅黑也好,OS的新宋体也好,在上面几个字体大小下显示的都不算难看。何况中文字体的选择范围本来就比较小,无外乎也就是那几个系统默认字体,因此自然也凑合。个人比较倾向使用这种方案。
至于具体选用哪种方案,还需要大家根据实际情况斟酌而定。
今天就讲到这里吧。下次我会从跨平台兼容性上讲述如何实际应用字体哟~
那么,大家下次见吧~
按照W3C的规范,浏览器在使用这个 font-family 显示一个字符时,首先应该寻找 Comic Sans MS 字体。如果找不到 Comic Sans MS 字体,那么顺序搜寻下一个字体,即幼圆字体。如果找到 Comic Sans MS 这个字体,那么浏览器会在 Comic Sans MS 字体中寻找这个字符。如果找到这个字符,就使用 Comic Sans MS 字体来显示这个字符。如果没有找到这个字符,或者这个字符对应一个缺字符(缺字符是字体文件中的一种特殊字符,用来表示字体文件中没有这个字符。通常就是显示一个方块),那么就要到下一个字体,也就是幼圆体中继续搜寻这个字符。如此搜索整个字体表,知道搜索到这个字符为止。如果在通用字体,也就是这里的 sans-serif 字体中也找不到这个字符的话,那么浏览器就应该显示该字体的缺字符。
所以,如果有下面这句话:
所以我说:“这也是没办法的,it ain't going nowhere”。
那么,在一个正常的Windows XP系统上,所有中文字符都会被显示为幼圆,英文字符都被显示为 Comic Sans MS 字体。比如“说”字,浏览器先搜索 Comic Sans MS 字体,得到一个缺字符,于是搜索幼圆。系统中存在幼圆字体,于是终止搜索,将“说”字显示为幼圆字体。对于英文字符“i”,浏览器在 Comic Sans MS 这个字体中就能找到这个字符,于是就用 Comic Sans MS 显示 i 这个字符。
另外,双引号——“”,这两个字符其实在 Comic Sans MS 中也有。所以浏览器会用 Comic Sans MS 中的双引号来显示。
- 事实上呢?
大家来看看截图吧:Internet Explorer 7
font-family: "幼圆", "Comic Sans MS", sans-serif;
这样就可以保证所有中文字符都显示为幼圆。至于为什么 IE 和 Opera 又认了在 font-family 首位的幼圆,这个也不要问偶,总之它们就是认了 font-family: "微软雅黑", "黑体", sans-serif;
但实际测试下来,他会发现,即使第一个字体设置成了中文字体,在这个字体缺失的情况下,IE 和 Opera 还是不会使用第二位的黑体,而继续它们自己的莫名其妙的规则,使用了系统默认字体——宋体。这显然还是不能满足设置 font-family 属性的初衷。
第二个方案是,仍旧按照CSS标准的解释方式来写 font-family,但是在 font-size 上做些手脚,只用 12px, 14px, 16px 等稳扎稳打的字体大小。这样做最大的好处是能优先用最合适的字体显示英文字符。至于中文字符,XP的宋体也好,Vista的雅黑也好,OS的新宋体也好,在上面几个字体大小下显示的都不算难看。何况中文字体的选择范围本来就比较小,无外乎也就是那几个系统默认字体,因此自然也凑合。个人比较倾向使用这种方案。
至于具体选用哪种方案,还需要大家根据实际情况斟酌而定。
今天就讲到这里吧。下次我会从跨平台兼容性上讲述如何实际应用字体哟~
那么,大家下次见吧~
相关文章推荐
- [教程] 谈谈网页设计中的字体应用 (4) 实战应用篇·下
- 谈谈网页设计中的字体应用 (4) 实战应用篇·下
- [教程] 谈谈网页设计中的字体应用 (2) serif 和 sans-serif
- 【转】 谈谈网页设计中的字体应用 (3) 实战应用篇·上
- 【转】 谈谈网页设计中的字体应用 (4) 实战应用篇·下
- [教程] 谈谈网页设计中的字体应用 (1) Font Set
- [转]谈谈网页设计中的字体应用 (4) 实战应用篇
- 【转】谈谈网页设计中的字体应用 (2) serif 和 sans-serif
- 谈谈网页设计中的字体应用Font Set
- 谈谈网页设计中的字体应用Font Set
- 【转】谈谈网页设计中的字体应用 (1) Font Set
- 谈谈网页设计中的字体应用Font Set
- WEB前端网页设计全集视频教程【54讲】 WEB前端实战视频教程
- Java实战应用视频教程之Java算法分析与设计
- 网页设计中的 serif 和 sans-serif字体应用
- 实战应用Java算法分析与设计视频教程
- 网页设计中的 serif 和 sans-serif字体应用
- Java实战应用视频教程之Java算法分析与设计
- CSS教程:网页英文字体和中文字体应用
- css教程:网页字体及字体大小的设计