字体

无衬线字体、有衬线字体

各平台默认字体

在不同操作系统、不同游览器里面默认显示的字体是不一样的，并且相同字体在不同操作系统里面渲染的效果也不尽相同。

CSS Font Stackopen in new window 可知道字体在 Windows 和 Mac 下的预装比例。

Windows 下

宋体（SimSun）: Windows 下大部分游览器的默认字体，宋体在小字号下（如12px、14px）的显示效果还可以接受，但是字号一大就非常糟糕了，所以使用的时候要注意。
微软雅黑（Microsoft Yahei）: 从 Vista 开始，微软提供了这款新的字体，一款无衬线的黑体类字体，并且拥有 Regular、Bold 两种粗细的字重，显著提高了字体的显示效果。现在这款字体已经成为 Windows 游览器中最值得使用的中文字体。从 Win8 开始，微软雅黑又加入了 Light 这款更细的字重，对于喜欢细字体的设计、开发人员又多了一个新的选择。
Arial: Windows 平台上默认的无衬线西文字体（为什么要说英文字体后面会解释），有多种变体，显示效果一般。
Tahoma: 十分常见的无衬线西文字体，被采用为 Windows 2000、Windows XP、Windows Server 2003 及 Sega 游戏主机 Dreamcast 等系统的预设字型，显示效果比Arial要好。
Verdana: 无衬线西文字体，优点在于它在小字上仍结构清晰端整、阅读辨识容易。
其他：Windows 下默认字体列表：微软官网open in new window、维基百科open in new window、Office字体open in new window

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

Mac OS 下

华文黑体（STHeiti）、华文细黑（STXihei）: 属于同一字体家族系列，OS X 10.6 之前的简体中文系统界面默认字体，也是目前 Chrome 游览器下的默认字体，有 Regular 和 Bold 两个字重，显示效果可以接受，华文细黑也曾是我最喜欢的字体之一。
黑体-简（Heiti SC）: 从 OS X 10.6 开始，黑体-简代替华文黑体用作简体中文系统界面默认字体，苹果生态最常用的字体之一，包括 iPhone、iPad 等设备用的也是这款字体，显示效果不错，但是喇叭口设计遭人诟病。
冬青黑体（Hiragino Sans GB）: 听说又叫苹果丽黑，日文字体Hiragino KakuGothic的简体中文版，简体中文有 Regular 和 Bold 两种，冬青黑体是一款清新的专业印刷字体，小字号时足够清晰，拥有很多人的追捧。
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 下默认字体列表维基百科open in new window

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

Android 系统下

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

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

额外补充

原生 Android
- 4.0+:
  - 英文: Roboto
  - 中文: Noto Sans CJK，即思源黑体
- 4.0-:
  - 英文: Droid Sans
  - 中文: Droid Sans Fallback
其他第三方 Android 系统
- 一致选择默认的无衬线字体

iOS 系统下

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

额外补充

iOS 9+
- 英文:
- 中文: PingFang SC，即简体苹方。看需要，如果要命中对应苹方字体的话，直接写 PingFang 不带引号
- Safari 开始支持 -apple-system 参数
iOS 4.0+
- 英文: Helvetica Neue
- 中文: STHeiTi，即华文黑体
iOS 4.0-:
- 英文: Helvetica

Linux 下

文泉驿点阵宋体：类似宋体的衬线字体，一般不推荐使用。
文泉驿微米黑：几乎是 Linux 社区现有的最佳简体中文字体。

如何优雅的选择字体（设置 font-family）

内容复制自：如何优雅的选择字体(font-family)open in new window

字体的中英文写法

我们在操作系统中常常看到宋体、微软雅黑这样的字体名称，但实际上这只是字体的显示名称，而不是字体文件的名称，一般字体文件都是用英文命名的，如SimSun、Microsoft Yahei。在大多数情况下直接使用显示名称也能正确的显示，但是有一些用户的特殊设置会导致中文声明无效。

因此，保守的做法是使用字体的字体名称（英文）或者两者兼写。如下示例：

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

1
2

声明英文字体

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

font-family: Arial, "Microsoft YaHei";

照顾不同的操作系统

英文、数字部分

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

font-family: Helvetica, Tahoma, Arial;

中文部分

在 Windows 下，微软雅黑为大部分人最常使用的中文字体，由于很多人安装 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, "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;

其他一些注意点

字体何时需要添加引号

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

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

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

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

PS: 尽量不要使用中文字体名称，而应该使用中文字体文件名称。

引用外部字体

大多数的中文字体由于版权原因不能随意使用，这里推荐一个免版权而且漂亮的中文字体思源黑体，该字体为 Adobe 与 Google 推出的一款开源字体，有七种字体粗细（ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy），完全支持日文、韩文、繁体中文和简体中文，字形优美。

鉴于中文字体的体积比较大（一般字库全一点的中文字体动辄几 Mb），所以较少人会使用外部字体，如果真的需要引入，也可以考虑通过工具根据页面文字的使用多少单独生成中文字体，以减小文件大小。

font-family 最佳实践

待研究

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
}

1
2
3

iOS 9+ 上，Safari 能识别 -apple-system 参数，Chrome 使用 BlinkMacSystemFont

参考:

github- AlloyTeam 字体设置open in new window

字体结构

ascender: 字体的上端，如：b, d, h, l, t, k
- ascender line，上伸线
descender: 字体的下端，如：j, q, g
- descender line，下伸线
counter: 中空的部分，如：O, o, P, p, D
baseline: 基线，字体会倚靠在baseline上，也是与其他文字或图片排版所依据的基础
x-height: 小写x的高度
cap height: 即capital height，从baseline到大写字母最上边的高度，也用来决定一个字的大小（即大写字母的高度）
descender height：descender（距离baseline）的长度，會影响字体的风格与姿态

对不同字体设置font-size: 100px，会根据字体的ascender和descender计算出文字高度，不同字体的文字高度可能是不一样的，通常都会大于100px。而这个文字高度决定了 HTML 元素的content-area（内容区域），即content-area的高度是由font-size和字体自身的特性决定的。

深入理解 CSS：字体度量、line-height 和 vertical-align

请详细阅读本文深入理解 CSS：字体度量、line-height 和 vertical-align

深入理解 font-weight

参考文章深入了解font-weightopen in new window，其解释了：

为什么 UI 在设计时，字重最好只选用bold、regular（normal）？
字体的字重不存在时，如何匹配别的字重？
字体合成font-synthesisopen in new window属性

font-face

张鑫旭 - 真正了解CSS3背景下的@font face规则open in new window

该文章里解释了font-family、src、font-style、font-weight、unicode-range等属性的使用。

src 里文件格式的选择

Using @font-face这篇文章里介绍了如何最大程度的兼容各个浏览器:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

1
2
3
4
5
6
7
8
9

其中，.eotopen in new window仅 IE 支持，.svgopen in new window主要为了兼容老版本的 iOS。

移动端的选择

字体格式	iOS Safari	Android Browser	CAN I use
`.ttf`	4.2+	2.2+	https://caniuse.com/#feat=ttfopen in new window
`.woff`	5+	4.4+	https://caniuse.com/#feat=woffopen in new window
`.woff2`	12+（10-11.1 部分支持）	5+	https://caniuse.com/#feat=woff2open in new window

因此在移动端上若只选择一种，则可以选择.ttf和.woff，但是.woff比.ttf体积小 40%，而woff2又比woff体积小 30%，因此在移动端上还是同时使用.woff2、woff和.ttf比较好。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf')  format('truetype'),
}

1
2
3
4
5
6

# 字体

# 无衬线字体、有衬线字体

# 各平台默认字体

# Windows 下

# Mac OS 下

# Android 系统下

# 额外补充

# iOS 系统 下

# 额外补充

# Linux 下

# 如何优雅的选择字体（设置 font-family）

# 字体的中英文写法

# 声明英文字体

# 照顾不同的操作系统

# 英文、数字部分

# 中文部分

# 中英文整合写法

# 注意向下兼容

# 补充字体族名称

# 其他一些注意点

# 字体何时需要添加引号

# 引用外部字体

# font-family 最佳实践

# 字体结构

# 深入理解 CSS：字体度量、line-height 和 vertical-align

# 深入理解 font-weight

# font-face

# src 里文件格式的选择

# 移动端的选择

字体

无衬线字体、有衬线字体

各平台默认字体

Windows 下

Mac OS 下

Android 系统下

额外补充

iOS 系统下

额外补充

Linux 下

如何优雅的选择字体（设置 font-family）

字体的中英文写法

声明英文字体

照顾不同的操作系统

英文、数字部分

中文部分

中英文整合写法

注意向下兼容

补充字体族名称

其他一些注意点

字体何时需要添加引号

引用外部字体

font-family 最佳实践

字体结构

深入理解 CSS：字体度量、line-height 和 vertical-align

深入理解 font-weight

font-face

src 里文件格式的选择

移动端的选择