Amatic SC normal 700 - 问号字符的渲染问题？答案

【问题标题】：Amatic SC normal 700 - rendering issue with question mark character?Amatic SC normal 700 - 问号字符的渲染问题？
【发布时间】：2015-07-01 04:40:00
【问题描述】：

我使用的是来自 google 字体的 Amatic SC 700 normal。
这是谷歌字体的链接：https://www.google.com/fonts/specimen/Amatic+SC。

问题是现在 char ? 转换为 ® 。

我使用的css代码是：

@import url(http://fonts.googleapis.com/css?family=Amatic+SC:400,700);

body {
    font-family: 'Amatic SC', cursive;
    font-style: normal;
    font-weight: 700;
}

html 看起来像这样：

 <html> ???? </html>

这是问题的截图：

这是 jsfiddle 链接：http://jsfiddle.net/m4vev43a/

我测试过这个问题：

Chrome 版本 42.0.2311.90
火狐 37.0.1
Opera 12.16

知道如何解决这个问题吗？
我的浏览器疯了吗？
还是字体有问题？

更新：

使用时：

 @import url(http://fonts.googleapis.com/css?family=Amatic+SC);

所以没有后缀:400,700，问号字符显示正常。

不幸的是，在 Chrome、Firefox、Opera 中使用上面的代码 + 粗体文本完全弄乱了字母间距。

【问题讨论】：

标签： html css fonts webfonts google-webfonts

【解决方案1】：

这是 Amatic 字体的粗体版本的一个已知问题，从 2011 年 11 月的 bug report 中可以看出。您的字体已正确实现，只是字体文件本身存在错误。

一种解决方法是对问号使用常规变体。我知道这不是一个很好的解决方案，但您似乎无能为力。

【讨论】：

【解决方案2】：

我用来恢复这种情况的一种可能的解决方法。

注意：如果您需要信任每个浏览器的字母间距， 并不完美。

其实思路是：

在 std 字体之外再次定义 Amatic 字体，但没有 :700
生成一个特殊的类来处理带问号的句子

@font-face {
    font-family: 'Amatic';
    src: url(http://fonts.gstatic.com/s/amaticsc/v6/DPPfSFKxRTXvae2bKDzp5FtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/amaticsc/v6/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

.has-question-mark {
    font-family: Amatic;
}

【讨论】：