jquery - 字体渲染不适用于 Mozilla

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 格式的双重包含，不需要它。