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

Question

我有一个 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;
}

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

Answer 1

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

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

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

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

例如"how to add mime type to IIS".

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

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

Why doesn't my @font-face work in this example?

html

css

fonts

webfonts

font-face