@字体面显示的字体404错误我进口.woff和.TTF [英] @font-face showing 404 error for fonts i imported .woff and .ttf

问题描述

现在用的字体面导入我的自定义Web字体但字体不加载到浏览器中它显示在控制台404文件未找到错误，但是我的字体都在同一个目录和字体的名称是一样的，因为我提到的字体面

  @字体面{
  字体家庭：比邻新星;
  SRC：网址（../字体/ proximanova-光webfont.eot）;
  SRC：网址（？../字体/ proximanova-光webfont.eot #iefix）格式（嵌入式OpenType字体），网址（../字体/ proximanova-光webfont.woff）格式（ WOFF），网址（../字体/ proximanova-光webfont.ttf）格式（TrueType字体），网址（../字体/ proximanova-光webfont.svg＃ProximaNovaLight）格式（ SVG）;
  字体重量：100;
  字体风格：正常;
}

@字体面{
  字体家庭：比邻新星;
  SRC：网址（../字体/ proximanova-REG-webfont.eot）;
  SRC：网址（？../字体/ proximanova-REG-webfont.eot #iefix）格式（嵌入式OpenType字体），网址（../字体/ proximanova-REG-webfont.woff）格式（ WOFF），网址（../字体/ proximanova-REG-webfont.ttf）格式（TrueType字体），网址（../字体/ proximanova-REG-webfont.svg＃ProximaNovaRegular）格式（ SVG）;
  字体重量：正常;
  字体风格：正常;
}
 

另外我想补充的.httaccess简化版，它的作品，我也冲浪超过 SO 没有人有正确的解决办法家伙请帮助我。

这些行

 将AddType应用/ vnd.ms-fontobject .eot
    将AddType应用程序/ x-字体的OpenType .otf
    将AddType图像/ SVG + XML .SVG
    将AddType应用程序/ x-字体，TTF的.ttf
    将AddType应用/字体WOFF .wof
 

解决方案

试试这个：

  @字体面{
  字体家庭：比邻新星;
  SRC：网址（./ fontsproximanova-光webfont.eot）;
  SRC：网址（./ fontsproximanova-光webfont.eot #iefix？）格式（嵌入式OpenType字体），网址（./ fontsproximanova-光webfont.woff）格式（WOFF），网址（./fontsproximanova-light-webfont.ttf）格式（TrueType字体），网址（./ fontsproximanova-光webfont.svg＃ProximaNovaLight）格式（SVG）;
  字体重量：100;
  字体风格：正常;
}

@字体面{
  字体家庭：比邻新星;
  SRC：网址（./ fontsproximanova-REG-webfont.eot）;
  SRC：网址（./ fontsproximanova-REG-webfont.eot #iefix？）格式（嵌入式OpenType字体），网址（./ fontsproximanova-REG-webfont.woff）格式（WOFF），网址（./fontsproximanova-reg-webfont.ttf）格式（TrueType字体），网址（./ fontsproximanova-REG-webfont.svg＃ProximaNovaRegular）格式（SVG）;
  字体重量：正常;
  字体风格：正常;
}
 

在将AddType 指令是让服务器发送了正确的MIME类型标题的字体文件（使浏览器知道如何跨preT它们） ，并不会帮助404错误。 404表示对我来说，网​​址 S在CSS的是不正确的。

让我知道，如果它的工作原理。

am using font-face to import my custom web font but the fonts are not loading into browsers it shows 404 file not found error in console but my fonts are in same directory and the names of the fonts are same as i mentioned in 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;
}

moreover i tried add these lines on .httaccess it does't works and i also surfed over SO no one have correct solution guys please help me.

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

解决方案

Try this:

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

The AddType directives are for getting the server to send the font files with the correct MIME type headers (so that the browser knows how to interpret them), and will not help with 404 errors. The 404 indicates to me that the urls in the CSS are incorrect.

Let me know if it works.

这篇关于@字体面显示的字体404错误我进口.woff和.TTF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！