如何将自定义字体添加到故事书组件生成器中

Question

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

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

如何将字体输入添加到故事书

我找到了一个潜在的方法：https://medium.com/@mushti_dev/hey-e6faa20b910a

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

Answer 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;
}