谷歌字体在 Chrome 中被剪裁

【问题标题】：Google font is clipped in Chrome谷歌字体在 Chrome 中被剪裁
【发布时间】：2014-06-11 18:55:18
【问题描述】：

我在我的一个网站中使用谷歌字体“Bubbler one”，它只在 Chrome 下显示为半行。它在 FF 和 IE 中运行良好。在我直接从谷歌页面在 Chrome 中测试字体本身之前，我一直在努力寻找解决方案：

Bubbler one

在 Chrome 下，它只显示半行。

您对导致该问题的原因以及如何解决它有任何想法吗？

【问题讨论】：

对我来说也一样。看起来像一个已知的错误code.google.com/p/googlefontdirectory/issues/detail?id=250。你读过stackoverflow.com/questions/8576807/…吗？
你能给我们提琴吗？
不值得，和google网站上的问题一模一样。
与 webkit 无关，我只是检查了我的 iPhone。
Opera 也出现同样的问题，可能是 webkit + windows？

标签： html css fonts

【解决方案1】：

我按照以下步骤解决了问题：

1) 从 Google 下载文件

2) 继续 fontsquirrel 并转换 .ttf 文件。

3) 在本地托管并使用以下代码：

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

最后使用它：

font-family: 'bubbler_oneregular';

希望这可能对你们中的一些人有所帮助，这也适用于其他 Google 字体。

【讨论】：