首页 > 开发 > CSS > 正文

网页制作教程:默认Web字体样式

2024-07-11 09:03:16
字体:
来源:转载
供稿:网友

武林网(www.vevb.com)文章简介:我们页面的绝大部分内容字符都是中文,毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体,但是宋体在显示英文、数字和英文符号时过于糟糕,比如字符,所以我们一般期望通过CSS来实现用更好的字体样式来显示它们,然后用宋体来显示中文和中文符号

秦歌(YanKaven) 的站点:

默认Web字体样式

通常用户看到的页面的样式会受到三层控制,第一层是浏览器的默认样式,第二层是网页定义样式,第三层是用户自定义样式。和CSS一样,后面的优先级高于前面的,也就是说网页定义样式可以覆盖浏览器的默认样式,而用户自定义样式优先级最高。实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能,但是极少数会有用户去自定义,一般用也是高级用户。而浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

拿字体来说,各个浏览器默认的字体种类、字体大小和字体行高都不一样,比如IE8的中文版在Windows XP下显示网页时默认字体是宋体,而英文版肯定不会如此。所以我们需要统一设置默认的字体样式,以便实现一致的显示效果来保证设计的一致性和提高开发效率。

以后准备使用如下默认字体样式:

body{ font: 12px/1.5 arial;}

字体:arial

我们页面的绝大部分内容字符都是中文,毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体,但是宋体在显示英文、数字和英文符号时过于糟糕,比如©字符,所以我们一般期望通过CSS来实现用更好的字体样式来显示它们,然后用宋体来显示中文和中文符号。之所以选择arial是因为:

使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能解决绝大部分情况,但是都不会很完美,如果把字体改成“宋体”能彻底的解决问题。很明显,这个问题只出现在IE上。所以,如果你的网站很少使用英文、数字和英文符号,那么直接设置{font-family:/5b8b/4f53;}也是很合理的选择。

大小:12px行高:1.5倍性能和效率未来
  • 通过对中英文及符号混排的测试,我发现微软雅黑其实表现相当不错,包括英文数字和英文字符以及在IE6和IE7的显示效果上,但唯一的遗憾是在XP下如果安装了微软雅黑字体的用户没有打开“使用屏幕字体的边缘平滑”选项的话,在Firefox、Safari和Opera、特别是IE6下会非常模糊难以辨认。针对这个问题目前并没有很好的解决方案,所以只有等到IE6使用比率非常小的时候才可能正式的使用它。或许需要到2014年,XP死掉的时候。
  • 虽然很早就有了@font-face,但是浏览器的支持、网速和商业问题,导致它很少被应用。最近关于字体的好消息是Firefox3.6将支持Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体:现状与未来和再谈 Web 字体的现状与未来。
  • 最后推荐一下玉伯的《再谈 Web 默认字体》

    发表评论 共有条评论
    用户名: 密码:
    验证码: 匿名发表