为什么我的@font-face 在这个例子中不起作用？答案

【问题标题】：Why doesn't my @font-face work in this example?为什么我的@font-face 在这个例子中不起作用？
【发布时间】：2015-03-07 23:53:55
【问题描述】：

我有一个 jsfiddle，只有一个基本的 @font-face css 和一个 h2。 css 引用的字体文件都在服务器上，但是如果你输入 woff 文件的 url，它会说它没有找到。我已经三次检查文件是否存在于它所指向的位置，但我猜你只是无法通过将 woff 文件输入到 url 栏中来查看它们（编辑：svg 相同）。

那么，为什么这个 jsfiddle 中的字体不在 open sans 中？

http://jsfiddle.net/rw2sbq8y/1/

html

<h2>Search for inventions</h2>

css

h2 {
    font-family:'open sans-test';
    font-size:24px;
    font-weight:normal;
}

@font-face {
    font-family: 'open sans-test';
    src: url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.eot');
    src: url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.woff') format('woff'),
         url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

（我目前正在处理的网站上的字体有问题，我认为这里的这一点是修复它的第一步）

【问题讨论】：

你用的是什么浏览器？
AFAIK，Fiddle 阻止跨域请求。为什么不尝试将其保存为纯 HTML 文件，然后在浏览器中打开它？
您可能应该在实际使用字体规则之前声明它们，因为您的 H2 在技术上试图加载尚不存在的内容。
有没有办法在 fiddle 或 codepen 中测试@font-face？与我电脑上的版本相比，正在工作的字体显示得非常糟糕，这是一个更大问题的一部分。
woff 文件的 URL 给出 404 Not Found。 ttf 资源存在，但浏览器似乎将其视为 0 字节。这可能与 Content-Type 是 application/octet-stream 有关。

标签： html css fonts font-face webfonts

【解决方案1】：

托管字体的服务器是您的服务器，还是像 CDN 这样的第三方服务器？

如果是你的，我过去遇到的一个常见问题是服务器不知道如何为你提供字体。

解决这个问题通常很简单，只需为每种字体格式类型添加 MIME 类型。 EOT、WOF 等到服务器。

您应该在 Google 上搜索如何针对您的服务器类型执行此操作（例如，如果它是 IIS、Apache 或其他）。

例如“如何将 mime 类型添加到 IIS”。

您还可以通过搜索找到每种字体格式的正确 MIME 类型。结果很容易找到，但这里有一个有效 MIME 类型的大列表（只需从列表中找到您需要的那些）：http://www.freeformatter.com/mime-types-list.html

【讨论】：

谢谢，我想就是这样
没问题。我曾经遇到过同样的问题，这就是原因。让我知道它是否有效。 :)