Question

我很难在主流浏览器中正确显示字体（我现在只使用Windows版BTW，无法访问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; }

字体甚至不再显示，并被默认的webfont替换为： 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中正常运行（没有Pixelation）！

所以有人可以帮我把第3个代码与FireFox一起使用，但跨浏览器字体兼容性让我疯了。

ps：我不是一个经验丰富的开发人员而且还是新手，我买了一个准备好的模板，我正在尝试改变其中的一些内容为我自己创建一个基本网站，我不确定这是否重要但我没有更改CSS表中的font-family名称，我在正确的文件夹中添加了字体，并将SRC URL编辑到了正确的路径。

我认为font-family名称是我自己在CSS表中引用的，浏览器实际上并没有对它进行验证。

任何帮助都会非常感谢！

Answer 1

更改

 url('../font/jura-demibold.svg') format('svg');

到

 url('../font/jura-demibold.svg') format('svg'),

编辑：这些小错误发生在我们最好的人身上。

Answer 2

你有一个逗号和一个分号混在一起。正确的块将是：

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

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

2 个答案: