Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/r/78.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 找不到woff和ttf字体404_Css_Fonts_Sass_Webpack_Font Face - Fatal编程技术网

Css 找不到woff和ttf字体404

Css 找不到woff和ttf字体404,css,fonts,sass,webpack,font-face,Css,Fonts,Sass,Webpack,Font Face,我正在使用webpack编译我的sass文件。 我有一个字体,看起来像这样: @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("

我正在使用webpack编译我的sass文件。 我有一个
字体
,看起来像这样:

@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
这就是我的网页包配置文件中的加载程序的样子

{
                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中不出现)


谢谢

解决了!我分离了
src
,如下所示:

@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

当我禁用JS时,我没有问题,在我的应用程序中它总是发生(eve'n with JS)。这似乎是网页中的一个问题谢谢。你的解决方案也帮助了我。干得好,谢谢!我花了很长时间试图修复控制台中的错误。我没有为自己工作。我在下面用截图发布我的查询。请帮帮我。