跳转到主要内容

在 CSS 里使用：字体名、备用字体和多字重

适合谁看：已经引入了字体 CSS，要把字体用到页面具体位置、或要同时用多个字重的开发者。

字体名从 CSS 里抄

文风每款字 CSS 里声明的 font-family 名字格式不统一，有的是 WF- 开头，有的是 windfonts- 或 wenfeng- 开头。以你引入的那份 CSS 为准：在浏览器打开 CSS 地址，搜 font-family，复制引号里的内容。

.article {
  font-family: "从 CSS 里抄的名字", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

一定要写备用字体

  • 字体分片还没下载完时，浏览器先用备用字体显示。
  • 子集里没有的字，也用备用字体显示。
  • 衬线类（宋体、仿宋、楷体）的备用写 "Songti SC", "SimSun", serif；黑体类写上面那组，最后是 sans-serif。

多个字重

同一款字的每个字重是一份单独的 CSS。需要几个字重就引入几份：

这几份 CSS 的 font-family 通常是同一个名字，用 font-weight 区分：

body { font-family: "从 CSS 里抄的名字", sans-serif; font-weight: 400; }
h1, h2, strong { font-weight: 700; }

每份 CSS 的 font-weight 数值同样要在 CSS 里看，不要按字重名去猜。例如有的字 Heavy 声明为 900；有的字的 Text、Normal 和 Regular 都声明为 400；还有只有一档 Bold 的字，CSS 里声明的却是 400。

两份 CSS 声明了相同的 font-weight，后引入的会盖住先引入的。 这种情况只引入其中一份。

只有一个字重的字

有些字只有一档，例如得意黑只有 Oblique，猫啃什锦黑只有 Bold。

  • 不要再给它加 font-weight: bold 或 font-style: italic。CSS 里没有对应的声明时，浏览器会自己把字加粗或拉斜，效果很差。
  • 可以加上 font-synthesis: none; 禁止浏览器自己加粗、拉斜，见 MDN：font-synthesis。

只用在标题上

只想让标题用这款字，把 font-family 写在标题选择器上即可。正文不用这款字时，浏览器不会下载正文用到的分片。

h1, h2 { font-family: "从 CSS 里抄的名字", "PingFang SC", "Microsoft YaHei", sans-serif; }

用 @import

也可以在 CSS 文件里写：

@import url("https://cn.windfonts.com/fonts-packages/syhtsc/Regular/full/result.css");

@import 必须写在 CSS 文件的最前面。它比 <link> 晚一步才开始下载，首屏用到的字体优先用 <link>。

接下来读什么