如何使用@ rails/webpacker加载本地字体? [英] How do I load local fonts with @rails/webpacker?
问题描述
我在使用 @ rails/webpacker 加载本地字体文件时遇到问题.字体是在开发环境中加载的,而不是在生产环境中加载的.这似乎是一个非常简单的问题,但是我遇到了很多麻烦.下面是我的@ font-face代码.我的字体存储在app/assets/images/fonts
I’m having an issue loading local font files with @rails/webpacker. The fonts are loaded in the development environment but not in the production environment. It seems like a really simple issue but I have just had so much trouble with it. Below is my @font-face code. My fonts are stored in app/assets/images/fonts
app>资产>样式表> config> _fonts.scss
app > assets > stylesheets >config > _fonts.scss
@font-face {
font-family: "Axiforma";
src: url("fonts/Kastelov-AxiformaRegular.eot"); /* IE9 Compat Modes */
src: url("fonts/Kastelov-AxiformaRegular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("fonts/Kastelov-AxiformaRegular.otf") format("opentype"), /* Open Type Font */
url("fonts/Kastelov-AxiformaRegular.svg") format("svg"), /* Legacy iOS */
url("fonts/Kastelov-AxiformaRegular.ttf") format("truetype"), /* Safari, Android, iOS */
url("fonts/Kastelov-AxiformaRegular.woff") format("woff"), /* Modern Browsers */
url("fonts/Kastelov-AxiformaRegular.woff2") format("woff2"); /* Modern Browsers */
font-weight: 400;
font-style: normal;
}
在生产模式下获取字体文件会导致404错误.当我预编译资产时,我可以看到字体文件在文件名后附加了一个哈希.在交付给浏览器的css文件中,字体文件的url保持不变.为了解决这个问题,我尝试在环境模块规则中使用 file-loader,url-loader 和 resolve-url-loader 仍然无济于事.以下是我在webpack配置文件中的尝试.
Fetching the font files in production mode results in a 404 error. When I precompile the assets I can see that the font files have a hash appended to the filename. In the css file delivered to the browser, the url to the font files remains unchanged. To try to fix this I tried to use file-loader, url-loader and resolve-url-loader in the environment module rules yet to no avail. Below is my attempt in the webpack config file.
config> webpack> environment.js
config > webpack > environment.js
const { environment } = require('@rails/webpacker');
const webpack = require('webpack');
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
);
environment.module = {
rules: [
{
test: /\.(scss|sass|css)$/i,
use: [
{ loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production' } },
{ loader: 'postcss-loader', options: { sourceMap: true } },
'resolve-url-loader',
{ loader: 'sass-loader', options: { sourceMap: true } }
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
limit: '100000'
}
],
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
use: [
{
loader: 'url-loader',
limit: '100000'
}
]
}
]
};
module.exports = environment;
任何帮助将不胜感激:)
Any help would be greatly appreciated :)
推荐答案
我正在使用Rails 6.0.3,必须执行以下操作才能使用自定义字体:
I'm working with Rails 6.0.3 and had to do the following in order to use custom fonts:
-
创建一个字体文件夹:
app/javascript/application/fonts
并将我的字体放在此处(miso-bold.ttf
和miso-bold.otf
)
Create a fonts folder:
app/javascript/application/fonts
and placed my fonts there (miso-bold.ttf
andmiso-bold.otf
)
在 app/javascript/application/app.scss
或您的主 .scss
文件中,我放置了以下内容:
In app/javascript/application/app.scss
or your main .scss
file, I placed the following:
@font-face {
font-family: "Miso";
src: url("./fonts/miso-bold.ttf") format("truetype"), url("./fonts/miso-bold.otf") format("opentype");
}
然后在任何 .css
中使用它:
.someclass {
font-family: "Miso";
}
值得注意的是,应该将Webpacker配置为包括字体文件(最常见的是 .otf
和 .ttf
).检查 webpacker.yml
.
It's worth noting that Webpacker should be configured to include font files (.otf
and .ttf
most commonly). Check webpacker.yml
.
这篇关于如何使用@ rails/webpacker加载本地字体?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!