故事书自定义字体未显示答案

【问题标题】：Storybook custom fonts not showing故事书自定义字体未显示
【发布时间】：2020-02-02 15:06:02
【问题描述】：

我有一个像这样的 Material UI 主题：

import { createMuiTheme } from '@material-ui/core/styles'

const primaryColor = '#009baa'

const theme = createMuiTheme({
  typography: {
    fontFamily: ['custom font here'].join(','),
    h1: { color: primaryColor },
    h2: { color: primaryColor, fontSize: '26px' },
  },
  palette: {
    primary: {
      main: primaryColor,
    },
  },
  overrides: {
    MuiButton: {
      root: {
        background: primaryColor,
        textTransform: 'none',
      },
    },
  },
})

export default theme

在我的主应用程序中使用如下：

...
      <ThemeProvider theme={theme}>
        <Provider store={store}>
          <Calendar />
        </Provider>
      </ThemeProvider>
...

我有一个这样的calendar.stories.js：

import { storiesOf } from '@storybook/react'
import { CalendarComponent } from "./Calendar"
import { formatAvailabilitiesData } from '../../__mocks__/availabilities'
import { log } from 'util';
import {muiTheme} from 'storybook-addon-material-ui'
import theme from '../../theme'

const props = {
    selectedAvailablity: formatAvailabilitiesData[0],
    selectedDate: new Date('2019-07-24T07:00:00.000Z'),
    dateClick: () => null,
}

storiesOf("Calendar", module)
  .addDecorator(muiTheme([PeabodyTheme]))
  .add("Basic", () => ( 
    <CalendarComponent {...props} />
))

故事书的 webpack 文件如下：

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  // Make whatever fine-grained changes you need
  config.module.rules.push(
  { 
    test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/, 
    loaders: ["file-loader"] 
  });

  // Return the altered config
  return config;
};

字体在应用程序中正确显示，但在故事书中却没有。我试图导入一些本地 css 和除字体系列作品之外的所有内容，这让人认为这与字体的加载有关。控制台也没有错误。

更新

我什至尝试像这样直接在我的组件中导入 CSS：

@font-face {
  font-family: 'Poppings';
  src: url('../../assets/fonts/Poppins-Regular.ttf')
}

h2 {
  font-family: 'Poppings'; 
}

虽然这次字体实际上是在网络选项卡中加载的，但故事书组件 h2 并没有继承自定义字体....

【问题讨论】：

这个问题你解决了吗？
@font-face 不会在 shadow dom 边界内下载字体。您必须尝试在顶级 dom 中添加 font-face

标签： javascript reactjs storybook

【解决方案1】：

我建议如下：

如果这些是本地字体，则忽略：为字体创建一个 css 文件，在该文件中您只需为您的字体定义 @font-face。
在您的 Storybook 配置所在的位置创建一个文件 preview-head.html，即 .storybook。
在此文件中，为包含字体定义的 css 文件各添加一行链接标记，例如：

<!-- local fonts -->
<link rel="stylesheet" href="./fonts/fonts.css" />

<!-- external font (I just copied the code for a random font from Google -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Castoro:ital@1&display=swap" rel="stylesheet">

【讨论】：