如何在 Rails 6 和 Webpacker（以及引导程序和 SASS/SCSS）中安装自定义字体
Posted
技术标签:
【中文标题】如何在 Rails 6 和 Webpacker（以及引导程序和 SASS/SCSS）中安装自定义字体【英文标题】：How to install custom fonts in Rails 6 and Webpacker (and bootstrap and SASS/SCSS) 【发布时间】：2021-02-19 16:22:24 【问题描述】：我在使用本地字体（从 fonts.google.com 下载）时遇到问题。 [虽然我可以在 Google 上从外部引用下面示例中的字体，但我想尝试在本地使用该字体，因为最终我将使用 Google 上没有的其他自定义字体。]
我正在使用 Rails 6 (6.0.3.2)，以及 gem Webpacker 4（以及 gems bootstrap 4.5 和 sass-rails 6）。
我已将字体复制到：/app/javascript/fonts/source-sans-pro（source-sans-pro 是字体的名称），其中我引用的字体文件是：SourceSansPro-Regular.otf
在我的 application.scss (/app/javascript/src/stylesheets/application.scss) 中，我有以下内容：
@font-face
font-family: 'Source Sans Pro', sans-serif;
src: url('/media/fonts/source-sans-pro/SourceSansPro-Regular.otf') format("opentype");
在 application.scss 中，我还导入了我的 _custom.scss @import '_custom';
在我的 _custom.scss（同一目录）中，我有这段代码：
.vs-text
color: #fff2eb;
font-family: "Source Sans Pro", Tahoma, Geneva, Verdana, sans-serif;
...最后，在 application.html.erb 上，我有这个标签：<body class="vs-text">
当我启动应用程序时，Webpacker 编译成功（服务器日志），但我的字体没有显示。使用 Chrome 开发人员工具 (F12) 检查元素，表明正在尝试正确的字体系列样式，但这不是我的字体。我相信字体系列正在故障转移到列表中的后续字体。
关于我做错了什么的任何提示？
谢谢， 标记
【问题讨论】：
【参考方案1】：我是 Webpack 的新用户，不是一个好的 JS 编码器，但我设法让 Webpack 编译了我的字体。
实际上，在您的 CSS 中，当您指向“media”文件夹中的字体时，您指的是“public/packs/media”文件夹中的已编译资产。
虽然您不希望使用公用文件夹中的数据，但您确实希望编译该字体，以便最终在此文件夹中结束。
然后，不要指向“/media/fonts/source-sans-pro/SourceSansPro-Regular.otf”，而是要引用 javascript 文件夹中的字体：“../fonts/source-sans-pro /SourceSansPro-Regular.otf" 然后您将看到正确编译的字体并出现在“public/packs/media”文件夹中。
注意：OTF 不是最好的编译字体格式（https://creativemarket.com/blog/the-missing-guide-to-font-formats）。你最好通过这个网站把你的字体改成 WOFF 和 WOFF2 ：https://transfonter.org/
【讨论】：
当我尝试以您的方式引用字体时（src: url('../fonts/source-sans-pro/SourceSansPro-Regular.otf') format("opentype");，当 Webpacker 尝试编译时出现此错误...：找不到模块：错误：无法解析 '../fonts /source-sans-pro/SourceSansPro-Regular.otf' 但是感谢有关字体的提示 - 我会检查一下！
你可以试试url:，而不是asset-url:。其余的 CSS 也显示没有任何问题？
当我尝试src: asset-url('/media/fonts/source-sans-pro/SourceSansPro-Regular.otf') format("opentype"); 时，Webpacker 抱怨找不到模块，当我尝试src: asset-url('/media/fonts/source-sans-pro/SourceSansPro-Regular.otf') format("opentype"); 时，Webpacker 编译，但仍然没有字体。 （@Maxence，感谢您继续帮助解决问题。）
您不应指向媒体文件夹。虽然我没有正确地将您的 javascript 文件夹从“src/stylesheets”爬到字体文件夹。你可以试试src: asset-url('../../../fonts/source-sans-pro/SourceSansPro-Regular.otf') format("opentype");你明白我要去哪里。此外，最终，您的 SCSS 文件应该包含在一个包中（我的意思是在 javascrip/packs 文件夹中），并带有 `import "../src/stylesheets/etc...."。但是，如果您碰巧看到从 SCSS 文件编译的任何内容，您可能已经这样做了。
Maxence，感谢您的帮助和耐心等待。我认为我的路径“../fonts/(etc)”是正确的，但实际上并非如此。当我使用正确的相对路径时，它起作用了（正如你所建议的那样）。我还发现我在错误的级别应用了一类 CSS。再次感谢！ （鉴于我的“菜鸟”状态，我只能选择您已回答问题，而不能投票。再次感谢！）【参考方案2】：
添加字体的最简单方法 - 将这样的字体添加到 views/layouts/application.html.erb：
<link href="https://fonts.googleapis.com/css?family=Lato:400,900&display=swap" rel="stylesheet">
在<head>标签内
【讨论】：
Yshmarov - 同意；但是，在发布时，我计划将这种在 Google 上可用的字体替换为不可用的自定义字体（购买的自定义字体，我需要在服务器上托管）。以上是关于如何在 Rails 6 和 Webpacker（以及引导程序和 SASS/SCSS）中安装自定义字体的主要内容，如果未能解决你的问题，请参考以下文章
如何在 rails 6/webpacker 中引用 scss 文件路径？
Rails 5/6：如何在 webpacker 中包含 JS 函数？
如何通过 Webpacker 使用 Rails 6.1 安装 Alpine JS 3
如何在 Rails 6 和 Webpacker（以及引导程序和 SASS/SCSS）中安装自定义字体