html - @Font-Face 跨浏览器兼容性问题

Question

我很难让字体在主要浏览器中正常显示(顺便说一句，我现在只使用 Windows 版本，无法访问 Mac)，我会尝试提及代码和它在我对 SVG 行所做的每次更改时的行为方式，因为这是大多数人在对类似问题进行一些研究后建议更改的内容。

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

此代码使字体看起来非常像素化: 谷歌浏览器和 Safari

但是它在 FireFox 和 IE 中看起来不错。

这是第二个代码(我提高了 SVG 行):

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

字体甚至不再显示，取而代之的是默认的网络字体: FireFox、Chrome 和 Safari

在 IE 中看起来仍然正常。

最后，当我从 SVG 行中删除“#RobotoLight”时，如下所示:

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

字体仍未在 FireFox 中显示，但它现在可以在 Chrome、Safari 和 IE 中正常工作(没有像素化)!

所以请有人帮我让第三个代码也能与 FireFox 一起工作，跨浏览器字体兼容性让我发疯。

ps: 我不是一个经验丰富的开发人员，而且还是新手，我买了一个现成的模板，我试图改变其中的一些东西来为我自己创建一个基本的网站，我不确定这是否重要但我没有更改 CSS 表中的字体系列名称，我将字体添加到正确的文件夹中并将 SRC URL 编辑到正确的路径。

我假设字体系列名称是供我自己在 CSS 表中引用的，浏览器实际上并不验证它。

任何帮助将不胜感激!

Answer 1

您混淆了逗号和分号。正确的 block 是:

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