2

我在我的新网站上使用了一种名为 Gotham 的字体。它还没有准备好字体，所以我自己做了。它在我的 Mac 上运行良好，在我的 Windows 机器上的 Chrome 和 Safari 上也运行良好。但字体在 IE 和 FireFox 中渲染不流畅

有关差异，请参见随附的图像。（我还不能发布图片，因为我是新注册用户，所以截图见这个链接：http: //i45.tinypic.com/f35hqq.png

这就是它的设置方式。我想我做得很好，因为字体显示在所有浏览器中，只是渲染在所有 Windows 浏览器中都不是最佳的。

@font-face {
font-family: 'gotham-light';
src: url('../fonts/gotham-light/gotham-light.eot');
src: url('../fonts/gotham-light/gotham-light.svg#gotham-light') format('svg'),
     url('../fonts/gotham-light/gotham-light.woff') format('woff'),
     url('../fonts/gotham-light/gotham-light.ttf')  format('truetype'),
     url('../fonts/gotham-light/gotham-light.svg#gotham-light') format('svg'),
     url('../fonts/gotham-light/gotham-light.eot?#iefix') format('embedded-opentype');
}

有没有什么办法解决这一问题？也许是一个 jQuery 解决方案之类的？

4

1 回答 1

1

您是否包含了所有必要的字体类型？每个浏览器识别不同的字体格式。如果您使用 Font Squirrel 之类的服务将字体转换为在 Web 上使用：http ://www.fontsquirrel.com/那么您应该已经获得了每种字体类型以及一些示例 CSS（如下）以插入. 确保在 @font-face 选择器中包含每种格式，以优化所有浏览器的字体：

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

希望这可以帮助！Gotham 是一个很棒的字体 :)

编辑：Windows 在正确显示字体方面存在一些问题。我经常使用 Mac OS 和 Windows，并注意到许多不一致之处。我认为您已经完成了所有可以做的事情，而无需主要浏览器的干预。祝你好运！

于 2012-10-29T05:02:05.043 回答