字体格式类型
字体格式类型有 TrueType、OpenType、EOT、WOFF/WOFF2 以及 SVG 等。
PostScript
PostScript 是由 Adobe 在1985年开发的页面描述语言，也被称为 Type1，文件扩展名为 .eps。PostScript 避免了版面制作对使用设备的依赖性，使得显示和打印可以跨平台。
TrueType
TrueType 是由 Apple 和 Microsoft 在1991年左右共同开发的一种电脑轮廓字体，文件扩展名为 .ttf 。Windows 和 Mac 系统最常用的字体格式就是 TrueType，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。
OpenType
OpenType 是 Microsoft 和 Adobe 在1995年左右共同开发的字体，文件扩展名为 .otf 。OpenType 也被称为 Type2 字体，它也是一种轮廓字体，而且可以把 PostScript 字体嵌入到 TrueType 的软件中。并且还支持多个平台，支持很大的字符集，支持在字符集中加入数字签名。Microsoft 从 Windows 2000 系统开始兼容 OpenType 字库，Apple 公司也从 MAC OS X 开始完全兼容 OpenType 字库。
E0T - Embedded Open Type
EOT 是一种嵌入式字体，是 Microsoft 在1997年开发的技术，文件扩展名为 .eot 。允许 OpenType 字体用 @font-face 嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。
WOFF - Web Open Font Format
WOFF 是一种专门为了 Web 而设计的字体格式标准，由 Mozilla、Opera、Microsoft 在2009年提案给， 由 W3C 的 Web字体工作组 负责标准化，文件扩展名为 .woff 。它实际上是对于 TrueType / OpenType 等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），同时字体文件被压缩，以便于网络传输，同时不加密，不受DRM（数字著作权）限制。 Mozilla Firefox 3.6 开始支持 WOFF，Microsoft 从 IE9 开始支持，Safari 自 5.1 起支持WOFF，Google Chrome 自 6.0 起支持WOFF，Presto 自 2.7.81 起支持 WOFF。
2014年，Web字体工作组 发布了 WOFF2 草案，文件扩展名为 .woff2 。2018年，WOFF2标准成为 W3C 推荐标准。
SVG - Scalable Vector Graphics
SVG 是由 W3C 制定的开放标准的图形格式，文件扩展名为 .svg 。SVG 字体就是使用 SVG 技术来呈现字体。
通过 @font-face 指定自定义字体
@font-face CSS at规则指定了一种用于显示文本的自定义字体；字体可以从远程服务器或用户自己计算机上本地安装的字体加载。
一个最常见的用法是，通过 font-family 指定自定义字体族名；通过 src 指定字体文件来源，通常可以通过 URL 加载远程字体文件，或者通过 dataURL 将需要的字体 data 信息包括进来，src 每个字体文件可以包括一个 format() 方法标志字体格式类型，format 的入参只能是 “woff”, “woff2”, “truetype”, “opentype”, “embedded-opentype” 或者 “svg”，和上文提到的字体格式类型是一一对应的。
1 | @font-face { |
@font-face 也有许多其他的参数，可以通过 font-style 设置字体样式类型，通过 font-weight 设置字体粗细等。
通过 font-family 设置字体族
font-family 取值
<family-name>- 一个字体族的名字。例如 “Times” 和 “Helvetica” 都是字体族名。字体族名可以包含空格，但包含空格时应该用引号。
<generic-name>通用字体族名是一种备选机制，用于在指定的字体不可用时给出较好的字体。通用字体族名都是关键字，所以不可以加引号。 在列表的末尾应该至少有一个通用字体族名。 以下是该属性可能的取值以及他们的定义。
serif- 带衬线字体，笔画结尾有特殊的装饰线或衬线。
例如： Lucida Bright, Lucida Fax, Palatino, “Palatino Linotype”, Palladio, “URW Palladio”, serif. sans-serif- 无衬线字体，即笔画结尾是平滑的字体。
例如， “Open Sans”, “Fira Sans”, “Lucida Sans”, “Lucida Sans Unicode”, “Trebuchet MS”, “Liberation Sans”, “Nimbus Sans L”, sans-serif. monospace- 等宽字体，即字体中每个字宽度相同。
例如， “Fira Mono”, “DejaVu Sans Mono”, Menlo, Consolas, “Liberation Mono”, Monaco, “Lucida Console”, monospace. cursive- 草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。
例如，“Brush Script MT“, “Brush Script Std“, “Lucida Calligraphy”, “Lucida Handwriting”, “Apple Chancery”, cursive. fantasy- Fantasy 字体主要是那些具有特殊艺术效果的字体。
例如，Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy. system-ui- 从浏览器所处平台处获取的默认用户界面字体。由于世界各地的排版习惯之间有很大的差异，这个通用选项为无法清晰映射到其他类型的字体提供支持。
math- 针对显示数学相关字符的特殊样式问题而设计的字体：支持上标和下标、跨行括号、嵌套表达式和具有不同含义的双字母字形。
emoji- 专门用于呈现 Emoji 表情符号的字体。
fangsong- 一种汉字字体，介于宋体和楷体之间。这种字体常用于某些政府文件。
通过 font-style 设置字体样式
可以设置为 italic（斜体） oblique（倾斜体）默认是 normal 。
通过 font-weight 设置字体粗细
可以设置为一个介于 1 和 1000 (包含) 之间的数字类型值（需为 100 的整倍数），更大的数值代表字体更粗（前提是字体支持）。默认是 normal 相当于 400。可以设置为 bold 相当于 700，也可以设置成 lighter 或 bolder 表示比从父元素继承来的值更细或更粗。
通过 font-size 设置字体大小
可以使用 绝对大小值 xx-small, x-small, small, medium, large, x-large, xx-large ，可以使用相对值 larger, smaller 表示比父元素大或者小，可以使用 em/ex/百分比 表示相对父元素的大小，不过最常见的是使用像素 px。
通过 font-variant 设置字体的变体
font-variant 属性是 font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asian 等属性的简写。
这些属性都不常用到。一个比较有意思的属性是 font-variant-east-asian 设置 font-variant-east-asian: traditional; 可以将简体文本显示为繁体字，但需要字体族支持。
通过 font 对多个字体属性进行简写
font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体。如果是作为简写使用，必须包括 font-size 和 font-family 属性。
