Question

我想渲染segoeuilight字体。我这样呈现： -

/*Font Face*/
@font-face
{ font-family: 'SegoeUI-Light'; src: url('segoeuilight.eot'); src: url('segoeuilight.eot?#iefix') format('embedded-opentype'), url('segoeuilight.woff') format('woff'), url('segoeuilight.ttf') format('truetype'), url('segoeuilight.svg#segoeuilight') format('svg'); font-weight: normal; font-style: normal }

@font-face
{ font-family: 'SegoeUI'; src: url('segoeui.eot'); src: url('segoeui.eot?#iefix') format('embedded-opentype'), url('segoeui.woff') format('woff'), url('segoeui.ttf') format('truetype'), url('segoeui.svg#segoeui') format('svg'); font-weight: normal; font-style: normal; } 
/*---------*/

这在所有浏览器上运行正常，但没有为firfox重新编写字体。它给firefox一个错误： - NetworkError：404 Not Found - segoeuilight.woff“

我已经放置了这个文件，我可以在我的位置看到这个文件。需要帮助才能让它在Firefox上运行。

由于

Answer 1

您为每个声明添加了多个src属性，因此，浏览器将采用最后一个有效声明。在你的情况下，它是WOFF案例，所以它试图加载它。相反，你应该逗号分隔你的src，以便你首先尝试加载最好的（本地例如），然后选择更糟糕的选项（例如WOFF非常轻量级，首先尝试，然后再回到SVG字体上更大）

试试这个：

/*Font Face*/
@font-face {
  font-family: 'SegoeUI-Light';
  src: url('segoeuilight.eot?#iefix') format('embedded-opentype'), url('segoeuilight.woff') format('woff'), url('segoeuilight.ttf') format('truetype'), url('segoeuilight.svg#segoeuilight') format('svg'); 
  font-weight: normal; 
  font-style: normal 
}

@font-face {
  font-family: 'SegoeUI';
  src: url('segoeui.eot?#iefix') format('embedded-opentype'), url('segoeui.woff') format('woff'), url('segoeui.ttf') format('truetype'), url('segoeui.svg#segoeui') format('svg'); 
  font-weight: normal; 
  font-style: normal; 
}

编辑删除EOT格式的双重包含，不应该需要它。

字体渲染不适用于Mozilla

1 个答案: