Html 为什么'；在这个例子中，我的@font-face工作不正常吗？

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

那么，为什么这个JSFIDLE中的字体不在开放式SAN中呢

html

---

（我正在处理的网站上的字体有问题，我认为这是解决问题的第一步）

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

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

解决这一问题通常很简单，只需将每个字体格式类型（包括EOT、WOF等）的MIME类型添加到服务器

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

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

---

您还可以通过搜索找到每种字体格式的正确MIME类型。结果很容易找到，但这里有一个有效MIME类型的大列表（只需从列表中找到您需要的类型）：

您使用的浏览器是什么？好吧，Fiddle会阻止跨域请求。为什么不尝试将其保存为一个普通HTML文件，并在浏览器中打开它呢？您可能应该在实际使用它们之前声明字体规则，因为从技术上讲，您的H2正在尝试加载一些尚不存在的内容。有没有办法在fiddle或codepen中测试@font face？这是一个更大问题的一部分，与我的计算机上的版本相比，正在工作的字体显示得非常糟糕。woff文件的URL给出404 Not Found。ttf资源存在，但浏览器似乎将其获取为0字节。这可能与内容类型为application/octet-stream有关。谢谢，我认为这不是问题。我以前也有过同样的问题，这就是原因。让我知道它是否有效。：）

<h2>Search for inventions</h2>

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;
}