Alan's blog

# 字体

本篇包含，开发中遇到与字体相关的理论知识和实践。

# font-weight

  • lighter: 100
  • normal: 400
  • bold: 700

需要注意的是，不同的字体家族对应的数值范围可能不同，具体需要查看对应字体的文档。

# font-display

font-display: swap 是一个用于指定字体加载策略的 CSS 属性。它可以用于 @font-face 规则中，用于控制字体在加载过程中的展示方式。该属性的主要作用是防止 FOIT（Flash of Invisible Text）或者 FOUT（Flash of Unstyled Text），提高字体加载的用户体验。

具体来说，当一个页面中的字体文件较大或者加载速度较慢时，可能会出现字体还未加载完成时就已经开始渲染的情况，这时候就会出现 FOIT 或者 FOUT，给用户带来不良体验。使用 font-display: swap 可以在字体文件加载完成之前使用浏览器默认的字体，加载完成后再使用自定义的字体。

当 font-display: swap 被指定时，浏览器会优先下载字体文件，然后会将浏览器默认的字体替换为自定义字体。在下载字体的过程中，如果字体文件未能及时下载完成，浏览器会使用默认字体，避免 FOIT 或者 FOUT。

除了 swap，font-display 还有以下取值：

  • auto：浏览器默认行为，通常等同于 swap。
  • block：在字体加载完成之前，使用浏览器默认字体渲染文字，而不是在默认字体和自定义字体之间进行多次切换。适用于非常大的字体文件，加载时间较长的情况。
  • fallback：和 swap 类似，但如果字体文件无法加载，会使用与 font-family 属性相同的其他字体进行替换。
  • optional：使用浏览器默认字体，只有在字体文件已经加载完成时才会应用自定义字体。

需要注意的是，font-display 并不是所有浏览器都支持，特别是一些老版本的浏览器可能不支持该属性，需要进行兼容处理。

# 不同 font-weight 公用 font-family

要在 @font-face 中实现不同 font-weight 对应不同字体文件，可以使用不同的 font-weight 值对应不同的字体文件路径。例如：

@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 */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "MyWebFont";
  src: url("webfont-bold.eot"); /* IE9 Compat Modes */
  src: url("webfont-bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
      url("webfont-bold.woff2") format("woff2"),
    /* Super Modern Browsers */ url("webfont-bold.woff") format("woff"), /* Pretty Modern Browsers */
      url("webfont-bold.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("webfont-bold.svg#svgFontName") format("svg"); /* Legacy iOS */
  font-weight: bold;
  font-style: normal;
}

在上面的代码中，我们定义了两个 @font-face 规则，分别对应字体的正常和粗体。在这两个规则中，我们指定了不同的字体文件路径，并使用 font-weight 属性将不同的字体文件与不同的字体重量关联起来。这样，当我们在样式中指定 font-weight 为 normal 或 bold 时，浏览器会自动加载对应的字体文件，从而实现不同字体重量对应不同的字体文件。

# js 加载字体

function loadFont() {
  const font = new FontFace("Roboto", `url(${RobotoBold})`);
  font.load().then(() => {
    document.fonts.add(font);
  });
}

类似的 使用 js 引入也能实现 @fontFace 不同字重效果

const regularFont = new FontFace("Roboto", "url(Roboto-Regular.ttf)", {
  weight: "normal",
});
const boldFont = new FontFace("Roboto", "url(Roboto-Bold.ttf)", {
  weight: "bold",
});

# 检测设备字体

← 深入 svg →