跳到主要内容

自定义字体

常见字体格式有哪些？​

格式MIME type
TrueTypefont/ttf
OpenTypefont/otf
Web Open Font Formatfont/woff
Web Open Font Format 2font/woff2

@font-face 如何引入自定义字体？​

  • @font-face: 声明一条自定义字体的来源;
  • font-family: 自定义名称, 供 font-family 引用;
  • src: 用 url() + format() 列出多个来源, 按顺序回退;
@font-face {
  font-family: "Open Sans";
  src:
    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

font-weight 与 font-style 在 @font-face 中起什么作用？​

  • 作用: 把多个字体文件匹配到不同的字重/样式;
  • 场景一: 同一字体族, 多文件多样式;
  • 场景二: 不同字体族, 多文件同一样式;
@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}