我们知道,不同的操作系统,不同的浏览器,页面字体的显示和渲染存在差异.
那么如何设置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：无衬线字体，优点在于它在小字上仍结构清晰端整、阅读辨识容易。
- 结论：
微软雅黑为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等最新系统上。 -
结论：目前
苹方和San Francisco为苹果推出的最新字体，显示效果也最为优雅，但只有最新系统才能支持，而黑体-简和Helvetica可以获得更多系统版本支持，显示效果也相差无几，可以接受。
详细的资料可参考连接--如何优雅的选择字体
因此比较好的 font-family 的设置 应该是这样:
ont-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;在项目中,如果要兼容不同的系统,可以这样写
1
@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。