一、各平台最佳正文字体现状:

  • Windows
    Windows 在 Vista 之前都以中易宋体(在 Windows 里显示名称为宋体,英文名 SimSun)为简体中文默认字体。它在正文字号时为点阵,尚可接受,但字号稍大就难以接受了。中易宋体没有粗体,它的西文部分也完全没法用。
    从 Vista 开始,微软提供了微软雅黑作为新的简体中文默认字体。这款字体跟上了时代,但褒贬不一。微软雅黑有粗体,西文部分达到了 Windows 的水准。在自己的网页设计中要不要用微软雅黑来显示正文——这是一大抉择。
    注意,决定用不用微软雅黑时要考虑到 pansz 说的 ClearType 问题:有一些 Windows 平台(包括一些 Windows XP)会因为种种原因拥有微软雅黑但却没开 ClearType,此时微软雅黑的效果很糟糕。 
    Windows 的主要问题在于字体渲染技术依赖过多的人工干预,且 ClearType 的抗锯齿风格不适合汉字。近年来有 DirectWrite 新的抗锯齿风格加入,在大字号时字体渲染效果大有好转,但正文字号的改善有限,且各浏览器并未跟上 DirectWrite 的步伐,以致 Windows 上的字体渲染情况较为混乱。
  • Mac OS X
    OS X 一直用华文黑体(重组后称「黑体-简」)作简体中文默认字体,这个字体族有常规体和粗体,西文部分很差劲(和中易宋体西文差的原因倒还不太一样)。
    从 OS X 10.6 开始,系统自带了冬青黑体简体中文(该字体在 10.7 以前没有中文名,叫作Hiragino Sans GB)。这款字体至今没有成为系统的简体中文默认字体,但它是目前 OS X 上最好的简体中文字体。
    OS X 的字体渲染技术显然是目前所有操作系统中最佳的。
    另外,OS X 还有一款叫 Hei Regular(family name 是「Hei」)的老旧字体——绝对不要再用它了,除非你知道自己在干什么。
  • iOS
    简中字体只有自带的华文黑体(黑体-简)可选。字体渲染风格与 OS X 类似。
  • GNU/Linux
    Linux 社区常用的简体中文介面字体似乎主要有文泉驿点阵宋体文泉驿正黑文泉驿微米黑,另有一些人会把 Windows 或 OS X 的字体拿去用。文泉驿点阵宋体类似 Windows 的中易宋体,而文泉驿正黑是在无自由黑体可用的情况下被迫制作的质量不太高的黑体。文泉驿微米黑是 Linux 社区现有的最佳简体中文介面字体,但它没有粗体。又因为文泉驿微米黑的质量也没有绝对优势,加之 Linux 各发行版的情况非常复杂,所以或许不指定字体最好。
    各 Linux 发行版默认的字体渲染效果参差不齐,成熟一些的(比如 Ubuntu)在某些方面会略强于 Windows。
  • Android
    自带支持汉字的 Droid Sans。文泉驿微米黑由 Droid Sans 衍生而来,主要扩展了它的中文部分(Droid Sans Fallback)。

二、 所以,为网页设定字体时有以下目的须达成:

  • 对于 Windows:在中易宋体和微软雅黑之间二选一。粗体和较大字号的文本用微软雅黑。没有微软雅黑的系统会回退到中易宋体。
  • 对于 OS X:尽量使用冬青黑体简体中文。没有冬青黑体简体中文的系统会回退到华文黑体。
  • 对于 iOS:系统会自动使用华文黑体。
  • 对于 Linux:尽量使用文泉驿微米黑。没有文泉驿微米黑的系统会回退到别的字体。
  • 对于 Android:系统会自动使用 Droid Sans。

三、 要达到以上目的,CSS 的 font-family 属性可以这么写 (中文字体之前的「...」代表西文字体,根据自己的口味选择就好)

  • 控制(为 Windows 选择微软雅黑,为 Linux 选择文泉驿微米黑): 

    font-family: ..., "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

    为什么不把中易宋体(SimSun)、华文黑体(STHeiti[10.6 之前]或 Heiti SC[从 10.6 开始])和 Droid Sans 写出来?因为它们是系统默认字体,以上字体都没有的话就会自动调用。除非你的用户中很多人的系统 locale 都不是中文,否则不必写出 STHeiti 之类(如果要写,请把它写在 Hiragino Sans GB 和 Microsoft YaHei 中间)。中易宋体(SimSun)尽管身为宋体,在 Windows 中却也是简体中文的默认 sans-serif 字体。
    注意:把冬青黑体放在这么前面会在某些情况下出问题,详见本答案第四部分。

  • 自由(仅在 OS X 上尽量使用冬青黑体简体中文,放任其他平台使用默认字体)
    font-family: ..., "Hiragino Sans GB", sans-serif;

    这个方案没法控制 Windows 到底用中易宋体还是微软雅黑,于是正文字号的效果或许见仁见智,但大字号时如果用的是中易宋体就非常难看了,所以可以为 Windows 把所有大字号文本的 CSS 改成「控制」方案。
    注意:把冬青黑体放在这么前面会在某些情况下出问题,详见本答案第四部分。

不要轻易在 font-family 属性里写上中易宋体(SimSun)。因为如果你写了它,为了避免安装了 Office 的 OS X 调用它来显示,你就得把冬青黑体和华文黑体都列在它前面。而把中易宋体(SimSun)和华文黑体这样的系统默认字体写出来实在也没有什么必要。
不要轻易把中文网页的 font-family 写成以「serif」结尾,因为如果列出的字体都没有,系统会按照「serif」的指示去用归于 serif 的中文字体,这样不符合我们尽量使用黑体的原则。

基于上面提到的这两个方案,还有各种中间形态可以选择。而 @崔凯 提到了另一个常见做法:

font-family: ..., sans-serif;

——即完全由各平台自己决定使用什么中文字体。这是很常见的方案,豆瓣、知乎等网站都是如此。但因为这个方案和这个问答的初衷不符,所以我没有把它列入讨论范畴。

四、另外:

厉向晨提出了一个 问题
如果把冬青黑体简体中文用作 font-family 的第一个中文字体,对于安装了冬青黑体简体中文的 Windows 用户来说,因为 Windows(至少在 DirectWrite 普及之前)对 PostScript 轮廓的字体渲染得很糟糕,效果会几乎没法阅读;而如果把微软雅黑放在冬青黑体简体中文前面,微软雅黑在 OS X 里的渲染效果起码可以接受,尽管并不舒适。
目前 Windows 里的情况比较乱,IE9+ 可以识别系统里安装的冬青黑体简体中文,而较新版本的 Firefox(@顾轶灵 说是 4+)能部分识别(似乎会分不清字重),其他浏览器/内核不行(必须用 PostScript name 才能识别)。所以,对于正文,最好针对不同的平台分别指定 font-family。

其实,如果你的网站可以判断 UA 来针对各平台提供不同的 CSS,那么以上的排序问题就没那么复杂了。根据以上分析,为各个平台指定你想要的字体就好。

应当注意的 WebKit 怪癖:
如果你将西文字体设置为 Georgia 之类的 serif 字体(即,与列表后面的 sans-serif 中文字体不属一类),且 WebKit 内核的 UA(OS X 的 Safari 是个典型)找不到你指定的任何中文字体,可能会导致 UA 用系统默认的 serif 中文字体。比如,如果 Mac OS X 的 Safari 遇到了

font-family: Georgia, sans-serif;

就会用 华文宋体 显示中文。所以某些情况下你可能有必要加上「Heiti SC」。

转载于:https://my.oschina.net/felumanman/blog/425349

font-family 的中文顺序相关推荐

  1. matplotlib的Text、FontProperties对象、字体(font)属性|中文字体的设置|图像标题、label字体的设置

    matplotlib.text.Text对象 见文档描述matplotlib.text 设置Text字体性质的方法有两个: Text.set(xxx=value) Text.set_xxx(value ...

  2. Glyph 26426 missing from current font. matplotlib显示中文乱码解决

    网上关于这个问题的帖子也不少,但按照他们的方法尝试后,仍然解决不了我的问题.痛定思痛,花了一天时间看了不少matplotlib底层源码,终于把这个问题解决了.后来发现网上的很多方法真的是"多 ...

  3. linux下python matplotlib 中文字体Font family [‘sans-serif‘] not found. Falling back to DejaVu Sans

    问题 在linux新的python环境,安装了matplotlib,但是使用中文字体时找不到. 问题代码: import matplotlib.pyplot as plt plt.rcParams[' ...

  4. DHTML技术中的注解、#字符的作用、font属性顺序

    代码需求: 页面中已经有一个span标签,要求为页面中添加新的p节点,并为p节点设置背景.边框.文本内容等属性. <!DOCTYPE html> <html lang="e ...

  5. 页面可用性之浏览器默认字体与CSS中文字体

    一.浏览器默认字体 众所周知,浏览器字体默认的设置为"宋体/simsun字体 16像素",例如Chrome浏览器下: 二.CSS中设置的字体 考虑到兼容性,我们总会在CSS中队字体 ...

  6. 解决Manjaro KDE安装中文新字体后不显示默认字体而是新安装的字体的问题

    系统显示语言为中文,默认字体是Noto Sans,用KFontview(字体查看器)安装了从网上下载的"文鼎PL简中楷"重启后发现字体模样都变成了"文鼎PL简中楷&quo ...

  7. css汉字注释乱码,css font-family属性设置中文字体乱码

    一般设置字体,个人都喜欢用中文,比如:font-family:"微软雅黑":但是偶尔会出现设置以后字体显示乱码的问题 解决方法[1]: 看看你的CSS文件的第一行有没有:@char ...

  8. SecureCRT连接Linux显示Mysql记录中文乱码

    一 查看Linux主机系统字符集 echo $LANG en_US.UTF-8 二  ssh客户端character encoding默认设置为default,只要改成指定UTF-8即可在终端上显示中 ...

  9. 使用matplotlib绘制xkcd风格的图表(解决中文字体问题)

    XKCD xkcd是兰道尔·门罗(Randall Munroe)的网名,又是他所创作的漫画的名称.作者兰道尔·门罗(Randall Munroe)给作品的定义是一部"关于浪漫.讽刺.数学和语 ...

最新文章

  1. python工具是什么-python有什么好用的持续集成工具么?
  2. 精选30张炫酷的动态交互式图表,Pandas一键生成,通俗易懂
  3. 2019-06-12 Java学习日记之JDBC
  4. 工作226:for循环逻辑
  5. 【Android】Error:Execution failed for task ':app:lint'
  6. mysql java safe model_被 MySQL sql_mode 深深伤害( 中 )
  7. 宗地图绘制要求和规范_地籍图、宗地图、房产图的制图规范
  8. Gen系列服务器,Hpe Microserver Gen10 Plus开箱
  9. CSDN高校俱乐部2013年秋季北京地区第一站“编程语言的应用及其发展”—北京联合大学
  10. POJ1392: Ouroboros Snake 题解
  11. Python用requests库+BeautifulSoup库+re库获取微博热搜(有详解)
  12. 笔记本电脑不显示WIFI列表无法连接到网络的解决办法
  13. 返乡之路不容易之12306余票查询并给出备选方案v2
  14. c语言作业报告,C语言程序设计综合作业报告——作业管理系统
  15. Maya导出ASCII格式的FBX文件
  16. Linux系统和Windows系统的区别
  17. (超详细)大数据Hadoop之HDFS组件
  18. 图解 | 原来这就是网络
  19. 使用iBatis的自动化代码生成工具Abator
  20. b、B、KB、Kib、MB、MiB、GB、GiB、TB、TiB的区别

热门文章

  1. 用Python做gif动图
  2. 大学操作系统课程笔记
  3. UWA服务模式调整通知
  4. 魔乐科技安卓开发教程----李兴华----11使用摄像头拍照
  5. 【三年面试五年模拟】算法工程师的独孤九剑秘籍(前六式汇总篇)V1版
  6. 【推荐】2021年剧本杀行业研究报告白皮书投资策略产业发展前景市场行情分析(附件为网盘链接,报告持续更新)
  7. H3C无线开局简单指导
  8. 第三章 Opencv图像像素操作
  9. excel if 判读单元格如果为空就不参与计算
  10. 5.继承相关的小知识