如何优雅的选择字体(font-family)

你们都知道，在不一样操做系统、不一样游览器里面默认显示的字体是不同的，而且相同字体在不一样操做系统里面渲染的效果也不尽相同，那么如何设置字体显示效果会比较好呢？下面咱们逐步的分析一下：

 

1、首先咱们看看各平台的默认字体状况

 

一、Window下：

·宋体（SimSun）：Win下大部分游览器的默认字体，宋体在小字号下（如12px、14px）的显示效果还能够接受，可是字号一大就很是糟糕了，因此使用的时候要注意。

·微软雅黑（"Microsoft Yahei"）：从 Vista 开始，微软提供了这款新的字体，一款无衬线的黑体类字体，而且拥有Regular、Bold 两种粗细的字重，显著提升了字体的显示效果。如今这款字体已经成为Windows游览器中最值得使用的中文字体。从Win8开始，微软雅黑又加入了 Light 这款更细的字重，对于喜欢细字体的设计、开发人员又多了一个新的选择。

·Arial：Win平台上默认的无衬线西文字体（为何要说英文字体后面会解释），有多种变体，显示效果通常。

·Tahoma：十分常见的无衬线字体，被采用为Windows 2000、Windows XP、Windows Server 2003及Sega游戏主机Dreamcast等系统的预设字型，显示效果比Arial要好。

·Verdana：无衬线字体，优势在于它在小字上仍结构清晰端整、阅读辨识容易。

·其余：Windows 下默认字体列表：微软官网、维基百科、Office字体

结论：微软雅黑为Win平台上最值得选择的中文字体，但非游览器默认，须要设置；西文字体的选择以Arial、Tahoma等无衬线字体为主。

二、Mac OS下：

·华文黑体（STHeiti）、华文细黑（STXihei）：属于同一字体家族系列，OS X 10.6 以前的简体中文系统界面默认字体，也是目前Chrome游览器下的默认字体，有 Regular 和 Bold 两个字重，显示效果能够接受，华文细黑也曾是我最喜欢的字体之一。

·黑体-简（Heiti SC）：从 10.6 开始，黑体-简代替华文黑体用做简体中文系统界面默认字体，苹果生态最经常使用的字体之一，包括iPhone、iPad等设备用的也是这款字体，显示效果不错，可是喇叭口设计遭人诟病。

·冬青黑体（ Hiragino Sans GB ）：据说又叫苹果丽黑，日文字体Hiragino KakuGothic的简体中文版，简体中文有 常规体和 粗体 两种，冬青黑体是一款清新的专业印刷字体，小字号时足够清晰，拥有不少人的追捧。

·Times New Roman：Mac平台Safari下默认的字体，是最多见且广为人知的西文衬线字体之一，众多网页浏览器和文字处理软件都是用它做为默认字体。

·Helvetica、Helvetica Neue：一种被普遍使用的传奇般的西文字体（这货还有专门的记录片呢），在微软使用山寨货的Arial时，乔布斯却花费重金得到了Helvetica苹果系统上的使用权，所以该字体也一直伴随着苹果用户，是苹果生态中最经常使用的西文字体。Helvetica Neue为Helvetica的改善版本，且增长了更多不一样粗细与宽度的字形，共拥有51种字体版本，极大的知足了平常的使用。

·苹方（PingFang SC）：在Mac OS X EL Capitan上，苹果为中国用户打造了一款全新中文字体--苹方，去掉了为人诟病的喇叭口，总体造型看上去更加简洁，字族共六枚字体：极细体、纤细体、细体、常规体、中黑体、中粗体。

·San Francisco：一样是Mac OS X EL Capitan上最新发布的西文字体，感受和Helvetica看上去差异不大，目前已经应用在Mac OS 10.11+、iOS 9.0+、watch OS等最新系统上。

·其余：Mac下默认字体列表：苹果官网、维基百科

·结论：目前苹方和San Francisco为苹果推出的最新字体，显示效果也最为优雅，但只有最新系统才能支持，而黑体-简和Helvetica能够得到更多系统版本支持，显示效果也相差无几，能够接受。

 

三、Android系统：

·Droid Sans、Droid Sans Fallback：Droid Sans为安卓系统中默认的西文字体，是一款人文主义无衬线字体，而Droid Sans Fallback则是包含汉字、日文假名、韩文的文字扩展支持。

·结论：Droid Sans为默认的字体，并结合了中英文，无需单独设置。

 

四、iOS系统：

·iOS系统的字体和Mac OS系统的字体相同，保证了Mac上的字体效果，iOS设备就没有太大问题。

 

五、Linux：

·文泉驿点阵宋体：相似宋体的衬线字体，通常不推荐使用。

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

2、选择字体须要注意的问题

 

一、字体的中英文写法：

咱们在操做系统中经常看到宋体、微软雅黑这样的字体名称，但实际上这只是字体的显示名称，而不是字体文件的名称，通常字体文件都是用英文命名的，如SimSun、Microsoft Yahei。在大多数状况下直接使用显示名称也能正确的显示，可是有一些用户的特殊设置会致使中文声明无效。
所以，保守的作法是使用字体的字体名称（英文）或者二者兼写。以下示例：

font-family: STXihei, "Microsoft YaHei";
font-family: STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”;

二、声明英文字体：

绝大部分中文字体里都包含英文字母和数字，不进行英文字体声明是没有问题的，可是大多数中文字体中的英文和数字的部分都不是特别漂亮，因此建议也对英文字体进行声明。
因为英文字体中大多不包含中文，咱们能够先进行英文字体的声明，这样不会影响到中文字体的选择，所以优先使用最优秀的英文字体，中文字体声明则紧随其次。以下示例：

 

font-family: Arial, "Microsoft YaHei";

三、照顾不一样的操做系统：

·英文、数字部分：在默认的操做系统中，Mac和Win都会带有Arial, Verdana, Tahoma等几个预装字体，从显示效果来看，Tahoma要比Arial更加清晰一些，所以字体设置Tahoma最好放到前面，当找不到Tahoma时再使用Arial；而在Mac中，还拥有一款更加漂亮的Helvetica字体，因此为了照顾Mac用户有更好的体验，应该更优先设置Helvetica字体；Android系统下默认的无衬线字体就能够接受，所以无需单独设置。最后，英文、数字字体的最佳写法以下：

 

font-family: Helvetica, Tahoma, Arial;

·中文部分：在Win下，微软雅黑为大部分人最常使用的中文字体，因为不少人安装Office的缘故，Mac电脑中也会出现微软雅黑字体，所以把显示效果不错的微软雅黑加入到字体列表是个不错的选择；一样，为了保证Mac中更为优雅字体苹方（PingFang SC）、黑体-简（Heiti SC）、冬青黑体（ Hiragino Sans GB ）的优先显示，须要把这些字体放到中文字体列表的最前面；同时为了照顾到Linux操做系统的体验，还须要添加文泉驿微米黑字体。最后，中文字体部分最佳写法以下：

 

font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";

中英文整合写法：

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

 

四、注意向下兼容

若是还须要考虑旧版本操做系统用户的话，不得不加上一些旧版操做系统存在的字体：Mac中的华文黑体、冬青黑体，Win中的黑体等。一样按照显示效果排列在列表后面，写法以下：

font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei";

 

加入了 STXihei（华文细黑）和 SimHei（黑体）。

五、补充字体族名称

字体族大致上分为两类：sans-serif（无衬线体）和serif（衬线体），当全部的字体都找不到时，咱们可使用字体族名称做为操做系统最后选择字体的方向。通常非衬线字体在显示器中的显示效果会比较好，所以咱们须要在最后添加 sans-serif，写法以下：。

 

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

 

3、咱们看一下大公司的常见写法（2016.07查看）

 

一、小米

font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;

小米公司优先使用Helvetica Neue这款字体以保证最新版本Mac用户的最佳体验，选择了Arial做为Win下默认英文字体及Mac的替代英文字体；中文字体方面首选了微软雅黑，而后选择了冬青黑体及黑体-简做为Mac上的替代方案；最后使用文泉驿微米黑兼顾了Linux系统。

二、淘宝

鉴于淘宝网改版频率较频繁，这里截图保存了一下，点此查看。

font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;

其实从图中明显看出淘宝网的导航及内容有着大量的衬线字体，鉴于淘宝网站大部分字号比较小，显示效果也还能够接受。代码中能够看出淘宝使用了Tahoma、Arial做为首选英文字体，中文字体首选了冬青黑体，因为Win下没有预装该款字体，因此显示出了后面的宋体（5b8b4f53为汉字宋体用 unicode 表示的写法，不用SimSun是由于 Firefox 的某些版本和 Opera 不支持 SimSun的写法）

三、简书

font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

 

自认为简书的阅读体验很棒，咱们看看简书所用的字体，简书优先选择了lucida家族的系列字体做为英文字体，该系列字体在Mac和Win上都是预装的，而且有着不俗的表现；中文字体方面将冬青黑体做为最优先使用的字体，一样考虑了Linux系统。

各大公司的字体设置大同小异，这里再也不一一举例查看，有兴趣的能够本身多多查看。

 

4、其余的一些注意点

 

一、字体什么时候须要添加引号

当字体具体某个取值中如有一种样式名称包含空格，则须要用双引号或单引号表示，如：

font-family: "Microsoft YaHei", "Arial Narrow", sans-serif;

若是书写中文字体名称为了保证兼容性也会添加引号，如：

font-family: "黑体-简", "微软雅黑", "文泉驿微米黑";

 

二、引用外部字体

大多数的中文字体因为版权缘由不能随意使用，这里推荐一个免版权并且漂亮的中文字体思源黑体，该字体为Adobe与Google推出的一款开源字体， 有七种字体粗细（ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy），彻底支持日文、韩文、繁体中文和简体中文，字形优美，依稀记得小米公司好像有使用过。
鉴于中文字体的体积比较大（通常字库全一点的中文字体动辄几Mb），因此较少人会使用外部字体，若是真的须要引入，也能够考虑经过工具根据页面文字的使用多少单独生成中文字体，以减少文件大小。

5、最后，推荐写法

因为每一个人的审美不同，钟爱的字体也会有全部不一样，这里给出我我的的经常使用写法：

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

 

另外推荐两个github上的关于中文字体和排版的项目：

Fonts.css -- 跨平台中文字体解决方案

typo.css -- 中文网页重设与排版：一致化浏览器排版效果

--参考资料

 

• 如何保证网页的字体在各平台都尽可能显示为最高质量的黑体？

• Web 中文字体应用指南

• "5b8b4f53"的意思