优雅的字体方案

以前设置字体希望在各个系统都能有比较好的阅读体验显，自己一直没有太深究，就抄了一些大的平台设置字体的方法，比如淘宝、微博啥的。完了总想有时间多做一些了解，想起来也会找资料看看，看了也总是忘记，觉得应该把看到好的资料记录下来，加深一下印象，忘记了就可以随时翻阅，省去了找资料的时间。因此，做了这个笔记。

推荐的自提方案如下：

font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;    

不想花费时间，就直接使用上述方案，不比往下看了。

---

  
没走开的话，就来叨叨为何推荐这样的字体方案。
  

字体族大体上分为两类：serif（衬线体）和 sans-serif（无衬线体）。
serif（衬线体），在字符笔画末端有叫做衬线的小细节，这些细节在大写字母中特别明显
sans-serif（无衬线体），在字符笔画末端没有任何细节，与serif字体相比，他们的外形更简单
我们用一张图看一下衬线和无衬线的区别：

serif.gif

其实网页可用的字体有5类：serif，sans-serif，monospace，fantasy，cuisive（其中monospace等宽字体，每个字母的宽度相等，通常用于计算机相关书籍中排版代码块；最后两种fantasy和 cuisive类字体，在各个浏览器中有明显的差异，在浏览器中不常用，就不多做深究了）。

1、serif衬线类

serif衬线类常用的字体有：

• Georgia: 基本上适合正文屏显的衬线字体，非Georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算OK。
• Times: Times是为了报纸而设计的，特点是可以在有限的空间塞进去更多的文字，笔画较弱，小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文，被骂得很惨之后换成了Georgia。

2、sans-serif无衬线类

sans-serif无衬线类常用的几种字体有：

• Helvetica: 被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。
• Arial: Helvetica的「克隆」，和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显示都正常。
• Lucida Family: Lucida Grande是Mac OS UI的标准字体，属于humanist风格，稍微活泼一点。Mac下的显示要比Win下好。
• Verdana: 专门为了屏显而设计的字体，humanist风格，在小字号下仍可以清楚显示，但是字体细节缺失严重，最好别做标题。
• Tahoma: 也是humanist风格，字体和Verdana有点像，但是略窄一些，counter略小，曾经是Windows的标准字体，Mac 10.5之后默认也有安装。
• Trebuchet MS: 为微软设计的一个humanist风格字体，个人觉得个性太过突出，用得不好会不搭。

上边说的是西文，在这里补充一下中文字体

3、中文字体

1、Window下：

• 宋体（SimSun）：Win下大部分游览器的默认字体，宋体在小字号下（如12px、14px）的显示效果还可以接受，但是字号一大就非常糟糕了，所以使用的时候要注意。
• 微软雅黑（"Microsoft Yahei"）：从 Vista 开始，微软提供了这款新的字体，一款无衬线的黑体类字体，并且拥有 Regular、Bold 两种粗细的字重，显著提高了字体的显示效果。现在这款字体已经成为Windows游览器中最值得使用的中文字体。从Win8开始，微软雅黑又加入了 Light 这款更细的字重，对于喜欢细字体的设计、开发人员又多了一个新的选择。

2、Mac OS 与 iOS系统：

• 苹方（PingFang SC）：在Mac OS X EL Capitan上，苹果为中国用户打造了一款全新中文字体--苹方，去掉了为人诟病的喇叭口，整体造型看上去更加简洁，字族共六枚字体：极细体、纤细体、细体、常规体、中黑体、中粗体。
• 冬青黑体（ Hiragino Sans GB ）：听说又叫苹果丽黑，日文字体Hiragino KakuGothic的简体中文版，简体中文有 常规体 和 粗体 两种，冬青黑体是一款清新的专业印刷字体，小字号时足够清晰，拥有很多人的追捧。
• 华文黑体（STHeiti）、华文细黑（STXihei）：属于同一字体家族系列，OS X 10.6 之前的简体中文系统界面默认字体，也是目前Chrome游览器下的默认字体，有 Regular 和 Bold 两个字重，显示效果可以接受，华文细黑也曾是我最喜欢的字体之一。
• 黑体-简（Heiti SC）：从 10.6 开始，黑体-简代替华文黑体用作简体中文系统界面默认字体，苹果生态最常用的字体之一，包括iPhone、iPad等设备用的也是这款字体，显示效果不错，但是喇叭口设计遭人诟病。

3、Android系统：

• Droid Sans、Droid Sans Fallback：Droid Sans为安卓系统中默认的西文字体，是一款人文主义无衬线字体，而Droid Sans Fallback则是包含汉字、日文假名、韩文的文字扩展支持，Droid Sans为默认的字体，并结合了中英文，无需单独设置。

4、Linux：

• 文泉驿微米黑：几乎是 Linux 社区现有的最佳简体中文字体。

这些通用的名称允许用户代理从相应集合中选择一款字体。浏览器对这个字体的解析还是有些差异

chrome下显示：

chrome.png

Firefox下显示：

firefox.png

IE下显示：

ie9.png

以上内容并非原创，原创内容出自：

• 如何优雅的选择字体(font-family)
• Web中常用字体介绍