中文字体在 CSS 中的写法
感谢 Dawn CSS Reset 的尝试和建议。针对字体的写法,觉得需要说明一下:
body,
button, input, select, textarea {
font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
}
“\5b8b\4f53″ 就是 “宋体”。用 unicode 表示,不用 SimSun, 是因为 Firefox 的某些版本和 Opera 不支持 SimSun 的写法。普及点字体知识:
字体的别名
系统中的一个字体是允许有多种别名形式存在的。比如,在 Windows 下,Georgia 也可以用 Georgia MS 来命名,它们其实是同一种字体。宋体的正式名称是 SimSun,而“宋体”只是它的别名。
按照规范,浏览器应该能自动识别字体的别名,并映射到正确的字体文件。比如,
font-famliy: SimSun和font-family: "宋体"应该具有等价的效果。可惜,似乎很多浏览器都不能正确执行前一条定义……
详细请参考:谈谈网页设计中的字体应用 (4) 实战应用篇
因此,考虑浏览器兼容,我们需要用“宋体”,转码成 unicode 形式则可以保证在任何编码下都无问题。
最后,针对 Dawn CSS Reset 中提出的差异点,说下我的想法:
- h1 – h6, 各个浏览器下的 font-size 有差异,统一一下,我觉得还是有好处的,特别是 h3 和 h4.
- list-style 放在 ul ol 上,是遵守最小影响原则。li 会继承 ul ol 的 list-style.
- acronym 表示首字母缩略词,是 abbr 的一种。目前还是有使用的场合,等 HTML5 正式流行后,再去掉不迟。tt 也如此。
- pre 的 monospace, 从语义上讲,的确不大妥当。但大部分使用场合,pre 的内容都是希望等宽的。某种程度上,等宽才能让 pre 真正实现 pre format.
- a 去掉了下划线,是因为考虑中文。除了搜狐、新浪这种老旧站点,目前大部分中文站点,链接默认都不会加下划线。这是一种中国特色,同时也是一种国际化趋势。加下划线的链接,越来越多的用来表示强调或某种视觉效果,比如 WordPress 的后台。
- 滚动条的问题,已去除。放在 reset 里,的确不妥当。
- 另:ie7- 下,hr 有默认色,这次更新加上了:hr { *color: #fff; }(理想情况下,应该设为 transparent, 可惜不行). 讨厌的 ie -.-
更新后的 KISSY Reset CSS: reset.css

August 13th, 2009 on 17:28
Firefox 的某些版本比如哪个版本?
August 13th, 2009 on 17:30
看到最后发现玉伯有点小跑题,嘻嘻
hr { *color: #fff; },现在大部分网站是浅底色深字色,这里用#000会不会在某些情况下减少一条覆盖规则?
August 13th, 2009 on 17:47
我觉得指定“宋体”没有必要。即使不指定,汉字在Windows系统(默认设置)下还是会显示成宋体;而在Mac下,将汉字强制显示为“宋体”似乎效果并不好。雕兄觉得呢?:)
August 13th, 2009 on 18:05
Win7 下,如果不指定 宋体,ie8 会显示很难看
August 13th, 2009 on 18:09
@chencheng: 好像是 firefox 1.5-, 具体记不得了。Opera 是肯定有问题,现在最新版本问题依旧。
@阿肆:是 #fff. 没办法,权衡。reset 只是尽可能满足主流需求,无法完美的。
August 13th, 2009 on 18:27
不知道reset.css为什么不存为utf-8格式呢?
August 13th, 2009 on 18:45
用Firefox在写Gmail富文本邮件时,用“宋体”可以正常显示,但是换成SinSun则不能被识别,变成畸形,有空尝试下Unicode字体设置。
另外,有空的话把常用字体的中文、英文、Unicode名都做过对照表,不知道lifesinger有没有这个表。
August 13th, 2009 on 19:07
最后一句改为
ie 讨厌~
就成为本文的亮点了~
August 13th, 2009 on 19:13
lang声明后,会变成默认字体,IE6下甚至会覆盖font-family
比如lang成cn后日文字体会失效
lang成tw后可能mingliu还是什么的
August 13th, 2009 on 19:31
我也试过设置lang,比如不设置lang为tw,给文章启用PMingLiu字体显示怪怪的~
August 13th, 2009 on 19:49
@闲耘™ 用这个直接转就可以了:http://dexbol.com/demo/javascript/unicode_encode.html
August 13th, 2009 on 20:37
存为 gbk 是因为大部分情况下是国人在用,gbk 更方便。另外,gbk 与 utf-8 相比,能减少文件大小。
其实,已经转码成 unicode, 因此 reset-min.css 可以说已经与编码无关,任何编码下都没问题。
August 13th, 2009 on 21:16
@dexbol 我初步整理了一下常用中文字体名称对照表,回家就发出来,希望对自己,对别人能省点事。
August 13th, 2009 on 21:54
我是将 CSS 文件存为 UTF-8 编码的,头部写上 @charset “UTF-8″;
August 14th, 2009 on 10:07
学习了。还不知道可以这么表示
August 14th, 2009 on 11:35
宋体不是一个sans-serif的字体,所以把它写在sans-serif的列表里面并不很合适,尤其是在Mac这种有字体抗锯齿的系统。我觉得还是把决定权交给用户比较好(因为只要写了sans-serif,就会最后调用浏览器sans-serif这里字体的设置),或者把宋体放在后边,提高雅黑、细黑的优先级。
August 14th, 2009 on 11:42
GBK减少文件大小的说法也不一定合适,因为现在的主流浏览器和服务器之间的html文本传输都是默认有gzip压缩,文字的编码能节省的带宽相当有限,远远不及图片优化的效果明显。现在国际化的趋势是utf-8,可以减少很多将来的麻烦,没有必要拘泥于区域标准了。
August 14th, 2009 on 15:35
“除了搜狐、新浪这种老旧站点” 这种说法不太妥当。。。。
August 14th, 2009 on 15:48
多谢玉伯兄的关注,文中给出的几个链接的内容很棒,感觉很多问题都有值得我再深入学习的地方,虚心接受文中的建议,我会依此继续完善自己的CSS Reset的。
August 14th, 2009 on 17:00
你好,我一直有个疑问,字体使用中文名字的话,在非中文OS上,比如英文或者日文windows上,浏览器能够找到正确的字体吗?
August 14th, 2009 on 21:11
@xz 这个大概需要分两种情况吧:
1. 即使使用英文名称,如果系统没有安装对应的字体,当然不能正确显示了;
2. 如果有安装对应的中文字体,如果客户端支持的话,大概可以显示。
欢迎有“字体国际化”经验的前辈来讲学。
August 20th, 2009 on 11:50
/** 清除内外边距 **/
我一直都是用 *{margin: 0;padding: 0;}
不知道reset里面的写法有什么讲究?
August 31st, 2009 on 16:25
看了 Dawn CSS Reset 觉得hack是种态度。
顺便请教下,一个网站的CSS如何架构,很多时候都是讲解单张页面的CSS。
期待您的回复!
August 31st, 2009 on 16:29
line-height为什么使用1?这样字体间距起步很小,120%?
December 9th, 2009 on 10:32
觉得hr { *color: #fff; }放在reset.css里不妥,还不如有hr的时候单独处理
February 1st, 2010 on 8:51
一般情况下H6都不怎么用,不过字体样式的锯齿不是很好解决
February 15th, 2010 on 20:52
很好 学习了
leave a reply