0

我很难在主要浏览器中使字体看起来正确（我现在只使用 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; }

此代码使字体看起来非常像素化：Google Chrome 和 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 表中参考，浏览器实际上并没有验证它。

任何帮助将非常感激！

4

2 回答 2

3

你有一个逗号和一个分号混淆了。正确的块是：

@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;
}
于 2013-10-29T15:29:41.117 回答
3

改变

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

至

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

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

于 2013-10-29T15:20:14.547 回答