小编Men*_*ene的帖子

我正在尝试在我的 rails 6 应用程序中导入字体几个小时。这是一个使用 Rails 6、Webpacker 4 和 PostCSS 的全新应用程序。

一切都通过 webpack（css、js、图像）加载（没有错误）。编译正确。图像正确显示（使用 css background:url）。

OTF/EOT/WOFF 字体：正确编译，@font-face 中的字体由 Webpack 加载和加盐。字体在视图中未正确呈现（我改为使用默认浏览器字体）。

我想我尝试了我所知道的一切。我将文件加载器切换为 url-loader 并返回，但没有成功。更改文件夹层次结构，尝试不同的字体文件，绝对网址（resolve-url-loader）。似乎没有任何效果。

任何人都会很友善地指出我正确的方向，或者分享使用 webpacker 在 rails 6 和 PostCSS 上加载的本地字体的工作配置？

预先感谢您的帮助。

这是我的配置：

javascript > 字体

raleway_thin-webfont.woff

javascript > 包 > application.js

require.context('../fonts/', true, /\.(eot|ttf|woff|woff2|otf)$/i);
import "./application.pcss";
import "js";

require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");

javascript > 包 > application.pcss

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/raleway_thin-webfont.eot'), format('eot');
}

@font-face {
  font-family: 'Amaranth';
  src: url('../fonts/Amaranth-Regular.otf'), format('otf');
}
#test-div { font-family: 'Raleway'; }

/postcss.config.js …