故事书自定义字体未显示

Posted 2023-02-19

【中文标题】故事书自定义字体未显示

【英文标题】：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

【参考方案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">