Question

我在我的新网站上使用了名为Gotham的字体。它不是字体准备好的，所以我自己做了。它在我的Mac上工作正常，并且在Chrome和Safari中的Windows机器上也能正常工作。但是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解决方案还是什么？

Answer 1

您是否包含了所有必要的字体类型？每个浏览器识别不同的字体格式如果您使用Font Squirrel：http://www.fontsquirrel.com/等服务转换了在Web上使用的字体，那么您应该已经提供了每种字体类型以及一些示例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，并注意到许多不一致之处。我认为你已经做了所有你能做的事情，没有主流浏览器的干预。祝你好运！

Windows中的字体平滑

1 个答案: