Amatic SC normal 700 - 问号字符的渲染问题?

时间:2015-04-23 06:58:02

标签: html css fonts webfonts google-webfonts

我使用谷歌字体中的 Amatic SC 700普通 这是谷歌字体上的链接:https://www.google.com/fonts/specimen/Amatic+SC

现在的问题是,?转化了®字符。

我使用的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>

这是该问题的屏幕截图: enter image description here

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

我测试了这个问题:

  • Chrome版本42.0.2311.90
  • Firefox 37.0.1
  • Opera 12.16

知道如何解决这个问题吗? 我的浏览器是否变得疯狂? 或者它是字体中的错误?

更新

使用时:

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

因此,如果没有后缀:400,700,问号字符将正确显示。

不幸的是,使用上面的代码+粗体文字完全搞乱了Chrome,Firefox,Opera中的字母间距。

2 个答案:

答案 0 :(得分:5)

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

解决方法是将常规变量用于问号。我知道这不是一个很好的解决方案,但似乎没有其他你能做的事情。

答案 1 :(得分:0)

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

注意:如果您需要信任每个浏览器的字母间距,则不完美。

实际上这个想法是:

  • 再次定义Amatic字体以及std one,但没有: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;
}