如何将自定义字体添加到故事书组件构建器？

【问题标题】：How to add custom fonts to story book component builder?如何将自定义字体添加到故事书组件构建器？
【发布时间】：2020-11-16 17:44:44
【问题描述】：

我正在用 React + Storybook + Typescript 构建一个组件库

我还获得了一种新的字体样式，用于正在构建的新组件中

如何将字体类型添加到故事书中

我找到了一种可能的方法：https://medium.com/@mushti_dev/hey-e6faa20b910a

我从故事书中得到的线索：https://storybook.js.org/docs/configurations/add-custom-head-tags/

【问题讨论】：

标签： javascript reactjs styled-components storybook

【解决方案1】：

解决了

在 .storybook 文件夹中添加了一个 config.js 文件

并导入包含字体的 css 文件

导入'./../src/styles/icons/icons.css';

icons.css

@font-face {
  font-family: 'pvlolzicons';
  src:
    url('fonts/pvlolzicons.ttf?ur0pfm') format('truetype'),
    url('fonts/pvlolzicons.woff?ur0pfm') format('woff'),
    url('fonts/pvlolzicons.svg?ur0pfm#pvlolzicons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

【讨论】：