Amatic SC正常700 -渲染问题与问号字符?

时间:2021-04-09 22:24:50

I'm using the Amatic SC 700 normal from google fonts.
This is the link on google fonts : https://www.google.com/fonts/specimen/Amatic+SC .

我用的是Amatic sc700标准的谷歌字体。这是谷歌字体的链接:https://www.google.com/fonts/en/amatic +SC。

The issue is that right now the char ? is converted in ® .

现在的问题是碳?在®转换。

The css code I used is:

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

The html looks like this :

html是这样的:

 <html> ???? </html>

This is a screenshot of the issue : Amatic SC正常700 -渲染问题与问号字符?

这是这个问题的截图:

This is the jsfiddle link: http://jsfiddle.net/m4vev43a/

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

I tested this issue on:

我测试了这个问题:

  • Chrome Version 42.0.2311.90
  • Chrome版本42.0.2311.90
  • Firefox 37.0.1
  • Firefox 37.0.1
  • Opera 12.16
  • Opera 12.16

Any idea how I can fix this?
Are my browsers getting crazy?
Or it's a bug in the font?

知道我怎么解决吗?我的浏览器疯了吗?还是字体有问题?

Update:

更新:

When using :

当使用:

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

So without the suffix :400,700 the question mark character is displayed properly.

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

Unfortunately using the above code + bold text is totaly messing up with the letter spacing in Chrome, Firefox, Opera.

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

2 个解决方案

#1


5  

This is a known issue with the bold version of the Amatic font, as can be seen in this bug report from November, 2011. Your font was implemented correctly, it's just that the font file itself has a bug.

这是Amatic字体加粗版本的一个已知问题,可以从2011年11月的bug报告中看到。您的字体被正确地实现了,只是字体文件本身有一个错误。

A workaround is to use the regular variant for question marks. I know that's hardly a great solution but it seems there's not much else you can do.

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

#2


0  

One possible workaround I've used to recover this situation.

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

Note: is not perfect if you need to trust the letter spacing for each browser.

注意:如果您需要信任每个浏览器的字母间距,那么这样做并不完美。

Actually the idea is :

实际上这个想法是:

  • define again the Amatic font in addition the std one, but without the :700
  • 除了std之外,还要定义Amatic字体,但是不要使用:700
  • generate a special class to handle just the sentences with the question mark
  • 生成一个特殊的类来处理带有问号的句子
@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;
}

#1


5  

This is a known issue with the bold version of the Amatic font, as can be seen in this bug report from November, 2011. Your font was implemented correctly, it's just that the font file itself has a bug.

这是Amatic字体加粗版本的一个已知问题,可以从2011年11月的bug报告中看到。您的字体被正确地实现了,只是字体文件本身有一个错误。

A workaround is to use the regular variant for question marks. I know that's hardly a great solution but it seems there's not much else you can do.

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

#2


0  

One possible workaround I've used to recover this situation.

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

Note: is not perfect if you need to trust the letter spacing for each browser.

注意:如果您需要信任每个浏览器的字母间距,那么这样做并不完美。

Actually the idea is :

实际上这个想法是:

  • define again the Amatic font in addition the std one, but without the :700
  • 除了std之外,还要定义Amatic字体,但是不要使用:700
  • generate a special class to handle just the sentences with the question mark
  • 生成一个特殊的类来处理带有问号的句子
@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;
}