浏览器不呈现WOFF字体(@ font-face)

问题描述

好的，我有一个我无法解决的问题，我正在尝试研究Internet Explorer 10中WOFF字体的使用情况.

Ok, I have an issue that I cannot figure out, I am trying to research usage of WOFF fonts in Internet Explorer 10.

我从 fontsquirrel 下载了工具包，并根据所包含的CSS和HTML文件向网络中添加了字体应用.(IIS 7上的ASP.NET MVC)

I downloaded kit from fontsquirrel, and based on the included CSS and HTML files I added fonts to web application. (ASP.NET MVC on IIS 7)

现在，TTF字体在Firefox和Chrome中完全可以正常工作(IE不支持)，但是WOFF字体似乎根本不起作用(所有较新的浏览器都应支持它们).如果我从下面删除了TTF部分-Firefox和Chrome也不呈现WOFF字体.

Now TTF fonts work perfectly fine in Firefox and Chrome (IE does not support it), however WOFF fonts do not seem to be working at all (they are supposed to be supported by all newer browsers). If I remove TTF section from below - Firefox and Chrome do not render WOFF font either.

我将文件的检查名称和简化名称增加了三倍，以确保这不是问题.

I tripled checked and simplified names of the files, to make sure that it is not an issue.

@font-face
{
    font-family: 'KaratulaNormal';
    src: url('fonts/karan.woff') format('woff'),
         url('fonts/karan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

h1
{
    text-transform: uppercase;
    font-family: KaratulaNormal;
}

为什么WOFF字体不起作用?

Why WOFF fonts are not working?

我知道这很难回答，但是欢迎提出任何有关如何解决它的建议.

I understand this would be difficult to answer, but any suggestion on how to troubleshoot it are welcome.

推荐答案

宾果游戏.我逐步进行了尝试，经过几次尝试，我意识到，如果我使用原始的工具包WOFF字体可以正常工作，那之后，我意识到我的代码实际上也可以工作，但前提是直接从文件系统运行而不是通过槽IIS.一旦我意识到有些谷歌搜索使我回答:

Bingo. I took it step by step, and after few tries I realized, that If I use original kit WOFF fonts actually work, after that I realized that my code actually works too, but only if it is run from the file system directly, not trough IIS. Once I realized that some googling led me to answer:

http://www.dirigodev.com/blog/404-errors-in-IIS7-for-embedded-woff-font-files/

基本上在IIS7下，您需要为WOFF字体配置mime类型，否则IIS将不为它们提供服务.

Basically under IIS7 you need to configure mime type for WOFF fonts, otherwise IIS does not serve them.

这篇关于浏览器不呈现WOFF字体(@ font-face)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！