@font-face 未在反应应用程序中加载（故事书）

Posted 2023-02-19

【中文标题】@font-face 未在反应应用程序中加载（故事书）

【英文标题】：@font-face not loading in react app (storybook)

【发布时间】：2019-12-27 22:33:56

【问题描述】：

我在从本地加载字体时遇到问题，我正在指向目录。有人可以帮我吗？

这是我的代码

@font-face 
  font-family: 'My font';
  src: url('./fonts/Myfonts-webfont.eot');
  src: url('./fonts/Myfonts-webfont.eot?#iefix') format('embedded-opentype'),
    url('./fonts/Myfonts-webfont.woff') format('woff'),
    url('./fonts/Myfonts-webfont.ttf') format('truetype'),
    url('./fonts/Myfonts-webfont.svg#my_fonts_otbook') format('svg');
  font-weight: normal;
  font-style: normal;


and using it as 
.btn 
  font-family: 'My font', sans-serif;
  max-width: 100%;
  width: 20%;
  height: 8%;

【问题讨论】：

你遇到了什么错误？

我在加载我的应用程序时没有收到任何错误，加载的是无衬线字体而不是我的字体。

当我构建我的应用程序时，我收到了来自 webpack 的性能警告

资产：font/myfonts-Book.ttf (315 KiB) font/myfonts-Semibold.ttf (257 KiB) 供应商~main.aa2cd040f0c1fba7504e.bundle.js (1.52 MiB) 入口点大小限制：The以下入口点的组合资产大小超过了建议的限制 (244 KiB)。这会影响网络性能。

【参考方案1】：

我建议看看这个

还取决于您将它们存储在哪里，即您必须指向目录的资产/字体。

font-face syntax

例子

@font-face 
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺︎'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");

【讨论】：

我使用相同的语法忘记将其包装在 @font-face....... 中，同时在这里发帖

【参考方案2】：

我尝试了不同的方法，终于找到了问题所在。它是导致问题的故事书 web-pack 配置。我没有将 module.rules 推送到 storybook 默认 webpack 配置，而是覆盖了规则并且它起作用了。

【参考方案3】：

您是否使用 webpack 文件加载器来加载路径，您不必指定字体文件所在的位置。只要您将字体文件包含在 src/assets/fonts 中，file-loader 就会为您找到它。