@ font-face显示404错误的字体,我input.woff和.ttf

我使用font-face导入我的自定义网页字体,但字体不加载到浏览器它显示404文件未find控制台中的错误,但我的字体是在同一目录中,并且字体的名称是相同的,因为我在font-face提到

 @font-face { font-family: 'Proxima Nova'; src: url("../fonts/proximanova-light-webfont.eot"); src: url("../fonts/proximanova-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-light-webfont.woff") format("woff"), url("../fonts/proximanova-light-webfont.ttf") format("truetype"), url("../fonts/proximanova-light-webfont.svg#ProximaNovaLight") format("svg"); font-weight: 100; font-style: normal; } @font-face { font-family: 'Proxima Nova'; src: url("../fonts/proximanova-reg-webfont.eot"); src: url("../fonts/proximanova-reg-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-reg-webfont.woff") format("woff"), url("../fonts/proximanova-reg-webfont.ttf") format("truetype"), url("../fonts/proximanova-reg-webfont.svg#ProximaNovaRegular") format("svg"); font-weight: normal; font-style: normal; } 

此外,我试图添加这些行上.httaccess它不起作用,我也冲浪了没有人有正确的解决scheme,请帮助我。

 AddType application/vnd.ms-fontobject .eot AddType application/x-font-opentype .otf AddType image/svg+xml .svg AddType application/x-font-ttf .ttf AddType application/font-woff .wof 

您的网站是否在Windows服务器上运行? 如果是这样,请尝试为字体扩展名添加正确的Mime类型。 这可能是重复的: 为什么@ font-face在woff文件上抛出404错误?

顺便说一句,你在你的问题中的“AddType”代码块的最后一个句子有一个错字。 它的.woff(2 f's)。

尝试这个:

 @font-face { font-family: 'Proxima Nova'; src: url("./fontsproximanova-light-webfont.eot"); src: url("./fontsproximanova-light-webfont.eot?#iefix") format("embedded-opentype"), url("./fontsproximanova-light-webfont.woff") format("woff"), url("./fontsproximanova-light-webfont.ttf") format("truetype"), url("./fontsproximanova-light-webfont.svg#ProximaNovaLight") format("svg"); font-weight: 100; font-style: normal; } @font-face { font-family: 'Proxima Nova'; src: url("./fontsproximanova-reg-webfont.eot"); src: url("./fontsproximanova-reg-webfont.eot?#iefix") format("embedded-opentype"), url("./fontsproximanova-reg-webfont.woff") format("woff"), url("./fontsproximanova-reg-webfont.ttf") format("truetype"), url("./fontsproximanova-reg-webfont.svg#ProximaNovaRegular") format("svg"); font-weight: normal; font-style: normal; } 

AddType指令用于让服务器发送带有正确的MIME类型头的字体文件(以便浏览器知道如何解释它们),并且对404错误没有帮助。 404表示CSS中的url不正确。

让我知道如果它的作品。

我只想补充,因为这个问题困扰着我,Apache有一个别名/ icons /作为/etc/httpd/conf.d/autoindex.conf的一部分