@font-face：Safari浏览器显示重音字符不正确

Question

我正在网站上使用通过@font-face引入的官方网络字体。Chrome/Firefox中显示重音字符（如“é”）正常，但在Safari中会呈现默认字体（例如Arial）。字体文件确实包含所有这些字符。

Chrome:

Safari:

这是使用的 @font-face 声明：

@font-face {
  font-family: 'simplon_bp_mono_lightlight';
  src: url('fonts/SimplonMono-Light-WebS.eot'); /* IE9 Compat Modes */
  src: url('fonts/SimplonMono-Light-WebS.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/SimplonMono-Light-WebS.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/SimplonMono-Light-WebS.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/SimplonMono-Light-WebS.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/SimplonMono-Light-WebS.webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

我尝试了这个解决方案，但它没有起作用：在Safari 5中未显示@font-face字体中的符号，在Safari 6和其他浏览器中正确显示

我是否漏掉了一些明显的东西？

- guylabbe.ca

---

这是你购买的字体吗？我找到了一篇文章，可能会对你有帮助：http://stackoverflow.com/questions/7997591/some-character-not-work-with-fontsquirrel-webfont - adamk22

你有检查过Safari是否使用了与其他浏览器不同的字体文件吗？你说这个字体包含那些字符，但是你是否查看了所有的文件？ - Mr Lister

谢谢您的回复！是的，我确实购买了字体，并将其与所有网页文件一起提供（在我的@font-face声明中列出）。但是，在使用此Web官方版本之前，我通过FontSquirrel转换了TTF文件。结果出现了相同的问题（这就是为什么我随后购买了Web版本，希望这可以解决问题）。 我确认Safari使用.woff文件；我强制Chrome使用相同的文件（而不是woff2），它仍然在Chrome中正确显示，这证明文件没有问题。（请注意，原始字体文件确实包括重音字符，在Chrome中正常工作） - guylabbe.ca

Answer 1

好的，我搞清楚了。似乎带有重音符号的字符与普通字符不同。我的客户可能从Word中复制粘贴文本（我猜测），因为如果我手动重新输入每个字符，它就可以正常工作。这真的很奇怪，因为如果我查看源HTML，字符看起来真的是一样的。这是一个愚蠢的结果，但也许将来会有人受益。如果有人能够解释这些字符之间的差异，尽管看起来完全相同（在Chrome中显示正确），我会很感兴趣学习。

- guylabbe.ca

---

谢谢您。我曾经遇到一个客户将Word中的文本粘贴到WordPress中时出现了完全相同的问题。如果有人知道如何解释这种现象，我会非常感兴趣。 - jorisw

{btsdaf} - jbgt

@guylabbe.ca 是的，我更想了解为什么完全相同的字符有不同的字符（例如“é”），但在使用文本编辑器时确实可以正常工作。 - jbgt

也许是由于Unicode等效性和规范化形式造成的。Safari可能会将带重音符号的字符分解（NFD）为两个字符，第二个字符为组合变音符号。在javascript控制台中尝试此操作：'\u00e9' == 'e\u0301'.normalize() - user2683246

我遇到了同样的问题，注意到从PDF复制的文本显示为e + ́而不是é。 - Simon Mo

Answer 2

您只需要将此标签添加到HTML的头部即可：

<META http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

您可以在此页面了解有关设置特定字符集的更多信息。

- Anthony Venegas

---

这不是与字符集相关的问题。 - guylabbe.ca

@guylabbe.ca 是的，它确实解决了一些情况，比如至少解决了我的问题。 - SoMa