关于前端:Web-字体-fontfamily-浅谈

最近钻研各大网站的 font-family 字体设置，发现每个网站的默认值都不雷同，甚至一些大网站也犯了很显著的谬误，阐明字体还是有很大学识的，值的咱们好好钻研。

不同的操作系统、不同浏览器下内嵌的默认字体是不同的，谬误的字体设置会导致页面在不同环境渲染的凌乱，抉择一套适合的字体是打造优良网页的第一步。通过本文，咱们会介绍字体的知识点，并摸索在 PC 和 Mobile 两端该如何正确的设置字体。

serif(衬线)
sans-serif(无衬线)
monospace(等宽)
fantasy(梦幻)
cuisive(草体)

这些不是指某一个字体，而是一个字体族，是一系列字体的汇合。咱们接触最多的就是衬线字体和无衬线字体。

serif(衬线字体) & sans-serif(无衬线字体)

Serif 的意思是，在字的笔划开始及完结的中央有额定的装璜，而且笔画的粗细会有所不同。衬线字体的格调都比较突出，常见的衬线字体有 Times New Roman、 宋体。

Sans Serif 字体没有这些额定的装璜，笔划粗细大抵差不多，字形端庄，横平竖直，常见的无衬线字体有 Tahoma、Verdana、Arial、Helvetica、 苹方 、 微软雅黑 等等。

monospace(等宽字体)

等宽字体是指字符宽度雷同的字体，通常用于编辑器以及技术文章的代码块中。courier 是最常见的等宽字体，而对于中文每个汉子都是等宽的。

fantasy(梦幻字体) & cuisive(草书字体)

在浏览器中应用的场景不多。

设置元素的字体，能够同时指定多个，如果浏览器不反对第一个字体，则会尝试下一个，能够设置字体或字体系列。

如：font-family: Arial, sans-serif;

如果不设置 font-family 则应用浏览器默认字体，如果设置的 font-family 有效，也会 fallback 到浏览器的默认字体。

苹果零碎反对的一种西文无衬线字体，是苹果生态中最罕用的一套西文字体。Helvetica Neue是 Helvetica 字体改善版本，减少了更多不同粗细与宽度的字形。

是为了与 Helvetica 竞争而设计的无衬线西文字体，表现形式和 Helvetica 相似，在不同零碎的浏览器都反对，兼容性十分好。

一种无衬线字体，间距较小，在不同零碎的浏览器都反对，兼容性良好，能够解决 Helvetica 和 Arial 所为人诟病的毛病，比方大写的 I 和小写的 L 难以分辨。

苹果于 2017 年推出一种无衬线字体，也是目前苹果零碎的默认西文字体，相比于 Helvetica 字体，San Francisco的字体格调更加简洁，缩小了一些润饰的细节，反对符号的整体居中，比方工夫显示，之前的 Helvetica 的冒号是不居中的。

最低兼容版本：ios9、macOS10.11

苹果专为中国用户打造的一个中文无衬线字体，在 2017 年和 San Francisco 一起推出，SC 代表简体，同时还有台湾繁体和香港繁体，整体造型简洁好看，是苹果零碎默认的中文字体。

最低兼容版本：ios9、macOS10.11

苹果零碎中较早的中文无衬线字体，为了兼容旧版 macOS 零碎，咱们个别用它们作为苹方字体的 fallback。

windows 零碎下的一种无衬线西文字体，也是 windows 零碎的默认西文字体。

Windows 零碎默认的中文字体，也是一套无衬线字体。macOS 上的浏览器大都预装微软雅黑，然而 safari 浏览器没有。

ios 和 android 零碎不反对微软雅黑，所以设置挪动端字体时能够疏忽微软雅黑。

一种中文衬线字体，windows 和 macOS 都有反对，字体偏瘦，格调显著。

宋体也是 windows XP 及更早零碎的默认中文字体。

Linux 零碎下默认中文字体，个别为了兼容 Linux 零碎才会设置这个字体。

Android 零碎的默认西文字体，也是一种无衬线字体

Android 零碎的默认中文字体，也是一种无衬线字体，由 google 推出的一款开源字体。

苹果产品的文字表情，在 Mac 和 iOS 零碎中到处都能够看到，也是咱们接触的最多的 Emoji 表情。

Windows10 零碎中的 Emoji 表情，黑描边格调，没有苹果的圆润和质感。

Google 推出的表情，和苹果的较为相似，更加扁平。

默认字体分为零碎默认字体和浏览器默认字体，这两者是不同的。

这里咱们探讨的是浏览器默认字体，零碎默认字体会在上面的 system-ui 中介绍。

当没有各元素指定 font-family 或者设置的 font-family 有效时，会 fallback 到浏览器默认字体。

PC 端

PC 端的浏览器反对设置不同的默认字体。

下图是 chrome 的配置选项，规范字体就是默认字体，当 font-family 属性没有设置时会启用这个字体。

因为 Arial 是西文字体，对中文有效，浏览器会抉择适合的中文字体，在 Windows 上个别为微软雅黑，在 macOS 个别为苹方。然而局部浏览器会依据默认字体的格调抉择近似的中文字体，Arial 是无衬线字体，浏览器也会抉择一种无衬线字体适配中文，如果默认字体是衬线字体，那么浏览器就会抉择一种衬线中文字体，为了抹平这种差别，咱们通常在 font-family 最初设置 sans-serif 指定无衬线字体作为兜底。

挪动端

挪动端浏览器通常不反对指定默认字体。

ios 的默认中文字体为苹方，当 lang 设置为 zh-CN，西文也是苹方。当 lang 不设置或者设置为en 时，西文默认字体为Times New Roman，一种衬线字体。

<!DOCTYPE html>
<html lang='zh-CN'>
...

android 的字体略微简单，它的的默认字体为 西文：Roboto，中文：Noto Sans (思源黑体)，但不同厂商可能会应用自定义的字体，比方小米局部手机应用的是小米兰亭。

android 端 lang 设置为 zh-CN 或en时体现也有可能不同，尽管都是无衬线字体，但差别很显著。即使 lang 都设置为zh-CN，不同的安卓机上的默认西文字体体现也有可能是不同的，一个字形容：乱。

以上提到的挪动端系统版本：ios9+ android4+，更低版本的零碎不再兼容了

正是因为浏览器默认字体的简单体现出设置 font-family 的重要性。

system-ui是一种通用字体系列，它抉择以后操作系统下的默认零碎字体，它的劣势在于和以后零碎应用的字体相匹配，能够让 Web 页面和 App 格调看起来更对立。

应用形式

font-family: system-ui;

兼容性

system-ui推出的工夫较晚，但兼容性比拟不错，目前支流的浏览器都曾经反对。

下图是 Can I Use 上统计的兼容信息

-apple-system
-apple-system是 system-ui 的兼容写法，只在 ios 和 macOS 上的 safari、Firefox、webview 等环境下反对。

BlinkMacSystemFont
也是 system-ui 的兼容写法，只在 macOS chrome 下反对，次要针对 chrome 53-55 版本

成果

在 ios 和 macOS 上，system-ui指向的中文字体为苹方，西文字体为San Francisco。android 零碎下中文通常为 Noto Sans (思源黑体)，西文字体为 Roboto。windows 零碎上个别为微软雅黑，然而在局部 windows 上的字体会呈现问题，所以 windows 零碎上不倡议应用 system-ui。

在现行支流终端设备中，无衬线体比有衬线体更易读，无衬线体更适宜作为网页的默认全局字体设置，所以 sans-serif 个别用在字体定义的最初作为兜底。

PC 端浏览器能够在设置中指定 sans-serif 字体。

挪动端浏览器不能在设置中指定 sans-serif 字体，它们会依据 lang 指定的语言环境抉择适合的字体，和 system-ui 指定的字体不肯定雷同。

每个零碎都会带有无衬线字体，所以 sans-serif 个别放在最初，sans-serif之后的字体都不会失效，除了 Emoji 字体。

在介绍字体规定前，有几点是须要留神的：
1、不同平台，预置的字体并不相同。比方 Helvetica 和苹方也只有苹果零碎内置，微软雅黑只有 windows 零碎内置，android 和 iOS 零碎内置的字体各不相同。

2、字体是有版权的，然而如果没有援用内部字体文件（如 Web font 或者内嵌到 App 中），而仅仅是在 CSS 中指定字体名称，不须要购买受权，因为其只是一段申明，示意冀望浏览器优先应用某种字体渲染文本。

3、中文网站波及两种文字类型：西文字体和中文字体，西文字体包含英文数字等，不包含中文，然而中文字体个别包含英文和数字，所以要先设置西文字体，后设置中文。

4、如果字体蕴含空格或者是中文字体，须要增加引号。

5、大部分字体全名中会蕴含字体粗细、斜体（italic）、长体（condensed）等具体属性，但个别不倡议间接应用，字体的格调应该在 CSS 中通过 font-weight、font-style、font-stretch 等属性指定，由浏览器决定理论渲染的字体。

6、font-family 属于可继承属性，全局的 font-family 个别设置在 body 元素上。

咱们能够总结字体定义的大略规定如下：
1、西文在前，中文在后
中文字体大多都蕴含西文，但西文的局部又不难看，而西文不蕴含中文，通常先定义西文后定义中文以达到更优的显示成果。

2、优先应用 system-ui
system-ui应用以后零碎的默认字体，让 web 页面和操作系统的格调对立，体验更好。

3、兼顾不同的操作系统
抉择字体的时候要思考不同的操作系统，还须要思考旧版本操作系统的用户。

即使是同一个字体在不同的操作下也会有轻微的差异，所以咱们要尽量做到雷同零碎应用同一种字体，保障同一个零碎下的字体一致性。对于不同零碎尽量保障字体格调靠近，比方都应用无衬线字体。

为了保障苹果零碎中应用更优雅的中文字体，优先申明苹方字体, 对于不反对苹方的低版本 macOS，应用 Hiragino Sans GB(冬青黑体) 字体做适配。

如果须要兼容 Linux 零碎，还须要增加 WenQuanYi Micro Hei(文泉驿微米黑) 字体。

如果须要兼容不同平台的表情符号，个别在 sans-serif 后增加"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"。

4、以 serif 或 sans-serif 字体族结尾
为了保障在各种不同环境或条件下显示失常，咱们个别将sans-serif 放在字体的前面，非衬线字体在显示器中的显示成果更好。

5、简洁实用
字体设置并不是越多越好，在能满足设计需要的状况下尽量简洁。雷同零碎下中西文字体各有一个 fallback 即可，不须要太多。

通过字体的知识点和字体设置标准介绍，咱们总结出全局默认字体的设置形式。

兼容版本：ios9+、android4+

举荐写法：

font-family: system-ui, -apple-system, Arial, sans-serif;

解读：优先应用 system-ui，应用Arial 做西文字体的 fallback 是因为它和 Helvetica 字体类似，并且在 ios 和 android 支持性很好。

举荐写法 1：
macOS 零碎优先应用零碎字体

font-family: -apple-system, BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

windows 系统对 system-ui 兼容性不好，所以只有

举荐写法 2：
指定字体

font-family: Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

windows 零碎电脑屏幕分辨率广泛不高，Tahoma字体在小字号下构造清晰端整、浏览辨识容易，在不同操作系统支持性好，所以作为首选字体，如果零碎没有预装 Tahoma，则应用Arial 作为代替。但两者差异不大，Arial优先级提前也行。

须要须要兼容 Linux 零碎和表情符号，能够增加 WenQuanYi Micro Hei 和Emoji字体，如：

font-family: -apple-system, BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

如想突出 macOS 和 windows 的字体特色，能够在 Tahoma 后面设置 Helvetica 或Segoe UI为首选字体，如：

font-family: "Helvetica Neue", "Segoe UI", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

留神：
字体的设置没有固定规范，须要依据业务状况进行定夺，以上只是举荐写法，如果设计师有要求能够在此基础上进行改变。

当给某个元素设置了 font-faimily 后，全局默认字体则对这个元素有效，这时也要思考字体兼容问题，最好指定一个 fallback 字体，并以 sans-serif 结尾。

div {font-faimiy: "PingFang SC", sans-serif;}

首先申明，以下仅为个人观点，如有谬误欢送指出????

以下数据取值工夫：2020-11-25

淘宝首页

tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif

\5b8b\4f53为宋体的 Unicode 编码，这样能够无效的防止浏览器解释 CSS 代码时候呈现乱码的问题。
淘宝首页的默认字体十分简洁，然而在 macOS 上应用的中文字体为无衬线的冬青黑体，而在 windows 上应用的是衬线字体宋体，两个零碎字体体现差别还是很显著的，可能他们有本人的思考。

京东首页

Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif

京东首页应用微软雅黑作为首选字体，这样中英文都会为微软雅黑，在 macOS safari 默认是不反对微软雅黑所以会 fallback 到 Heiti SC(黑体)，而黑体作为较早版本 macOS 的默认中文字体因为喇叭口设计被诟病已久。当然京东这么设置必定是有他们的思考，然而中文字体放在tahoma、arial 等西文字体前还是不倡议的。

天猫首页

"Microsoft YaHei",SimSun,'\5b8b\4f53',sans-serif

SimSun也是宋体

天猫首页默认字体设置和京东相似，首选中英文都是微软雅黑，下面说到过 macOS safari 默认是不反对微软雅黑，所以会 fallback 到宋体，宋体是衬线字体，导致 macOS 上其余浏览器和 safari 浏览器字体差别很大。

下图别离为 macOS10.14.5 下，chrome 和 safari 的成果

腾讯网首页

'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif

腾讯网首页也是以微软雅黑作为中西文首选字体，并且在不同零碎上都有相应的 fallback，实践上是不错的，但还是那句话，除非设计师或业务须要，不倡议以中文字体结尾。

新浪微博

Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif

新浪微博的默认字体集体感觉是十分好的。

掘金首页

-apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial

掘金这里犯了一个非常明显的谬误，在 sans-serif 后定义了其它中英文字体，因为 sans-serif 后定义的中英文字体都是有效的，掘金作为大神星散的中央，犯这么低级的谬误切实不应该。

segmentfault 首页

-apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft Yahei",sans-serif

集体感觉很好。

知乎首页

-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif

Source Han Sans SC、Noto Sans CJK SC这两个都是思源黑体，尽管是开源字体，然而在大部分零碎中都没有内置，这里设置是不是没必要？有晓得的同学能够解答一下吗？

头条首页

PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,Helvetica Neue,Arial,sans-serif

也是如同下面提到的，Helvetica Neue,Arial等西文字体倡议放在后面。

在此重申，以上仅是集体教训观点，如有谬误欢送指出????

Web 字体 font-family 再探秘
你该晓得的字体 font-family
字体，以及 font-family
如何优雅的抉择字体 (font-family)
从 Web 字体谈起——默认字体款式设置
PingFang SC 不应该作为挪动端网页字体的首选项
iOS 9 字体的介绍与应用

前言

字体基础知识

字体的分类

serif(衬线字体) & sans-serif(无衬线字体)

monospace(等宽字体)

fantasy(梦幻字体) & cuisive(草书字体)

font-family 属性

常见字体介绍

Helvetica

Arial

Tahoma

San Francisco

PingFang SC(苹方 - 简)

Hiragino Sans GB(冬青黑体)、Heiti SC(黑体)

Segoe UI

Microsoft YaHei(微软雅黑)

宋体

WenQuanYi Micro Hei(文泉驿微米黑)

Roboto

Noto Sans (思源黑体)

Apple Color Emoji

Segoe UI Emoji

Noto Color Emoji

浏览器默认字体

PC 端

挪动端

system-ui

应用形式

兼容性

成果

sans-serif(无衬线字体)

书写字体规定

字体设置

挪动端

PC 端

指定元素字体

各大网站 font-family 点评

淘宝首页

京东首页

天猫首页

腾讯网首页

新浪微博

掘金首页

segmentfault 首页

知乎首页

头条首页

参考链接