[前端基础]font-family 详解

捡了幸福的猪
6,538 阅读10分钟

1、 font-family的使用

font-family: [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit from W3C

eg : font-family: 'PingFang SC', sans-serif;

  • family-name: 字体名（ 其实也可以是一套字体）
  • generic-family: 字体族

谷歌字体的展示效果见： Google Fonts

2、 相关知识：字体族

字体族即一类字体， 其值主要有6种：

  • serif：衬线字体，衬线的笔画有粗有细的变化，在每一笔画上都自有风格，笔画末端会有修饰，强调艺术感，适合用于博客，旅游，文化，艺术类网站
  • sans-serif: 无衬线字体 字体工整方正，给人正式的感觉，适合政务类，企业类网站使用。
  • monospace: 等宽字体
  • cursive: 手写字体
  • fantasy: 奇幻字体
  • system-ui: 系统UI字体

其中衬线字体 和无衬线字体这两种字体族最经常使用，其他字体族适用于特定的场景。具体解释&例子： image.png

3、相关知识：操作系统中默认的无衬线字体

-apple-system、BlinkMacSystemFont、system-ui、sans-serif 这几个值在使用时都会返回系统默认的无衬线字体，但是这几个值各有限制： from Operating systems default sans-serif fonts

  • -apple-system ： 只适用于新版的 MacOS versions (El Capitan and newer) and iOS
  • BlinkMacSystemFont ： 只适用于老版本的 Mac OS versions (Yosemite and older)
  • system-ui： 适用于所有OS，但是不适用于Firefox浏览器，Firefox浏览器不支持这个值
  • sans-serif ：适用于所有的浏览器与OS， 但是最好只用作fallback, 因为在某些情况下会有些quirk
分类OS字体
MacOS 中默认的无衬线字体MacOS (El Capitan and newer)San Francisco
MacOS (Yosemite)Helvetica Neue
MacOS (older versions)Lucida Grande
Windows 中默认的无衬线字体Windows (Vista and newer, including Windows 10)Segoe UI
Linux 中默认的无衬线字体UbuntuUbuntu
Red HatRed Hat
iOS and iPadOS 中默认的无衬线字体iOS (9 and newer)and iPadOSSan Francisco
iOS (8 and older)Helvetica/Helvetica Neue
Android中默认的无衬线字体Android (4.0+)Roboto
Android (older versions)Droid Sans

只考虑无衬线字体，推荐的设置：

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;

4、相关知识：操作系统中默认的衬线字体

由于早些年各OS主要使用功能衬线字体，所以大多是的OS具有相同的默认衬线字体； 对于OS中衬线字体使用比较简单

分类OS字体
MacOS 中默认的衬线字体MacOS (all versions)Times
Windows 中默认的衬线字体Windows (all versions)Times New Roman
Linux 中默认的衬线字体UbuntuTimes New Roman comes pre-installed, but defaults differ depending on setting
iOS and iPadOS 中默认的衬线字体iOS and iPadOSTimes New Roman (as TimesNewRomanPSMT)
Android中默认的衬线字体Android (4.0+)Noto Serif
Android (older versions)Droid Serif

只考虑衬线字体，推荐的设置：

font-family: "Times New Roman", Times, serif;

5、相关知识： web font & web safe font

  • web safe font: 被许多OS 预装的字体就是web safe font; 尽管不是所有系统都预装相同的字体，但是可以选择几个看起来相似的web safe font 来兼容各OS 各字体在各OS中安装的比例见：www.cssfontstack.com/

  • web font：web font是不被预装在用户的OS 的字体。字体在用户浏览网页时，在浏览器中被下载，然后再应用在网页中的字体上。使用web font 最大的缺点是会减慢网站的加载时间。 各种web font见： www.cssfontstack.com/Web-Fonts

6、相关知识：web font 使用

使用 web font字体，即通过 @font-face CSS 语法

@font-face {
  font-family: 'Font Name';  
  src: url('fonts/fontfilename.woff2') format('woff2'); 
  ...
}
  • font-family: 字体名， 用于font或font-family属性
  • src 为字体地址，可以是本地的字体文件地址，也可以是远程托管地址； 字体格式最好使用.woff2 ， 若需兼容IE，也需指定 woff 格式字体

7、相关知识： 字体格式

  • TrueType (.ttf) Windows 和 Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

  • OpenType (.otf) OpenType 是一种可缩放字型（scalable font）电脑字体类型，采用 PostScript格式，是美国微软公司与Adobe 公司联合开发，用来替代 TrueType 字型的新字型。这类字体的文件扩展名为.otf，类型代码是OTTO。

  • Embedded Open Type (.eot) 嵌入字体格式（EOT）是微软开发的一种技术，允许 OpenType 字体嵌入到网页并可以下载至浏览器渲染。这些文件只在当前页活动的状态下，临时安装在用户的系统中。

  • Web Open Font Format (.woff) 相对于 TrueType 和 OpenType ，WOFF（Web开发字体格式）是一种专门为了 Web 而设计的字体格式标准，它并不复杂，实际上只是对于 TrueType / OpenType 等字体格式的封装，并针对网络使用加以优化：每个字体文件中含有字体以及针对字体的元数据（ Metadata ），字体文件被压缩，以便于网络传输，并且不包含任何加密或者 DRM 措施。

到2021年7月， WOFF2格式 对于浏览器的支持度为96.14%， 支持除了 IE外其他所有的浏览器； 若需兼容IE， 需使用WOFF格式

8、 font-family的解析规则

  • font-family 属性指定的是一个优先级从高到低的可选字体列表。 浏览器会选择font-family列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。
  • 字体的选定不是在发现用户计算机上安装的列表中的第一个字体时停止。相反，对字体的选择是逐字进行的。也就是说即使某个字符周围都在某个字体中可以显示，但该字符在当前的字体文件中没有适合的图形，那么会继续尝试列表中靠后的字体
  • 应当至少在使用的 font-family 列表中添加一个通用的字体族名，因为无法保证用户的计算机内已经安装了指定的字体，也不能保证使用 @font-face 提供的字体移动能够正确地下载。提供通用的字体族使得浏览器可以在无法得到最佳字体的情况下使用一个相对接近的备选字体

9、 font-family设置原则

  • 字体名有空格时要加引号， 字体族名是关键字，必须不能加引号！！
  • 虽然css font-family 对名称的大小不敏感，但是最好至少首字母要大写，否则在使用CSS unicode-range 的时候可能会有一些问题（from 《CSS 世界》）
  • 对于中文字体，最好设置其英文名称，主要是为了规避乱码风险；中文字体对应的英文名称（from 《CSS 世界》）
  • 西文优先：西文字体中大多不包含中文，西文优先，中文紧随其后，这样也不会影响到中文字体的选择。
  • 从新到旧：优先体验最好的字体，向下兼容。
  • 兼容多种操作系统：考虑windows, mac os, android, linux等系统。
  • 补充字体族：最后根据衬线serif或无衬线sans-serif来补充字体族，当所有设置的字体都找不到时，让操作系统有选择字体的方向。

10、各系统中常用字体

中/英文OS常用字体&使用情况
中文字体Windows1) Simsun：中易宋体，衬线字体，之前很长时间一直是简体中文版Windows系统的默认字体，对于PC来说，应该选择黑体作为显示器字体，才有助于显示和阅读。微软已经在其操作系统Windows Vista和Windows 7中放弃使用SimSun作为默认字体，而改用“微软雅黑”字体。
Simsun中文字符设计简洁，但也缺乏弹性。在小字符方面，点阵不够美观。随简体中文版Microsoft Windows和Microsoft Office一起分发的字体；
在苹果Mac OS X系统中，该字体可以随Microsoft Office for Mac一起安装；
2) Microsoft Yahei：微软雅黑，无衬线字体 ，是微软委托中国方正设计的一款中文字体。微软雅黑比以前 Windows XP 默认的Simsun更加地清晰易读；该字体家族具有独立粗体“微软雅黑Bold”，这个粗体并非由电脑自动加粗，而是人工制作的粗笔画字符，其具有更好的显示效果。
微软雅黑与微软正黑体是 Windows 系统字体中最早具有独立粗体的中文字体专为屏幕显示设计，字形饱满，字间留白很少，从而使字内有更多留白，在字号较小时仍能较清晰地辨认
Mac OS1) STHeiti：华文黑体，OS X 10.6之前的简体中文系统界面默认字体
2) STXihei：华文细黑，比STHeiti文字更细。
3) Heiti SC：黑体-简，从 OS X 10.6 开始，黑体-简代替华文黑体用作简体中文系统界面默认字体，显示效果不错，但是喇叭口设计遭人诟病。
4) Hiragino Sans GB： 冬青黑体，清新的专业印刷字体，小字号时足够清晰，拥有很多人的追捧。
5) PingFang SC： 苹方简体，是苹果公司委托威锋数位为苹果五大操作系统（watchOS、tvOS、macOS、iOS、iPadOS）所开发的专有字体家族，属于无衬线黑体
PingFang SC 有6种字重：
PingFangSC-Regular：苹方-简 常规体;
PingFangSC-Ultralight： 苹方-简细;
PingFangSC-Light： 苹方-简 细体;
PingFangSC-Thin： 苹方-简 纤细体;
PingFangSC-Medium： 苹方-简 中黑体;
PingFangSC-Semibold： 苹方-简 中粗体
LinuxWenQuanYi Micro Hei：文泉驿微米黑，Linux最佳简体中文字体
英文字体Windows1)Segoe UI: 西文无衬线体，是由微软公司开发的并且广泛使用的字体，使用Microsoft Office 2007、Microsoft Office 2010、Windows Vista和Windows 7的用户都可以获得这个字体。
Windows 8中的Segoe UI使用了新的字形设计 2) Arial：无衬线西文字体，与Helvetica 显示类似； 是随同多套微软应用软件所分发的无衬线体字体， 用来和Helvetica 竞争
Mac1）Times New Roman：衬线字体，最常见且广为人知的衬线字体之一, 使用很很很广泛
2）Helvetica、Helvetica Neue：赫尔维提卡体， Helvetica Neue 整体比 Helvetica 更趋近完美，可选的字重也更多；
Helvetica的是伪斜体（Oblique），只是把正体字按一定比例倾斜而已；Helvetica Neue重做了斜体，使之成为真正的Italic； 方正黑体、方正超粗黑、方正中等线的字体英文部分使用的是Helvetica。
3）San Francisco： 新版macOS 和 iOS 的默认系统字体（具体见wiki/San_Francisco）
限制： 苹果公司限制其他人使用该字体。它仅被授权给注册的第三方开发人员，用于为设计和开发苹果操作系统的应用程序。只有 SF Pro、SF Compact、SF Mono、SF Arabic 和 New York 变体可在开发者网站上下载，并且只有它们是被允许开发者使用的 SF 变体。

macOS 下finder打开 Foot Book (字体册)应用可以查看macOS中全部的字体，并可进行管理等操作：

image.png

11、 美团设计体系Web2.0字体规范

image.png

12、Ant-Design 字体规范

image.png from Ant-Design

参考资料

avatar
文章
阅读
粉丝