最标准的系统字体规范font-family

kk_miles 发布于2019-08-29 13:43 / 2429人阅读

摘要：最标准的系统字体规范注意系统默认字体和浏览器默认字体这个差别。值得一提的是，上默认的中文字体渲染是华文黑体，而非作为系统字体的苹方即冬青黑体，是我们整个中唯一不是系统字体的字体。我们标准化的核心思路是使用系统字体。

最标准的系统字体规范font-family

注意系统默认字体和浏览器默认字体这个差别。

直接提供方案：

font: 14px/1.6 
/*西文*/-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,
/*中文*/PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;

这些都是些什么字体？ 1、-apple-system, BlinkMacSystemFont：

这两个值是特殊供 iOS 和 macOS(OS X) 使用的属性值，前者只被 Safari 识别，后者只被 Chrome 识别。也就是说它们是 Webkit 私有属性，这两个值强大的地方就在于，其会根据系统版本的不同，渲染出不同的字体。

2、"Segoe UI", Roboto, Ubuntu：

西文字体的第二梯队，分别对应了：
"Segoe UI" 对应的是 Windows 和 Windows Phone；
Roboto 对应的是 Google 家的 Android 和 Chrome OS"；
Ubuntu 对应的是 Linux。

3、Helvetica Neue,Helvetica,Arial：

西文字体的最终 fallback：
"Helvetica Neue"对应的是 OS X pre-EI Capitan，实际上它位置靠后的更重要原因是，它在非 EI Capitan 的机器上是一个比较常见的字体；
Helvetica 是世界通用的经典无衬线体；
Arial 是 Windows 3.1 开始就一直随视窗系统分发的字体，作为最后的回退方案。

4、"PingFang SC", "Hiragino Sans GB"：

"PingFang SC" 即苹方，是 OS X EI Capitan(10.11) 上的系统中文字体。值得一提的是，EI Capitan 上 Chrome 默认的中文字体渲染是 ST Heiti(华文黑体)，而非作为系统 UI 字体的苹方；
"Hiragino Sans GB" 即冬青黑体，是我们整个 fallback list 中唯一不是系统字体的字体。加入冬青黑体是因为考虑到无论是在 Mac 还是 Windows 上，冬青黑体的表现都会比微软雅黑优秀。而自 10.6 开始，OS X 就系统自带了冬青黑体，因此将其置于微软雅黑之前。

5、"Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN"

中文字体的第二梯队：
"Microsoft YaHei UI" 即微软雅黑 UI ，随 Windows 8.1 一同发布，相较于微软雅黑，其对英文、数字的笔画做了一定修改；
"Microsoft YaHei" 即微软雅黑，随 Windows Vista 一同发布，是 Vista 至 Windows 8 的系统字体（Windows 8.1 改用 “微软雅黑 Light”）；
"Source Han Sans CN" 即思源黑体，是大部分 Android 的系统中文字体。

6、sans-serif

中文字体的最终 fallback，无衬线体，与中文字体的黑体相对应。

思路是什么？

其实，我们使用系统字体规范 font-family 的思路很简单 —— 从西文到中文，分别对各平台作一个最基础的降级

一些问题: 1. 不声明不就是系统字体吗？

不声明字体时，浏览器渲染的是默认字体，不一定是系统字体。比如 macOS ，Chrome 默认渲染华文黑体（ST Heiti），而非系统字体苹方（PingFang SC）；Windows 7，浏览器默认渲染中易宋体（Simsun），而非系统字体微软雅黑（Microsoft YaHei）。

我们标准化的核心思路是使用系统 UI 字体。

显式地声明字体，更重要的是保证页面样式的安全与可控。比如，我们为 Android 声明英文字体 Roboto 与中文字体思源黑，是因为 Android 机型百(luan)家(cheng)争(yi)鸣(tuo)。实际上，即使如此，正如我们的测试结果所示，我们还是不能保证所有 Android 机器都”正确“渲染。因此我们更认为这样有必要。

2. 写得越多就一定越好吗？

回过头看知乎的 font-family ：

    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

写得越多显得越专业吗？恐怕不是的。也许正是因为专业、经过了思考，知乎才对字体做了删除、中文字体只做了最基本的 sans-serif 限制。即使在 Windows 7 上，这套 font-family 的渲染是 Arial 和中易宋体（Simsun），即使在 macOS 上英文字体也没有使用最新的 San Francisco，不过它真的足够安全。

而我们考虑到业务场景需求，在安全的基础上，尽量优化各平台的显示效果。
所以这东西，不能以好与坏来衡量。

3. 对于设计团队的意义是什么？

对于设计师而言：
设计师了解各平台的字体分布、了解字体选择的限制，以及用户在该平台的基本体验；
在实现设计稿时，能根据所针对的平台，调整设计稿所用的字体，保持设计稿字体与用户所见最终效果的一致。

对于 UI 工程师而言：
保证各项目字体样式的标准统一；
对字体样式的调试有更清楚地把控。

GPU云服务器云服务器标准规范安全防范视频监控施工标准规范 linux系统安全加固规范 font-family

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112659.html

给自己的Fonts教程

摘要：书体宋体仿宋体黑体等例如自带的宋体实为中易宋体。传统上说的等线体以当代视角来看通常是较为幼细的黑体。前面的过程我们称之为编码，后面的这个过程我们称之为解码。部分浏览器比如可以选择编码自动检测功能，使用基于统计的方法判断未定编码。准备工作字符 - Character 字母、数字、汉字、符号等，是一种抽象实体。字形 - Glyph 单个「字符」的具体表达，一个字可有多个不同的字形。 ...

pkwenda 2019-08-29 12:50 评论0 收藏0
CSS编码规范

摘要：代码风格文件建议文件使用无的编码。解释编码具有更广泛的适应性。示例空格强制选择器与之间必须包含空格。示例字号强制需要在平台显示的中文内容，其字号应不小于。示例响应式强制不得单独编排，必须与相关的规则一起定义。转载：原地址 1 前言 CSS作为网页样式的描述语言，在百度一直有着广泛的应用。本文档的目标是使CSS代码风格保持一致，容易被理解和被维护。虽然本文档是针对CSS设计的，...

flyer_dev 2019-08-28 18:04 评论0 收藏0
前端笔记之CSS（上）

摘要：宋体注意使用某种特定的字体系列宋体完全取决于用户机器上该字体系列是否可用这个属性没有指示任何字体下载。但是记住，最终选择上的是最后的那个后代元素。层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对...

番茄西红柿 2019-04-23 11:45 评论0 收藏0
CSS超全笔记（适合新手入门）

摘要：选择器和类选择器区别标准规定，在同一个页面内，不允许有相同名字的对象出现，但是允许相同名字的。选择器和类选择器最大的不同在于使用次数上。当需要设置英文字体时，英文字体名必须位于中文字体名之前。CSS CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）...

番茄西红柿 2019-04-23 11:56 评论0 收藏0
前端基础入门二（CSS）

摘要：输入的时候少按一个键浏览器兼容问题比如使用的选择器命名，在是无效的能良好区分变量命名变量命名是用不要纯数字中文等命名，尽量使用英文字母来表示。选择器和类选择器最大的不同在于使用次数上。当需要设置英文字体时，英文字体名必须位于中文字体名之前。回顾上一节HTML 思维导图 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

Lorry_Lu 2019-08-30 15:55 评论0 收藏0