著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:梁海
链接:http://www.zhihu.com/question/19911793/answer/13329819
来源:知乎

如果受不了长篇分析,请直接看第三部分。
另外,请注意,此答案最初作于2011年底,随几经修订但总体上还是略有点过时。

如今其实我推荐有能力的开发者判断 UA 然后为不同的平台指定不同的 font-family,以取得最佳且最可靠的效果。

本文不探讨 IE 的那些 bug(比如在某些编码下无法正常处理 font-family fallback),请针对 Windows 的开发者小心。

= = =

我确实认为目前在常规像素密度的显示屏上还是必须用黑体才能保证正文字号的中文清晰易读。我不喜欢点阵宋体。(这里的「黑体」当然指的是字体的一类风格,并非 Windows 自带的那个自称「黑体」的「中易黑体(SimHei)」——中易黑体根本没法用作正文字体,顶多在标题等大字号场合利用一下。)
所以,一般来说,我们要保证自己的网页设计在各平台显示时都能用上各平台最佳的黑体。这需要一点分析。

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

  • 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」。

如何保证网页的字体在各平台都尽量显示为最高质量的黑体?相关推荐

  1. 手机网页css字体,CSS深入浅出-动态REM(手机专用)

    动态REM是手机专用的自适应方案 REM的值 1. CSS有很多长度单位 px 像素 em 一个"M"的宽度(一个汉字的宽度) ex 一个"X"的高度 vh(v ...

  2. php网页设置字体排列,高品质的网页设计: 实例与技巧之三(文字排列与字体选用的诀窍)...

    尽管设计师大都不会亲自撰写网站的实际内容,不过他们对于内容的整体品质仍然至关重要.设计师的作用就是要保证内容的展现方式足够易读.有很多方法能保证你的字体易读易用,不过我不会给大家列一些该做什么或者不能 ...

  3. 给网页图标字体 Font Awesome 添加动画效果

    在国外网站中使用Web字体已经流行起来,虽然使用中文不太靠谱,但我们可以使用图标字体,也是很是方便的,图标字体有很多,可看<30个免费网页图标字体以及使用方法>一文,其中Font Awes ...

  4. 30个免费网页图标字体以及使用方法

    文章来源:http://sc.chinaz.com/info/130228237055.htm 设计达人 版权: Free for personal or commercial projects 查看 ...

  5. [css] 让网页的字体变得清晰,变细用CSS怎么做?

    [css] 让网页的字体变得清晰,变细用CSS怎么做? 全家桶:-webkit-font-smoothing: antialiased -moz-osx-font-smoothing: graysca ...

  6. 织梦在线艺术字体转换生成平台网站源码

    简介: 织梦dedecms在线艺术字体转换生成平台网站源码 支持自己添加字体,在线艺术字体转换器,织梦内核艺术字体在线生成,在线转换,在线设计源码定制带全部数据版 本程序为客户定制 带全站数据 ,此源 ...

  7. 微信网页分享(配合微信公众平台)

    微信网页分享--配合微信公众平台 一. 准备工作 二. SpringBoot前后端不分离版本 三. SpringBoot+Vue前后端分离版本 源码下载地址 一. 准备工作 准备一个域名(微信分享出去 ...

  8. html在360浏览器如何修改字体大小,360浏览器网页中字体大小如何修改

    浏览器中的字体要如何修改呢?在打开浏览器的时候会发现网页的字体太小,阅读起来不是很方便,那么这时候就需要用户的帮助呢,这时候要如何操作呢,今天小编就跟大家分享一下如何将字体大小更改的几个方法,这样用户 ...

  9. 手机网页html字体很小的解决办法

    手机网页html字体很小的解决办法: <meta name="viewport" content="width=device-width" initial ...

最新文章

  1. Django博客系统(详情页面展示)
  2. jQuery判断checkbox是否选中
  3. Stern-Brocot树
  4. 装了java_下载安装Java
  5. sas数据集怎么导出_[求助]如何导出sas数据集的标签?
  6. session 原理
  7. 电脑磁盘清理_软件 | 功能强大的电脑磁盘清理工具中文优化版,有了它,你的电脑就像德芙巧克力一般丝滑...
  8. 通用高性能 Windows Socket 组件 HP-Socket v2.2.1(增加 PULL 模型支持)
  9. 别了MongoDB?
  10. bit加密的时候会格式化硬盘吗_硬件百科:能在移动SSD上装系统吗?
  11. 单片机控制步进电机正反转c语言程序,单片机控制步进电机1步10步100步正反转...
  12. 数据库分库分表可扩展及数据倾斜/热点问题(二)
  13. C语言 投票选举问题
  14. 基于百度地图实现Android定位功能实现(详解+教程)
  15. Linux 桌面玩家指南:02. 以最简洁的方式打造实用的 Vim 环境
  16. Logstash 时区问题
  17. theano环境配置
  18. 使用多普达565(Dopod 565)几天以后的感受
  19. 用vim和Markdown, 将MySQL导出的备份转换为HTML格式的数据字典
  20. 1455 Oulipo

热门文章

  1. 无人驾驶感知篇之目标跟踪(十二)
  2. 运筹学读书笔记---Benders Decomposition
  3. Houdini 铁链结算制作
  4. 计算机无法转换输入发,电脑输入法切换不了怎么办 输入法怎么设置快捷键图文教程...
  5. ATmega32U4 芯片介绍 相关开源应用
  6. 第五届浙江省网络安全竞赛预赛部分wp
  7. 【财务】FMS财务管理系统---存货管理
  8. 开源服务器监控工具——zabbix(二)
  9. 下载 Android Studio 最新版本
  10. Note: Time clocks and the ordering of events in a distributed system