我们知道,不同的操作系统,不同的浏览器,页面字体的显示和渲染存在差异.

那么如何设置font-family,能够使字体在不同的环境下,也拥有好的展示效果?

1.操作系统中字体默认的字体

windows:

 

  • 宋体（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可以获得更多系统版本支持，显示效果也相差无几，可以接受。

详细的资料可参考连接--如何优雅的选择字体

因此比较好的 font-family 的设置 应该是这样:

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

在项目中,如果要兼容不同的系统,可以这样写

 




@font-face {
 2     font-family: 'localsans-win-light';
 3     src: local('Microsoft YaHei Light'),local('Microsoft JhengHei');
 4 }
 5 @font-face {
 6     font-family: 'localsans-win-bold';
 7     font-weight: bold;
 8     src: local('Microsoft YaHei Bold'),local('Microsoft YaHei');
 9 }
10 @font-face {
11     font-family: 'localsans-win';
12     src: local('Microsoft YaHei');
13 }
14 @font-face {
15     font-family: 'localsans-mac-light';
16     src: local('PingFangSC-Light'),local('HiraginoSansGB-W3');
17 }
18 @font-face {
19     font-family: 'localsans-mac';
20     src: local('PingFangSC-Regular'),local('HiraginoSansGB-W3');
21 }
22 @font-face {
23     font-family: 'localsans-mac-bold';
24     src: local('PingFangSC-Semibold'),local('HiraginoSansGB-W6');
25 }
26 html,
27 body {
28     margin: 0;
29     padding: 0;
30     height: 100%;
31     font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
32 }


 

有些情况需要注意:

  • 当此属性定义的是全局样式时，对于表单类的标签就不会生效，还需要再次定义如： body {font-family: “Microsoft YaHei”;}对表单input就不生效， 还需要定义一个input {font-family: “Microsoft YaHei”;}才可以。
  • 本地计算机不存在微软雅黑字体，有的系统默认没有微软雅黑，则一般默认为宋体，只要下载一个微软雅黑字体，安装后即可。
  • .还有一个是字符集问题，建议把中文font-family:” 微软雅黑”;改为font-family: “Microsoft YaHei”;字符集申明一下UTF-8或GB2312。