css - 在没有 htaccess/iis 的元素中使用自定义字体会导致 "Resource interpreted as Font but transferred with MIME type text/html"

标签 css fonts

我正在创建一个小元素,我打算在其中使用自定义字体。

现在我只是在我的 Windows 8 机器上本地运行它,没有任何 IIS/apache 服务器。

然后我在 Chrome 控制台中收到以下错误:

Resource interpreted as Font but transferred with MIME type text/html: 

如何解决?我可以在 StackOverflow 上找到的其他答案假定在 IIS 上使用像 apache (.htaccess) 或 web.config 这样的服务器。

我的代码如下:

CSS:

@font-face {
  font-family: 'ProximaNova';
  src: url('../fonts/ProximaNova/2B61CF_7_0.eot');
  src: url('../fonts/ProximaNova/2B61CF_7_0.eot?#iefix') format('embedded-opentype'), url('../fonts/ProximaNova/2B61CF_7_0.otf') format('truetype'), url('../fonts/ProximaNova/2B61CF_7_0.woff') format('woff'), url('../fonts/ProximaNova/2B61CF_7_0.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'ProximaNova';
  src: url('../fonts/ProximaNova/2B61CF_6_0.eot');
  src: url('../fonts/ProximaNova/2B61CF_6_0.eot?#iefix') format('embedded-opentype'), url('../fonts/ProximaNova/2B61CF_6_0.otf') format('truetype'), url('../fonts/ProximaNova/2B61CF_6_0.woff') format('woff'), url('../fonts/ProximaNova/2B61CF_6_0.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'ProximaNova';
  src: url('../fonts/ProximaNova/2B61CF_8_0.eot');
  src: url('../fonts/ProximaNova/2B61CF_8_0.eot?#iefix') format('embedded-opentype'), url('../fonts/ProximaNova/2B61CF_8_0.otf') format('truetype'), url('../fonts/ProximaNova/2B61CF_8_0.woff') format('woff'), url('../fonts/ProximaNova/2B61CF_8_0.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

body {
    font-family: 'ProximaNova';
}

HTML:

<!DOCTYPE html>
<html>

    <head>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

        <link rel="stylesheet" type="text/css" href="assets/styles/main.css">
    </head>

    <body>
        <h1>Hello world</h1>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </body>
</html>

最佳答案

就像任何其他服务器一样,您必须将 mimetype 添加到配置文件并重新启动服务器。我有 nginx 的背景,但我找到了 IIS 的这个页面,它应该可以帮助您解决问题。

http://technet.microsoft.com/en-us/library/cc725608(v=ws.10).aspx

编辑:根据此页面,在 IIS 7 中,您可以像这样在命令行上添加它:

appcmd set config /section:staticContent /+"[fileExtension=' eot ',mimeType=' font/eot ']"

基本上你需要找到 mime 类型列表并添加你的字体

这是字体 mime 类型及其扩展的示例

        font/ttf ttf;
        font/otf otf;
        font/woff woff;

关于css - 在没有 htaccess/iis 的元素中使用自定义字体会导致 "Resource interpreted as Font but transferred with MIME type text/html",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25099325/

相关文章:

html - 当字体上方有烦人的空间时使用 CSS 垂直对齐文本

css - 跨度 :hover elements not working for my box

CSS半动态宽度

CSS,只允许 1 个 child 扩展到 parent 之外。 float 图片必须留在里面

css - 按钮不进入div?

java - 如何在 Java 中从 .png 文件创建字体?

html - 在 UL 中水平居中导航的问题

ios - 如何使用 Swift 将自定义字体添加到 iOS 中的 imglyKit SDK 中?

css - 什么是系统字体堆栈?

css - Internet Explorer 8 中的字体问题