问题描述

当我们拿到设计稿去实现一个网页时，经常会发现设计稿当中一般使用的字体都是 PingFang SC 这一款字体。这是因为我们的 UI 设计师 一般使用的都是 Mac 电脑制作的设计稿。但是我们并不能傻乎乎的就按照设计稿直接设置 font-family:PingFang SC;

因为在 Windows 系统下并没有苹方字体可以使用。所以我们需要灵活地去设置网页的字体家族，在不同的系统下，不同的设备下，使用合适的字体，并且兼顾到中英文。并不是设计稿是什么字体，就必须设置为这款字体。

一般我们都会为 body 标签，指定 font-family 属性，为整个网页设置统一的字体，而且尽可能的使用各个系统下的默认字体。

各大网站最新的 font-family

• 小米：Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
• 京东：Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
• 天猫：font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
• Github：font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;

其中 system-ui，-apple-system，BlinkMacSystemFont ，Segoe UI ，Helvetica ，Arial 是在指定使用各个系统下默认的西文字体。

其中 "PingFang SC" ,Microsoft Yahei 指定各个系统下默认的中文字体。

其中 Hiragino Sans GB ,Heiti SC ,WenQuanYi Micro Hei 指定一些常见的中文字体。

font-family

对于 CSS 的 font-family 而言，设置时，它有两类取值。

1. 一类是类似这样的具体的字体族名定义：font-family: Arial 这里定义了一个具体的字体样式，字体族名为 Arial;

关于字体族名，有很多种：

• Helvetica
• Arial
• PingFang SC
• Microsoft Yahei
• Hiragino Sans GB
• …

1. 一类是通用字体族名，它表示一大类字体（并非单个），类似这样：font-family: sans-serif 。

关于通用字体族名，有5种：

• serif 衬线字体族
• sans-serif 非衬线字体族
• monospace 等宽字体，即字体中每个字宽度相同
• cursive 草书字体
• fantasy 主要是那些具有特殊艺术效果的字体

衬线体和无衬线字体

就 Web 常用的一些字体而言，其实大体上分为衬线字体和无衬线字体。

衬线字体 — 关键字为 serif，意为有衬线的字体，衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰。

无衬线字体— 关键字为sans-serif，也就是无衬线的意思。专指西文中没有衬线的字体，与汉字字体中的黑体相对应。与衬线字体相反，该类字体通常是没有衬线装饰，字形端庄，笔画横平竖直。

对比着来看：

中文字体界，两个有代表性的分类——宋体和黑体，分别对应着衬线字体和无衬线字体。

因为无衬线的字体结构简单，在同等字号下，无衬线的字体看上去要比有衬线的更大，结构也更清晰，所以电子设备的屏幕上也偏好使用无衬线字体。

新增通用字体族关键字

• system-ui 系统默认字体
• emoji 用于兼容 emoji 表情符号字符

system-ui

简单而言，font-family: system-ui 的目的就是在不同的操作系统的 Web 页面下，自动选择本操作系统下的默认系统字体。

默认使用特定操作系统的系统字体可以提高性能，因为浏览器或者 webview 不必去下载任何字体文件，而是使用已有的字体文件。font-family: system-ui 字体设置的优势之处在于它与当前操作系统使用的字体相匹配，对于文本内容而言，它可以得到最恰当的展示。

-apple-system/BlinkMacSystemFont

话说回来。正如每个前端开发人员都知道的那样，将一个功能纳入规范是一回事，将其纳入浏览器又是另一回事。

幸运的是，system-ui 的普及很快。Chrome 和 Safari 都可以在各种平台上完全支持它。只有 Mozilla 和 Windows 相对落后。

考虑到不同平台及向后兼容，在 macOS 和 iOS 上，我们需要使用 -apple-system 及 BlinkMacSystemFont 来兼容适配 system-ui 标准。

Segoe UI

Segoe UI 是 Windows 从 Vista 开始的默认西文字体族，只有西文，不支持汉字，属于无衬线体。

它也表示一个系列而不是某一款单一字体。使用 font-family: Segoe UI 可以在 Windows 平台及 Windows Phone 上选取最佳的西文字体展示。

Roboto

Roboto 是为 Android 操作系统设计的一个无衬线字体家族。

网站字体定义推荐写法

以 Git-Hub 网站的 font-family 定义为例子：

{
  font-family: 
    system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,
    Helvetica,Arial,
    sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
}

1. system-ui，使用各个支持平台上的默认系统字体
2. -apple-system， 在一些稍低版本 Mac OS X 和 iOS 上，升级使用更为合适的旧金山西文字体
3. BlinkMacSystemFont，针对一些 Mac OS X 上的 Chrome 浏览器，使用系统默认字体
4. segoe ui，在 Windows 及 Windows Phone 上选取系统默认字体
5. Roboto，面向 Android 和一些新版的的 Chrome OS
6. Helvetica,Arial，在针对不同操作系统不同平台设定采用默认系统字体后，针对一些低版本浏览器的降级方案
7. sans-serif，兜底方案，保证字体风格统一，至少也得是无衬线字体

上述 5 个字体族定义，优先级由高到底，可以看到，它们 5 个都并非某个特定字体，基本的核心思想都是选择对应平台上的默认系统字体。

使用系统默认字体的主要原因是性能。字体通常是网站上加载的最大/最重的资源之一。如果我们可以使用用户机器上已有的字体，我们就完全不需要再去获取字体资源，从而使加载时间明显加快。
并且系统字体的优点在于它与当前操作系统使用的相匹配，因此它的文本展示必然也是一个让人舒适展示效果。

中文字体设置

当然国内网站还要考虑到中文字体，因为上述 Git-Hub 是一个外文网站，所以没有中文字体的需求。

• "PingFang SC" 苹果默认的中文字体
• Microsoft Yahei windows默认的中文字体
• Heiti SC 黑体
• WenQuanYi Micro Hei 黑体，类似的还有冬青黑体Hiragino Sans GB
• "\5B8B\4F53" 宋体，也可以直接写成 宋体

字体设置建议

1、尽量使用系统默认字体

2、兼顾中西，西文在前，中文在后

中文或者西文（英文）都要考虑到。由于大部分中文字体也是带有英文部分的，但是英文部分又不怎么好看，但是英文字体中大多不包含中文。通常会先进行英文字体的声明，选择最优的英文字体，这样不会影响到中文字体的选择，中文字体声明则紧随其次。

3、兼顾多操作系统

选择字体的时候要考虑多操作系统。例如 MAC OS 下的很多中文字体在 Windows 都没有预装，为了保证 MAC 用户的体验，在定义中文字体的时候，先定义 MAC 用户的中文字体，再定义 Windows 用户的中文字体。

4、以字体族系列 serif 和 sans-serif 结尾

附：CSS font-family 各字体一览表

windows常见内置中文字体

字体中文名 字体英文名

宋体 SimSun（浏览器默认）

黑体 SimHei

微软雅黑 Microsoft Yahei

微软正黑体 Microsoft JhengHei

楷体 KaiTi

新宋体 NSimSun

仿宋 FangSong

OS X常见内置中文字体

字体中文名 字体英文名

苹方 PingFang SC

华文黑体 STHeiti

华文楷体 STKaiti

华文宋体 STSong

华文仿宋 STFangsong

华文中宋 STZhongsong

华文琥珀 STHupo

华文新魏 STXinwei

华文隶书 STLiti

华文行楷 STXingkai

冬青黑体简 Hiragino Sans GB

兰亭黑-简 Lantinghei SC

翩翩体-简 Hanzipen SC

手札体-简 Hannotate SC

宋体-简 Songti SC

娃娃体-简 Wawati SC

魏碑-简 Weibei SC

行楷-简 Xingkai SC

雅痞-简 Yapi SC

圆体-简 Yuanti SC

office安装后新增字体

字体中文名 字体英文名

幼圆 YouYuan

隶书 LiSu

华文细黑 STXihei

华文楷体 STKaiti

华文宋体 STSong

华文仿宋 STFangsong

华文中宋 STZhongsong

华文彩云 STCaiyun

华文琥珀 STHupo

华文新魏 STXinwei

华文隶书 STLiti

华文行楷 STXingkai

方正舒体 FZShuTi

方正姚体 FZYaoti

开源字体

字体中文名 字体英文名

思源黑体 Source Han Sans CN

思源宋体 Source Han Serif SC

文泉驿微米黑 WenQuanYi Micro Hei

版权字体（汉仪）

字体中文名 字体英文名

汉仪旗黑 HYQihei 40S

汉仪旗黑 HYQihei 50S

汉仪旗黑 HYQihei 60S

汉仪大宋简 HYDaSongJ

汉仪楷体 HYKaiti

汉仪家书简 HYJiaShuJ

汉仪PP体简 HYPPTiJ

汉仪乐喵体简 HYLeMiaoTi

汉仪小麦体 HYXiaoMaiTiJ

汉仪程行体 HYChengXingJ

汉仪黑荔枝 HYHeiLiZhiTiJ

汉仪雅酷黑W HYYaKuHeiW

汉仪大黑简 HYDaHeiJ

汉仪尚魏手书W HYShangWeiShouShuW

版权字体（方正）

字体中文名 字体英文名

方正粗雅宋简体 FZYaSongS-B-GB

方正报宋简体 FZBaoSong-Z04S

方正粗圆简体 FZCuYuan-M03S

方正大标宋简体 FZDaBiaoSong-B06S

方正大黑简体 FZDaHei-B02S

方正仿宋简体 FZFangSong-Z02S

方正黑体简体 FZHei-B01S

方正琥珀简体 FZHuPo-M04S

方正楷体简体 FZKai-Z03S

方正隶变简体 FZLiBian-S02S

方正隶书简体 FZLiShu-S01S

方正美黑简体 FZMeiHei-M07S

方正书宋简体 FZShuSong-Z01S

方正舒体简体 FZShuTi-S05S

方正水柱简体 FZShuiZhu-M08S

方正宋黑简体 FZSongHei-B07S

方正宋三简体 FZSong

方正魏碑简体 FZWeiBei-S03S

方正细等线简体 FZXiDengXian-Z06S

方正细黑一简体 FZXiHei I-Z08S

方正细圆简体 FZXiYuan-M01S

方正小标宋简体 FZXiaoBiaoSong-B05S

方正行楷简体 FZXingKai-S04S

方正姚体简体 FZYaoTi-M06S

方正中等线简体 FZZhongDengXian-Z07S

方正准圆简体 FZZhunYuan-M02S

方正综艺简体 FZZongYi-M05S

方正彩云简体 FZCaiYun-M09S

方正隶二简体 FZLiShu II-S06S

方正康体简体 FZKangTi-S07S

方正超粗黑简体 FZChaoCuHei-M10S

方正新报宋简体 FZNew BaoSong-Z12S

方正新舒体简体 FZNew ShuTi-S08S

方正黄草简体 FZHuangCao-S09S

方正少儿简体 FZShaoEr-M11S

方正稚艺简体 FZZhiYi-M12S

方正细珊瑚简体 FZXiShanHu-M13S

方正粗宋简体 FZCuSong-B09S

方正平和简体 FZPingHe-S11S

方正华隶简体 FZHuaLi-M14S

方正瘦金书简体 FZShouJinShu-S10S

方正细倩简体 FZXiQian-M15S

方正中倩简体 FZZhongQian-M16S

方正粗倩简体 FZCuQian-M17S

方正胖娃简体 FZPangWa-M18S

方正宋一简体 FZSongYi-Z13S

方正剪纸简体 FZJianZhi-M23S

方正流行体简体 FZLiuXingTi-M26S

方正祥隶简体 FZXiangLi-S17S

方正粗活意简体 FZCuHuoYi-M25S

方正胖头鱼简体 FZPangTouYu-M24S

方正卡通简体 FZKaTong-M19S

方正艺黑简体 FZYiHei-M20S

方正水黑简体 FZShuiHei-M21S

方正古隶简体 FZGuLi-S12S

方正幼线简体 FZYouXian-Z09S

方正启体简体 FZQiTi-S14S

方正小篆体 FZXiaoZhuanTi-S13T

方正硬笔楷书简体 FZYingBiKaiShu-S15S

方正毡笔黑简体 FZZhanBiHei-M22S

方正硬笔行书简体 FZYingBiXingShu-S16S

方正宋体人口信息常规 FZSONG-RKXX

方正宋体人口信息扩充常规 FZSONG-RKXX(SIP)