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

时间:2015-01-09 15:51:59

标签: html css fonts font-face webfonts

我有一个jsfiddle设置只有一个基本的@ font-face css和一个h2。 css引用的字体文件都在服务器上,但是如果输入woff文件的url,则表示找不到它。我已经三次检查文件是否存在于它所指向的位置但是我想你只是通过将它们输入到url栏中来看到woff文件(编辑:对于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;
}

(我目前正在处理的网站上遇到字体问题,我认为这是修复它的第一步)

1 个答案:

答案 0 :(得分:0)

托管字体的服务器是您的服务器,还是第三方服务器如CDN?

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

修复此问题通常只是为每种字体格式类型inc添加MIME类型。 EOT,WOF等。到服务器。

您应该在Google上搜索如何为您的服务器类型执行此操作(例如,如果它是IIS,或Apache或其他内容)。

例如&#34;如何将mime类型添加到IIS&#34;。

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