0

我想渲染 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 上运行。

谢谢

4

1 回答 1

0

您为每个声明添加了多个src属性，因此，浏览器将采用最后一个有效的属性。在您的情况下，它是 WOFF 情况，因此它试图加载它。相反，您应该用逗号分隔您src的 s，以便您尝试首先加载最好的（本地例如），然后是更差的选项（例如 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 格式的双重包含，不应该需要它。

于 2013-07-30T08:50:23.380 回答