By ptbsare

更新日期:

文章目录
  1. 1. 引言
  2. 2. 现状
  3. 3. 考虑理想的写法
    1. 3.1. Font-default
    2. 3.2. Font-mono
  4. 4. 测试效果
  5. 5. 最后

引言

　　对于网页设计中的字体设置，显然指定不同字体所排版出来的效果是不同的，而且对于不同的平台（Windows，Mac OS，Linux），操作系统所预装的字体也是各不相同，因此同一网页在不同平台上显示出来的效果也是不一样的。然而，这一问题的核心问题无非也就在于如何确定CSS中font-family的写法，因为浏览器就是依据font-family的值来确定所要使用的字体，从而使网页在不同平台上都能达到最好的显示效果。

现状

  • 第一种写法就是很通用和常见的写法：
    1
    font-family:sans-serif;
    sans-serif这种字体写法，就是让浏览器和操作系统自行选择该平台下所使用的字体。其实若采用这种写法，在多数平台上都能达到比较好的效果，而且写法简单，比较省心，比如在Mac OS下会自动采用华文细黑(10.6以下)或黑体-简(10.7以上)来显示中文字符，效果都很不错，在Linux下会采用文泉驿微米黑来显示，然而，我们有一个“猪一样的队友”–微软，在Windows下的浏览器则会采用中易宋体来显示中文字符，会让网页看着非常别扭，和你设计初衷相差比较大。因此，以至于我们接下来所有所作的努力都是为了照顾这位“猪一样的队友”。
  • 第二种写法
    1
    font-family:SimSun;
    国内许多网站由于种种原因（比如规避浏览器bug或前端设计师脑残加之许多开发者根本就不了解Windows以外的世界，不知道他们随手写上的SimSun会让OSX以及Linux用户感到多么地“不适”）而必须在CSS中写上SimSun（中易宋体，在Vista之前所有Windows的默认中文字体，俗称宋体），如果OSX用户里恰好又因为安装Office之类的原因安装了中易宋体，这个糟糕的字体就被显示出来了（这样的中文网站很多，许多开发者根本不知道font-family属性该怎么写，而有少数开发者确实是为了规避IE浏览器的弱智bug）。
  • 第三种写法
    用极其细致的列表来给不同操作系统指定不同的字体，以使尽量用上操作系统里可用的最佳字体。比如：
    1
    font-family:"Helvetica Neue", "Helvetica","Hiragino Sans GB","Microsoft YaHei", "WenQuanYi Micro Hei",Arial, sans-serif;
    对于这种写法，在OSX中则采用显示效果比较好的Hiragino Sans GB(苹果冬青黑)来显示中文字符，在Linux中采用WenQuanYi Micro Hei(文泉驿微米黑)来显示，在Windows中则采用效果较好的Microsoft YaHei(微软雅黑)来显示中文字符。

考虑理想的写法

  • 对于上述三种写法，要想达到最佳效果，显然我们要采用第三种写法，因此我们下面对第三种写法进行改进。
  • 对于一个网页，我们显然要让中文字符和英文字符的显示都能达到最佳效果。同时，一个网页的字体通常要分为两种样式：普通通用样式所用的字体（用于文章内容样式等普通样式）以及等宽样式字体（用于粘贴代码的样式以及其他要求整齐等宽的样式）。此处，我们将前者设定为font-default，后者设定为font-mono，两者分开来考虑写法。

Font-default

对于font-default，经过总结，我们采用如上写法即可：

1
font-default:"Helvetica Neue", "Helvetica","Hiragino Sans GB","Microsoft YaHei", "WenQuanYi Micro Hei",Arial, sans-serif;

这样英文字符和中文字符都有合适的字体匹配，因为多数英文字体中都不包含中文字符，所以英文字体在前，这样的话英文字符可以匹配到前面的英文字体，而中文字体就会按照顺序fallback到后面所选定的中文字体上，中英文都能达到很好的效果。
然而经网友反映，假若有部分在Windows平台上自行安装了苹果的Hiragino Sans GB字体，则按照上述配置就会把中文字符匹配到Hiragino Sans GB来显示而没有匹配到微软雅黑字体来显示。由于Hiragino Sans GB在Windows平台下的渲染效果并不是很理想，所以为了保险起见，去掉Hiragino Sans GB，即采用如下写法：

1
font-default:"Helvetica Neue","Microsoft YaHei", "WenQuanYi Micro Hei",Arial, sans-serif;

这样的话，对于OSX平台，中文字符则直接fallback到sans-serif上由操作系统所选择的华文细黑(10.6以下)或黑体-简(10.7以上)来显示，效果也比较好。
同时，此种写法在Android上被fallback为默认的中文字体Droid Sans Fallback，在Windows Phone上被fallback为默认的中文字体方正等线，在iOS上则被fallback为华文细黑，显示效果都比较不错。

Font-mono

对于等宽指定字体font-mono，考虑到等宽字体多用到粘贴代码的场合，并且现如今的程序代码还没有说遇到使用中文作为编程语言的，中文在代码中多用于程序注释，因此，等宽字体对英文字符的字体选定要求比较高，要求英文字符的宽度一致。
现有的英文等宽字体有这么几个评价普遍比较高：

  • Windows:Consolas ,Courier New
  • OSX:Consolas,Courier New

同时对于中文字体，考虑到在Windows平台上能拿得出手的也就微软雅黑字体了，而且微软雅黑的中文字符看起来比较整齐，比较美观同时OSX平台下让其直接fallback到monospace让操作系统和浏览器自行选择中文字符的等宽字体，但是又考虑到一些OSX用户也由于安装Office等原因安装了微软雅黑字体，但是微软雅黑在OSX下又实在不如自带的字体美观，因此不得不把OSX的monospace的fallback默认字体Heiti SC(黑体-简)提到微软雅黑前面，综上，我们可以写成如下形式：

1
font-mono:Monaco, Menlo, Consolas, Courier New, "Heiti SC", STHeiti, "Microsoft Yahei", monospace;

这样对于移动平台iOS,Android和Windows Phone上,倘若有相关字体则使用相关字体来显示等宽字符，倘若没有则都fallback到monospace让操作系统和浏览器自行选择等宽字体。

测试效果

Ubuntu 13.04 With Chrome 31.0.1650.57

Windows 8 With IE 10.0.9200

Android 4.1 With Chrome 37.0.2062.117

Mac OS X 10.8.2 With Safari 6.0.1.8536.26.14

iOS 8.1 (12B410) With Safari (600.1.4)

  • 由于手边暂时没有Windows Phone设备，因此暂时无法测试Windows Phone下的呈现效果，稍后补上测试效果。

最后

通过测试我们可以看到所选用的字体设置基本均发挥出了各个平台的最佳字体效果，同时也保证了同一网页在各个平台上所呈现出的效果和网页风格的一致性。
注意：在较低版本的IE中（如IE8）存在只要font-family中某个字体存在，就会完全无视掉它之后的字体，缺字用默认字体显示（也就是宋体）的BUG（著名的IE font-family fallback bug）,因此请Web前端开发者注意此点。

参考:
(http://www.zhihu.com/question/19911793)

文章评论

comments powered by Disqus
文章目录
  1. 1. 引言
  2. 2. 现状
  3. 3. 考虑理想的写法
    1. 3.1. Font-default
    2. 3.2. Font-mono
  4. 4. 测试效果
  5. 5. 最后