CSS @font-face 使用 

@font-face {
  font-family: "AiDeep";
  src: url("./AiDeep.otf") format("opentype");
  /* 错误的写法 */
  /* src: url('./AiDeep.otf') format("otf"); */
  font-weight: 600;
  font-style: normal;
}

在添加自定义字体时，遇到无效的作用，起初以为是字体文件没有引用正确，后来发现是设置 src 时 format 没有填写正确，以为把字体文件后缀名传入 format 就可以了，还是太 naive 了。总结下常用字体文件格式以及 @font-face 的用法。

# @font-face

@font-face (opens new window) 是 CSS3 提供的一个 at-rule (opens new window)，用于指定一个自定义字体。

# 语法

# src

设置自定义字体的文件位置以及格式

/* <url> values */
src: url(https://somewebsite.com/path/to/font.woff); /* absolute URL */
src: url(path/to/font.woff); /* relative URL */
src: url(path/to/font.woff) format("woff"); /* explicit format */
src: url("path/to/font.woff"); /* quoted URL */
src: url(path/to/svgfont.svg#example); /* fragment identifying font */

/* <font-face-name> values */
src: local(font); /* unquoted name */
src: local(some font); /* name containing space */
src: local("font"); /* quoted name */

/* Multiple items */
src: local(font), url(path/to/font.svg) format("svg"), url(path/to/font.woff)
    format("woff"), url(path/to/font.otf) format("opentype");

format 可接收参数有：woff, woff2, truetype, opentype, embedded-opentype, svg

# font-display

用于自定义字体加载过程时的显示问题

  • auto: 默认值。典型的浏览器字体加载的行为会发生，也就是使用自定义字体的文本会先被隐藏，直到字体加载结束才会显示。
  • block: 如果字体未加载完成，浏览器将首先绘制“隐形”文本；一旦字体加载完成，立即切换字体。
  • swap：浏览器不会等待字体加载，直接使用字体栈中符合条件的字体先显示出来，等自定义字体加载完毕后再切换回来
  • fallback: 需要使用自定义字体渲染的文本会在较短的时间（100ms according to Google ）不可见，如果自定义字体还没有加载结束，那么就先加载无样式的文本。一旦自定义字体加载结束，那么文本就会被正确赋予样式。
  • optional: 和 fallback 基本相同，区别是让浏览器自由决定是否使用自定义字体

# font-family

指定一个字体名称，之后可以设置字体属性为当前值

/* <string> values */
font-family: "font family";
font-family: "another font family";

/* <custom-ident> value */
font-family: examplefont;

# font-style

字体样式

font-style: normal;
font-style: italic;
font-style: oblique;

/* Global values */
font-style: inherit;
font-style: initial;
font-style: unset;

# font-weight

设置字体的粗细

/* Keyword values */
font-weight: normal;
font-weight: bold;

/* Keyword values relative to the parent */
font-weight: lighter;
font-weight: bolder;

/* Numeric keyword values */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

# font-stretch

字体显示为正常、缩小、拉伸等样式

/* Keyword values */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;

# font-variant

快速设置 font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, 和 font-variant-east-asian。

font-variant: small-caps;
font-variant: common-ligatures small-caps;

/* Global values */
font-variant: inherit;
font-variant: initial;
font-variant: unset;

# font-variation-settings

指定低级的 OpenType 或 TrueType 字体变体。

/* Use the default settings */
font-variation-settings: normal;

/* Set values for OpenType axis names */
font-variation-settings: "xhgt" 0.7;

# unicode-range

设置要使用的字符的特定范围

/* <unicode-range> values */
unicode-range: U+26; /* single codepoint */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /* codepoint range */
unicode-range: U+4??; /* wildcard range */
unicode-range: U+0025-00FF, U+4??; /* multiple values */

# 格式

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ]
}
where
<family-name> = <string> | <custom-ident>+

# 字体格式

对于 @font-face 而言，兼容性问题就是各浏览器所能识别的字体格式不尽相同。

# TrueType 格式(.ttf)

Windows 和 Mac 上常见的字体格式，是一种原始格式，因此它并没有为网页进行优化处理。
浏览器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+

# OpenType 格式(.otf)

以 TrueType 为基础，也是一种原始格式，但提供更多的功能。
浏览器支持：FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+

# Web Open Font 格式(.woff)

针对网页进行特殊优化，因此是 Web 字体中最佳格式，它是一个开放的 TrueType/OpenType 的压缩版，同时支持元数据包的分离。
浏览器支持：IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+

# Embedded Open Type 格式(.eot)

IE 专用字体格式，可以从 TrueType 格式创建此格式字体。
浏览器支持：IE4+

# SVG 格式(.svg)

基于 SVG 字体渲染的格式。
浏览器支持：Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

这就意味着在 @font-face 中我们至少需要 .woff, .eot 两种格式字体，甚至还需要 .svg 等字体达到更多种浏览版本的支持。

相关引用: @font-face (opens new window) 相关引用: font-display (opens new window) 相关引用: 字体格式 (opens new window)

@font-face
语法
src
font-display
font-family
font-style
font-weight
font-stretch
font-variant
font-variation-settings
unicode-range
格式
字体格式
TrueType 格式(.ttf)
OpenType 格式(.otf)
Web Open Font 格式(.woff)
Embedded Open Type 格式(.eot)
SVG 格式(.svg)