如何使用 @fontface 将自定义字体添加到 Storybook？（需要故事书 6.5.5 版的更新答案）？答案

【问题标题】：How to add custom font using @fontface to Storybook? (Need updated answer for storybook version 6.5.5)?如何使用 @fontface 将自定义字体添加到 Storybook？（需要故事书 6.5.5 版的更新答案）？
【发布时间】：2022-10-16 08:27:20
【问题描述】：

我已经尝试了所有在线可用的解决方案来在 Storybook 中添加自定义字体，但失败了。以下是我根据solution 添加的 .storybook 文件夹下的文件：

webpack.config.js：

const path = require('path');

module.exports = async ({ config }) => {
  // fonts
  config.module.rules.push({
    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      },
    ],
    include: path.resolve(__dirname, '../'),
  });

  return config;
};

preview.head.html

<style type="text/css">
  @font-face {
    font-family: 'Eina';
    src: url('../src/styles/Eina03-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: 'Eina';
    src: url('../src/styles/Eina03-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
  }
  @font-face {
    font-family: 'Eina';
    src: url('../src/styles/Eina03-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }
</style>

main.js

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  staticDirs: ['../public', '../public/fonts'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    return config;
  },
};

字体存储在 src/styles/ 中。另外，我已经有了 main.js 文件，所以我忽略了需要根据 solution 添加的 config.js

任何帮助将不胜感激。

【问题讨论】：

标签： reactjs next.js storybook nextjs-storybook

【解决方案1】：

我在使用基于文件加载器的方法时也遇到了问题。这是我如何让它工作的：

文件夹结构


├── .storybook/
│   ├── main.js
│   └── preview-head.html
└── src/
    └── assets/
        └── fonts/
            └── custom-font.otf

预览-head.html

<style type="text/css">
    @font-face {
        font-family: 'custom-font';
        src: url('fonts/custom-font.otf');
    }
</style>

main.js

const path = require('path');

module.exports = {
  stories: [...],
  addons: [...],
  staticDirs: ['../src/assets'],
  framework: '@storybook/react',
};

这里的关键是staticDirs。您将能够相对地从您在那里定义的内容中引用您的所有资产。

要更直接地回答您的问题，您需要更新您的staticDirs 以包含src/styles 并通过url('Eina03-Regular.ttf') 在@font-face src 中引用您的字体

【讨论】：