找不到 woff 和 ttf 字体 404
woff and ttf fonts 404 not found
我正在使用 webpack 编译我的 sass 文件。
我有一个看起来像这样的 font-face
:
@font-face
font-family: "Alef"
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.eot")
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.eot?#iefix") format("embedded-opentype"), url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.woff") format("woff"), url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.ttf") format("truetype"), url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.svg#alefbold") format("svg")
font-weight: bold
font-style: normal
这就是我的 webpack 配置文件中加载程序的样子
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?[a-z0-9=&.]+)?$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
{
test: /\.sass$/,
exclude: /node_modules/,
loader: 'raw-loader!sass-loader'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
但是,我在 ttf 和 woff 上得到 404,所以这种字体只出现在 chrome(不出现在 firefox 和 edge 中)
谢谢!
已解决!我把 srcs
分开了,像这样:
@font-face
font-family: "Alef"
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.eot")
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.eot?#iefix") format("embedded-opentype")
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.woff") format("woff")
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.ttf") format("truetype")
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.svg#alefbold") format("svg")
font-weight: bold
font-style: normal
我正在使用 webpack 编译我的 sass 文件。
我有一个看起来像这样的 font-face
:
@font-face
font-family: "Alef"
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.eot")
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.eot?#iefix") format("embedded-opentype"), url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.woff") format("woff"), url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.ttf") format("truetype"), url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.svg#alefbold") format("svg")
font-weight: bold
font-style: normal
这就是我的 webpack 配置文件中加载程序的样子
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?[a-z0-9=&.]+)?$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
{
test: /\.sass$/,
exclude: /node_modules/,
loader: 'raw-loader!sass-loader'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
但是,我在 ttf 和 woff 上得到 404,所以这种字体只出现在 chrome(不出现在 firefox 和 edge 中)
谢谢!
已解决!我把 srcs
分开了,像这样:
@font-face
font-family: "Alef"
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.eot")
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.eot?#iefix") format("embedded-opentype")
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.woff") format("woff")
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.ttf") format("truetype")
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.svg#alefbold") format("svg")
font-weight: bold
font-style: normal