woff 和 ttf 字体 404 未找到

Posted

技术标签:

【中文标题】woff 和 ttf 字体 404 未找到【英文标题】:woff and ttf fonts 404 not found 【发布时间】:2016-10-20 05:09:13 【问题描述】:

我正在使用 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 中)

谢谢!

【问题讨论】:

我在禁用 JS 时没有问题,在我的应用程序中它一直在发生(即使是 js)。这似乎是 webpack 中的一个问题 【参考方案1】:

解决了!我把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

【讨论】:

谢谢。您的解决方案也帮助了我。干得好 谢谢!花了很长时间试图修复控制台中的错误。 我没有为我工作。我在下面的屏幕截图中发布我的查询。请帮帮我。

以上是关于woff 和 ttf 字体 404 未找到的主要内容,如果未能解决你的问题,请参考以下文章

IIS 7 和字体真棒 .woff 404 错误

为啥我们应该在字体中包含 ttf、eot、woff、svg、...

为啥我们应该在字体中包含 ttf、eot、woff、svg、...

为啥上传到 CPANEL 后我的网页无法加载 woff 和 ttf 扩展字体

ttf,eot,woff,svg,字体格式介绍及使用方法

elementUI字体图标不显示问题