繁体   English   中英

自定义本地字体不适用于 webpack 5

Custom local fonts not working with webpack 5

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一些我想在我的项目中使用的本地字体。 我已经阅读了一些关于此的教程和问题,并且我正在关注我所看到的建议,但我的字体没有在浏览器中正确显示。 我正在使用 webpack 5。在我的 webpack 配置中:

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(woff|woff2|ttf)$/,
        use: {
          loader: "url-loader",
        },
      },
    ]
  }
}

我的src/assets/fonts/目录中有一堆 .tff 字体文件。 我有一个全局样式的 .scss 文件。 在那里,我定义了我想要使用的字体名称,以及 webpack 应该在哪里找到它们:

@font-face {
  font-family: "InterRegular";
  src: url("../assets/fonts/Inter-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "InterMedium";
  src: url("../assets/fonts/Inter-Medium.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "InterSemiBold";
  src: url("../assets/fonts/Inter-SemiBold.ttf") format("truetype");
  font-display: swap;
}
// etc

我相当肯定 webpack 会找到这些,因为如果我得到文件的路径错误,webpack 就会出错。 然后我尝试应用字体:

html,
body {
  font-family: "InterSemiBold", sans-serif;
}

没有错误,但字体未应用于页面。 当我查看我的网络选项卡时,我可以看到确实正在加载一个字体文件:

在此处输入图像描述

但这显然不是InterSemiBold 字体。 无论我使用什么字体,这个名字奇怪的 .tff 文件总是显示相同的衬线字体。

查看元素的计算值,我可以看到浏览器正在读取字体系列的"InterSemiBold", sans-serif值,但仍默认为Arial

在此处输入图像描述

我也尝试过使用带有 webpack 的file-loader字体,但这没有什么区别,许多人建议使用url-loader来代替。

我在这里做错了什么? 为什么我的字体没有被加载和应用?

1 个回复

您的开发工具屏幕截图表明您的实际页面/应用程序样式表期望字体系列名称为“Inter”。
所以你不需要为每个字体粗细使用不同的姓氏
并将您的@font-face规则更改为以下内容:

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/Inter-Regular.ttf') format('truetype')
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../assets/fonts/Inter-Medium.ttf') format('truetype')
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype')
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/Inter-Bold.ttf') format('truetype')
}

你的@font-face规则应该包含一个font-style值。
对于斜体样式,您可以将其更改为font-style: normal

font-url 必须使用字体样式的确切文件名(请注意,因为一些自动字体加载器会在内部重命名文件名或直接从 Google 加载更新的文件 - 导致文件名类似于“inter-v11-latin-800. ttf”)。

由于浏览器无法自动判断哪个中间粗体是“半粗体”或“轻”,因此您可以添加特定font-weight值,这些值可用于将所有字体粗细映射到不同的选择器,如下所示:

body{
    font-family:Inter;
    font-size:16px;
}

.medium{
    font-weight:500;
}

.semibold{
    font-weight:600;
}


strong, h1, h2,
.button{
    font-weight:700;
}

你也可以仔细检查你的主 css——它也可能包含一个单独的 @font-face 声明。

如果一切正常,您应该在开发工具中看到 .tff 文件,就像在 @font-face urls 中定义的一样(例如“Inter-Regular.ttf”)

还是行不通?

尝试通过浏览器中的绝对 URL打开字体。

字体文件连接测试示例
假设您编译的文件夹结构如下所示:

  • 最终 URL 是“myapp.com”
  • 主 CSS 位于 URL“myapp.com/css/main.css”下
  • 字体文件位于目录 URL“myapp.com/assets/fonts/”中(至少根据您的 css/编译代码)
  • 实际的字体文件应该在 URL“myapp.com/assets/fonts/Inter-Regular.ttf”下可用(可下载)

如果这不起作用 - 您需要修复@font-face规则中的 URL。

如果在编译过程中将资产复制/组装到新目录中,这一点尤其重要——因此以前的路径/URL 可能不会“自动”修复。

另一个原因可能是内联 css - 因此 css 成为编译的 HTML <head><body>的一部分 - 相对路径/URL 可能不再起作用 => 绝对路径可以解决这个问题(......尽管,任何体面的自动内联脚本应该足够聪明,可以相对于绝对 URL 进行翻译)。

编译好的css

最终的 css 还可能包含一些覆盖规则。
因此,在 devtools 中检查最终编译的 css 并搜索任何@font-face规则 - 作为最后的手段:将!important关键字添加到字体src以强制执行所需的 URL。

字体文件可能已损坏?

由于“inter”可作为免费的 google webfont 使用,您可以通过google webfonts helper获得“新鲜”副本

2 在 webpack 中使用本地网络字体

我正在尝试在我的 React 项目中使用一些本地网络字体。 我将它们包含在我的 main.scss 文件中,并通过 webpack 加载它们。 包构建正确,包括 main.scss 样式。 我看到 webpack 加载字体文件,并将它们复制到 public/fonts/,但我的包文件找不到字体。 ...

3 Webpack,加载本地字体时遇到麻烦

使用webpack时,加载本地字体时遇到一些问题。 我必须托管一些自己的字体,所以我在/client/fonts有一个带有字体的文件夹。 现在,我正在npm脚本中使用&amp;&amp; cp -R ./client/fonts dist/将它们加载到生产Web Pack构建中,以进行构 ...

4 使用Webpack 4加载自定义字体字体

尝试了不同的方式在webpack 4中加载自定义Gugi / Roboto字体。似乎没有一种方法可以正确加载该字体。 但是,当我在系统中安装字体时,它可以按预期工作-表示Css和应用正常运行。 因此,这似乎是一个webpack问题,我无法弄清楚。 index.js Webp ...

7 使用 webpack 2 和 vue-cli 加载本地字体

我正在使用 vue-cli webpack 模板,并尝试在我的项目中加载本地字体。 我无法正确获取字体路径。 我的路径应该如何? 我找到了一些关于我可能做错了什么的信息,但我无法弄清楚: https : //github.com/webpack-contrib/sass-loader#proble ...

8 Xcode 9自定义字体不起作用

自定义字体在Xcode 9中不起作用。但是,如果我在Xcode 8中打开相同的项目,自定义字体将按预期工作 我运行了这段代码以确保字体显示: 我已经确保字体在plist,检查目标成员资格以及复制包资源部分中。 这是一个Xcode错误吗? ...

9 iOS自定义字体不起作用

我正在尝试在我的应用中使用此字体 。 我已将它添加到plist和项目中,但由于某种原因它没有加载到标签上。 我试图用以下方法验证项目中的字体: 但是我得到了这个输出: ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM