如何在NX React项目的Storybook中配置@font-face？

我用React和NX构建应用，尝试通过preview-head.html文件给Storybook添加自定义字体的@font-face配置。

正确的@font-face代码示例 #

@font-face {
  font-family: 'Switzer-Regular';
  src: url('../assets/fonts/Switzer-Regular.woff2') format('woff2'),
    url('../assets/fonts/Switzer-Regular.woff') format('woff'),
    url('../assets/fonts/Switzer-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
} 

我当前错误的preview-head.html内容 #

<style>
  * {
    font-family: 'Switzer-Regular';
    src: url('fonts/Switzer-Regular.woff2') format('woff2'),
      url('fonts/Switzer-Regular.woff') format('woff'),
      url('fonts/Switzer-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }
</style>

问题表现 #

运行Storybook后，DevTools提示src和font-display是未知属性名，但font-family、font-weight、font-style能正常识别。查阅NX Storybook文档后未找到可行方案，寻求解决办法。

解决办法 #

1. 修正preview-head.html的样式规则

你错误地将@font-face专属属性（src、font-display）写在了全局*选择器中，这些属性只能用于@font-face规则内。正确的写法是先定义@font-face，再通过全局选择器设置默认字体：

<style>
  /* 先定义字体 */
  @font-face {
    font-family: 'Switzer-Regular';
    src: url('../assets/fonts/Switzer-Regular.woff2') format('woff2'),
         url('../assets/fonts/Switzer-Regular.woff') format('woff'),
         url('../assets/fonts/Switzer-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }

  /* 全局应用字体 */
  * {
    font-family: 'Switzer-Regular', sans-serif;
    font-weight: 400;
    font-style: normal;
  }
</style>

2. 确保字体文件路径正确

根据NX项目结构调整字体路径：

• 如果字体文件在项目apps/[你的应用名称]/assets/fonts目录下，路径应改为../apps/[你的应用名称]/assets/fonts/...
• 另一种更可靠的方式是将字体文件复制到Storybook的静态资源目录（通常是.storybook/static/fonts），此时路径可写为/fonts/...

内容的提问来源于stack exchange，提问作者Akshay Kamble