使用 CRA/样式组件在 Storybook 中应用自定义字体？

Question

你好，我正在尝试将故事书与 React 结合使用。 目前正在使用由 create-react-app 构建并使用样式组件的应用程序。 现在我一直在将自定义字体导入故事书预览页面。

有趣的是，自定义字体在 safari 中工作正常，但在 chrome 中却不行。但我想知道如何在 chrome 中使用它，因为我们大部分时间都使用 chrome。 我在样式组件中有 grobalStyles ，包括字体。尝试了我在网上找到的一些解决方案，例如尝试将一些代码放入 preview-head.html 和 manager-head.html 中，但在 Chrome 中都不起作用。它适用于 google font API 的链接，包括 *-head.html 中的链接，但我需要使用本地的自定义字体。

有什么建议吗？

package.json

 "storybook": "start-storybook -p 6006 -s ./src",
 ...

文件夹结构

|- .storybook
   |- ...
|- src
   |- ...
   |- assets
      |- ...
      |- fonts
         |- NotoSansJP-Regular.ttf
         |- ... .ttf
         |- NotoSansJP.css
   |- lib
      |- ...
      |- styled-components
         |- grobalStyles.ts

.storybook/preview.js

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { addDecorator } from '@storybook/react';
import { theme } from '../src/lib/styled-components/theme';
import { GlobalStyle } from '../src/lib/styled-components/globalStyle';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
};

addDecorator((storyFn) => (
  <ThemeProvider theme={theme}>
   <GlobalStyle />
   {storyFn()}
  </ThemeProvider>
));

.storybook/webpack.config.js

const path = require('path');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loaders: ['file-loader'],
        include: path.resolve(__dirname, '../'),
      },
    ],
  },
};

GrobalStyle.js

import { createGlobalStyle } from 'styled-components';
import '../../assets/fonts/NotoSansJP-Regular.ttf';
import '../../assets/fonts/NotoSansJP-Bold.ttf';
import '../../assets/fonts/NotoSansJP-Light.ttf';

export const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: "Noto Sans JP";
    src: local("Noto Sans JP"),
      url("./assets/fonts/NotoSansJP-Regular.ttf") format("truetype");
    font-weight: normal;
  }
  @font-face {
    font-family: "Noto Sans JP";
    src: local("Noto Sans JP"),
      url("./assets/fonts/NotoSansJP-Bold.ttf") format("truetype");
    font-weight: bold;
  }
  @font-face {
    font-family: "Noto Sans JP";
    src: local("Noto Sans JP"),
      url("./assets/fonts/NotoSansJP-Bold.ttf") format("truetype");
    font-weight: 700;
  }
  @font-face {
    font-family: "Noto Sans JP";
    src: local("Noto Sans JP"),
      url("./assets/fonts/NotoSansJP-Light.ttf") format("truetype");
    font-weight: light;
  }
  * {
    font-family: "Noto Sans JP";
    font-size: 16px;
  }
  ...
`

还尝试过： preview-head.html 和 manager-head.html

<link rel="stylesheet" href="./assets/fonts/NotoSansJP.css" />
<style type="text/css">
 * {
    font-family: 'Noto Sans JP';
    font-size: 16px;
  }
</style>

Answer 1

您可以尝试此代码，也可以使用 webfontloader 其出色的字体自由度。

import { createGlobalStyle } from 'styled-components';
import NotoRegular from '../../assets/fonts/NotoSansJP-Regular.ttf';

export const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: "Noto Sans JP";
    src: local(${NotoRegular}),
      url(${NotoRegular}) format("truetype");
    font-weight: normal;
  }