关键词：
【中文标题】故事书自定义字体未显示【英文标题】：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">
【讨论】：
自定义字体显示在故事板上，但不在模拟器、设备上
】自定义字体显示在故事板上，但不在模拟器、设备上【英文标题】：customfontshowsonstoryboard,butnotonsimulator,device【发布时间】：2016-09-0513:16:43【问题描述】：潜伏了这么久，第一次用SO提问。我在Storyboard中为一些UITextFields和UITextVi... 查看详情
故事书未显示样式
】故事书未显示样式【英文标题】：Storybooknotshowingstyles【发布时间】：2021-04-0215:58:39【问题描述】：我有一个在内部使用Primereact对话框的对话框组件。当我为此制作故事书时，正在导入按钮的自定义css，因为它是在dialog.jsx中导... 查看详情
自定义字体未显示在字体系列列表中
】自定义字体未显示在字体系列列表中【英文标题】：CustomFontsnotshowingonfontfamilylist【发布时间】：2020-06-1014:16:10【问题描述】：我在macOSCatalina上使用Swift5和Xcode11.4.1。直到今天，我在应用自定义字体时都没有遇到任何问题。我... 查看详情
Silverlight 中未显示某些自定义字体
】Silverlight中未显示某些自定义字体【英文标题】：SomecustomfontsarenotshowinginSilverlight【发布时间】：2014-12-0806:04:30【问题描述】：我正在使用VisualStudio2010。我想构建一个应用程序来显示一些带有自定义字体的文本。所有字体都是T... 查看详情
Swift 故事板：拆分视图控制器在 MacOS 上未正确显示
】Swift故事板：拆分视图控制器在MacOS上未正确显示【英文标题】：Swiftstoryboards:splitviewcontrollernotshowingproperlyonMacOS【发布时间】：2014-11-0223:05:02【问题描述】：我正在尝试在MacOS上使用故事板和swift实现拆分视图控制器：由于某种... 查看详情
自定义字体未在用作背景图像的 SVG 模式中显示
】自定义字体未在用作背景图像的SVG模式中显示【英文标题】：CustomfontnotdisplayinginSVGpatternusedasbackground-image【发布时间】：2014-09-0709:18:30【问题描述】：我正在使用一种使用自定义字体的SVG模式，以便在HTML页面上使用该模式作... 查看详情
将样式组件与反应和故事书一起使用时未加载字体
】将样式组件与反应和故事书一起使用时未加载字体【英文标题】：Fontisnotloadingwhenusingstyled-componentswithreactandstorybook【发布时间】：2020-05-1512:26:03【问题描述】：我正在构建基于React、Typescript的应用程序并基于Webpack构建。所以... 查看详情
自定义字体未加载到对话框的 listView 中
】自定义字体未加载到对话框的listView中【英文标题】：customfontarenotloadedindialog\'slistView【发布时间】：2019-06-0506:37:01【问题描述】：我已经在drawable文件夹下定义了字体文件夹和xml文件。我正在使用对话并定义了List_view.xml和List_... 查看详情
将布局更改为自定义类后，UicollectionViewCell 未显示
...问题描述】：我将RFQuiltLayout用于我的uicollectionview。我的故事板包含Uiview+collectionview。collectionvie 查看详情
反应故事书插件旋钮未显示
】反应故事书插件旋钮未显示【英文标题】：reactstorybookaddonknobsnotshowing【发布时间】：2017-11-2106:12:38【问题描述】：我似乎无法让@storybook插件旋钮工作？它似乎并没有装饰实际的故事。非常关注this下面是我的代码..我使用getstor... 查看详情
故事书错误无法读取未定义的属性“位置”
】故事书错误无法读取未定义的属性“位置”【英文标题】：StorybookerrorCannotreadproperty\'location\'ofundefined【发布时间】：2020-09-1421:35:21【问题描述】：我正在尝试让我的Storybook与我的React应用程序一起工作。我正在使用redux4.0.1。... 查看详情
在故事书故事中使用类星体组件时无法读取未定义的属性“屏幕”
】在故事书故事中使用类星体组件时无法读取未定义的属性“屏幕”【英文标题】：Cannotreadproperty\'screen\'ofundefinedwhenusingquasarcomponentsinstorybookstory【发布时间】：2021-10-2200:34:48【问题描述】：我在使用Vue和Quasar渲染故事书中的quas... 查看详情
非故事板 xib 的容器视图未显示
】非故事板xib的容器视图未显示【英文标题】：ContainerViewisnotshowingfornonstoryboardxib【发布时间】：2016-04-2907:35:32【问题描述】：当我为Swift2.0使用不同的Xib文件时，我在XCode右下角的视图集合中找不到容器视图。如何将容器视图用... 查看详情
Xcode 9.2 故事板未正确显示
】Xcode9.2故事板未正确显示【英文标题】：Xcode9.2Storyboardnotdisplayingproperly【发布时间】：2017-12-1208:25:45【问题描述】：这与this问题有关，这并没有帮助我解决我的问题，我也检查了这个~/Library/Logs/DiagnosticReports并得到了IBDesignables... 查看详情
故事板中未显示导航栏
】故事板中未显示导航栏【英文标题】：NavigationBarnotshowinginStoryboard【发布时间】：2014-12-2220:08:14【问题描述】：我在viewController中嵌入了一个导航控制器，并且显示了一个导航栏项目（在大纲编辑器中），我可以更改标题，但... 查看详情
带有 vue 的故事书 - SassError：未定义的变量
】带有vue的故事书-SassError：未定义的变量【英文标题】：Storybookwithvue-SassError:Undefinedvariable【发布时间】：2021-02-1910:41:53【问题描述】：我正在使用带有Vue的故事书。我有一些我想使用的常用SCSS。Iamusingtheaddonin**main.js**addons:[\'@s... 查看详情
iOS主要故事板元素未显示
】iOS主要故事板元素未显示【英文标题】：iOSmainstoryboardelementsnotshowing【发布时间】：2016-07-2708:39:30【问题描述】：在我的故事板中，我从对象库中附加了一些元素。视图的大小和每个元素的大小设置为任意。我可以在编辑器中... 查看详情
在故事板或 xib 文件上为 iOS 应用程序使用自定义字体
】在故事板或xib文件上为iOS应用程序使用自定义字体【英文标题】：UsingcustomfontforiOSapponstoryboardsorxibfiles【发布时间】：2020-06-1707:32:05【问题描述】：我有我的应用程序的字体指南。字体是自定义的，我知道如何为iOS应用使用自... 查看详情