【问题标题】:Resource interpreted as Font but transferred with MIME type text/html won't fix资源解释为字体但使用 MIME 类型 text/html 传输将无法修复
【发布时间】:2013-01-25 21:43:57
【问题描述】:

我正在尝试解决 Chrome 警告:

资源被解释为字体但使用 MIME 类型 text/html 传输

我想它正在阻止正确加载我的字体。我在css中使用了这段代码:

@font-face {
    font-family: 'stereofidelic';
    src: url('/css/fonts/stereofidelic.eot'); /* IE9 Compat Modes */
    src: url('/css/fonts/stereofidelic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/css/fonts/stereofidelic.woff') format('woff'), /* Modern Browsers */
         url('/css/fonts/stereofidelic.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/css/fonts/stereofidelic.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
@font-face {
    font-family: 'bebasneue';
    src: url('/css/fonts/BebasNeue.eot'); /* IE9 Compat Modes */
    src: url('/css/fonts/BebasNeue.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/css/fonts/BebasNeue.woff') format('woff'), /* Modern Browsers */
         url('/css/fonts/BebasNeue.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/css/fonts/BebasNeue.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
@font-face {
    font-family: 'karamuruh';
    src: url('/css/fonts/karamuruh.eot'); /* IE9 Compat Modes */
    src: url('/css/fonts/karamuruh.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/css/fonts/karamuruh.woff') format('woff'), /* Modern Browsers */
         url('/css/fontsh/karamuruh.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/css/fonts/karamuruh.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
@font-face {
    font-family: 'comicnotesmooth';
    src: url('/css/fonts/comicnotesmooth.eot'); /* IE9 Compat Modes */
    src: url('/css/fonts/comicnotesmooth.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/css/fonts/comicnotesmooth.woff') format('woff'), /* Modern Browsers */
         url('/css/fonts/comicnotesmooth.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/css/fonts/comicnotesmooth.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
@font-face {
    font-family: 'singlesleeve';
    src: url('/css/fonts/singlesleeve.eot'); /* IE9 Compat Modes */
    src: url('/css/fonts/singlesleeve.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/css/fonts/singlesleeve.woff') format('woff'), /* Modern Browsers */
         url('/css/fonts/singlesleeve.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/css/fonts/singlesleeve.svg#svgFontName') format('svg'); /* Legacy iOS */
    }        
@font-face {
    font-family: 'TravelingTypewriter';
    src: url('/css/fonts/TravelingTypewriter.eot'); /* IE9 Compat Modes */
    src: url('/css/fonts/TravelingTypewriter.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/css/fonts/TravelingTypewriter.woff') format('woff'), /* Modern Browsers */
         url('/css/fonts/TravelingTypewriter.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/css/fonts/TravelingTypewriter.svg#svgFontName') format('svg'); /* Legacy iOS */
    }  

我尝试在我的 .htaccess 中添加任何类型的指令,谷歌搜索我发现许多人的解决方案是在 .htaccess 中添加以下内容:

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf
AddType font/otf .otf
AddType font/opentype .woff

但我仍然从 Chrome 收到相同的警告:

Resource interpreted as Font but transferred with MIME type text/html: "http://mydomain/css/fonts/TravelingTypewriter.woff". index.php:195
Resource interpreted as Font but transferred with MIME type text/html: "http://mydomain/css/fonts/BebasNeue.woff". index.php:195
Resource interpreted as Font but transferred with MIME type text/html: "http://mydomain/css/fonts/TravelingTypewriter.ttf". index.php:195
Resource interpreted as Font but transferred with MIME type text/html: "http://mydomain/css/fonts/BebasNeue.ttf". index.php:195
Resource interpreted as Font but transferred with MIME type text/html: "http://mydomain/css/fonts/TravelingTypewriter.svg". index.php:195
Resource interpreted as Font but transferred with MIME type text/html: "http://mydomain/css/fonts/BebasNeue.svg". index.php:195

在我的本地网络服务器上一切正常,我不需要任何 AddType 指令到 .htaccess 中。

这是 24 小时谷歌搜索 + 尝试 stackoverflow.com 上建议的解决方案,但没有运气。

有什么帮助吗?

【问题讨论】:

  • 部分解决:将规则重写为 .htaccess 造成了令人讨厌的行为,我更改了一些规则,现在字体在 Chrome 中有效,但在 Firefox 中无效

标签: types mime


【解决方案1】:

如果你有mod rewrite,你应该设置如下规则:

RewriteEngine On
RewriteRule !(\.ico\.gif|\.png|\.jpe?g|\.css|\.js|\.php|\.eot|\.svg|\.ttf|\.woff|\.otf|^public/.*)$ index.php [nocase,last]

我使用 Apache。

【讨论】:

    猜你喜欢
    • 2014-10-16
    • 1970-01-01
    • 1970-01-01
    • 2011-07-18
    • 2011-12-24
    • 2012-05-20
    • 2014-07-12
    • 2014-12-01
    • 2014-05-20
    相关资源
    最近更新 更多