未在Node.js项目中显示加载的字体
我正在尝试在我的node.js项目中显示google font。我必须添加file-loader才能加载.ttf文件,但未显示。似乎加载良好-这是我的终端输出:
这是我的webpack.config:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const javascript = {
test: /\.(js)$/,
use: [{
loader: 'babel-loader',
options: { presets: ['env'] }
}],
};
const postcss = {
loader: 'postcss-loader',
options: {
plugins() { return [autoprefixer({ browsers: 'last 3 versions' })]; }
}
};
const styles = {
test: /\.(scss)$/,
use: ExtractTextPlugin.extract(['css-loader?sourceMap', postcss, 'sass-loader?sourceMap'])
};
const fonts = {
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './public/fonts/'
}
}
]
}
const uglify = new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false }
});
const config = {
entry: {
App: './public/javascripts/app.js'
},
devtool: 'source-map',
output: {
path: path.resolve(__dirname, 'public', 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [javascript, styles, fonts]
},
plugins: [
new ExtractTextPlugin('style.css'),
]
};
process.noDeprecation = true;
module.exports = config;
浏览器显示已应用字体(已在Chrome和Firefox中验证):
但未显示:
应该是(Android Cordova):
是:
浏览器是否告诉我将其设置为Oswald,但出于某种原因又恢复为默认设置?
我的CSS:
.device {
@font-face {
font-family: 'Oswald';
font-display: auto;
src: url("../fonts/Oswald-VariableFont_wght.ttf");
font-weight: normal;
font-style: normal;
}
h2 {
font-family: 'Oswald';
text-transform: uppercase;
}
...
}
我已验证路径“ ../fonts/Oswald-VariableFont_wght.ttf”是正确的。例如。如果将其更改为“ ... / fonts / Oswald-VariableFont_wght.ttf”,则会收到新错误。
我想念什么?
更新:如果在@import url(":400");
的末尾添加@font-face
,我可以使字体正确显示,因此我怀疑问题是如何使用webpack配置加载字体。我会玩...
似乎您的style.css
文件已编译在public
目录中。因此,在这种情况下,字体的路径为./fonts/Oswald-VariableFont_wght.ttf
。
未在Node.js项目中显示加载的字体
我正在尝试在我的node.js项目中显示google font。我必须添加file-loader才能加载.ttf文件,但未显示。似乎加载良好-这是我的终端输出:
这是我的webpack.config:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const javascript = {
test: /\.(js)$/,
use: [{
loader: 'babel-loader',
options: { presets: ['env'] }
}],
};
const postcss = {
loader: 'postcss-loader',
options: {
plugins() { return [autoprefixer({ browsers: 'last 3 versions' })]; }
}
};
const styles = {
test: /\.(scss)$/,
use: ExtractTextPlugin.extract(['css-loader?sourceMap', postcss, 'sass-loader?sourceMap'])
};
const fonts = {
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './public/fonts/'
}
}
]
}
const uglify = new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false }
});
const config = {
entry: {
App: './public/javascripts/app.js'
},
devtool: 'source-map',
output: {
path: path.resolve(__dirname, 'public', 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [javascript, styles, fonts]
},
plugins: [
new ExtractTextPlugin('style.css'),
]
};
process.noDeprecation = true;
module.exports = config;
浏览器显示已应用字体(已在Chrome和Firefox中验证):
但未显示:
应该是(Android Cordova):
是:
浏览器是否告诉我将其设置为Oswald,但出于某种原因又恢复为默认设置?
我的CSS:
.device {
@font-face {
font-family: 'Oswald';
font-display: auto;
src: url("../fonts/Oswald-VariableFont_wght.ttf");
font-weight: normal;
font-style: normal;
}
h2 {
font-family: 'Oswald';
text-transform: uppercase;
}
...
}
我已验证路径“ ../fonts/Oswald-VariableFont_wght.ttf”是正确的。例如。如果将其更改为“ ... / fonts / Oswald-VariableFont_wght.ttf”,则会收到新错误。
我想念什么?
更新:如果在@import url(":400");
的末尾添加@font-face
,我可以使字体正确显示,因此我怀疑问题是如何使用webpack配置加载字体。我会玩...
似乎您的style.css
文件已编译在public
目录中。因此,在这种情况下,字体的路径为./fonts/Oswald-VariableFont_wght.ttf
。