在网页里使用字体：@font-face 的现代写法

兼容所有浏览器（包括最古老的IE本文介绍现在推荐的网页字体写法。以前为老浏览器准备的 6.0）的Webfont（包括：EOT\WOFF\WOFF2\SVG\TTF），其@font-face的用法是：EOT、SVG 字体格式和各种兼容写法，现在已经不需要了。

@font-face {

font-family: 'MyWebFont';

src: url('webfont.eot'); /* IE9 Compat Modes */

src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('webfont.woff2') format('woff2'), /* Super Modern Browsers */

url('webfont.woff') format('woff'), /* Pretty Modern Browsers */

url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */

url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

}

最简单的写法

兼容主流浏览器的Webfont（包括：WOFF把字体文件（.woff2）放到你的网站上，然后在 \TTF），其@font-face的用法是：CSS 里声明：

@font-face {
  font-family: 'MyWebFont'"LXGW WenKai";
  src: url('webfont.woff'"/fonts/LXGWWenKai-Regular.woff2") format('woff'), /* Pretty Modern Browsers */

url('webfont.ttf') format('truetype'"woff2");
  /*font-weight: Safari,400;
  Android,font-style: iOSnormal;
  */font-display: swap;
}

body {
  font-family: "LXGW WenKai", "PingFang SC", "Microsoft YaHei", sans-serif;
}

兼容较主流浏览器的Webfont（包括：WOFF）要点：

可变字体

可变字体一个文件包含一段连续的粗细，font-weight 写成一个范围：

@font-face {
  font-family: 'MyWebFont'"Source Han Sans SC VF";
  src: url('webfont.woff'"/fonts/SourceHanSansSC-VF.otf.woff2") format('woff'"woff2");
  font-weight: 250 900;
  font-display: swap;
}

之后在样式里用 font-weight: 350 这样的任意数值都可以。

font-display：字体还没下载好时怎么显示

中文字体文件大，一般用 swap 或 fallback，避免页面长时间看不到文字。

unicode-range：只在需要时下载

unicode-range 告诉浏览器这个文件包含哪些字符。页面上没有用到这些字符时，浏览器就不会下载这个文件：

/* Pretty Modern Browsers英文和数字部分 */
}

然后，像这样使用：

body@font-face {
  font-family: 'MyWebFont'"LXGW WenKai";
  src: url("/fonts/wenkai-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F;
  font-display: swap;
}

/* 常用汉字部分 */
@font-face {
  font-family: "LXGW WenKai";
  src: url("/fonts/wenkai-cjk-01.woff2") format("woff2");
  unicode-range: U+4E00-4FFF;
  font-display: swap;
}

几个 @font-face 用同一个 font-family 名字，浏览器会根据页面上实际出现的字符，只下载需要的那几个文件。这是中文网页字体的基本做法，详见《中文网页字体为什么要拆分子集》。

提前加载最重要的字体

首屏一定会用到的字体文件，可以在 <head> 里提前加载：

<link rel="preload" href="/fonts/wenkai-latin.woff2"
      as="font" type="font/woff2" crossorigin>

注意必须写 crossorigin，否则浏览器会重复下载。只给一两个最关键的文件加，不要给所有分片都加。

字体放在别的域名上

字体文件放在另一个域名（比如单独的静态资源域名）上时，那边的服务器需要返回允许跨域的响应头 Access-Control-Allow-Origin，否则浏览器会拒绝使用这个字体。

使用前先看许可

把字体放到网站上供浏览器下载，属于“网页嵌入”。开源字体一般允许，商业字体通常需要单独的网页字体许可。见《用字前先看许可：能不能商用、能不能改、能不能嵌入》。

参考资料