css - 在 Firefox 中渲染特殊字符

Question

我正在使用谷歌字体建立一个网站。特别是我使用的是“Archivo Black”。

该字体支持特殊字符，例如重音符号等，但是在 Firefox 中，这些重音符号的位置非常奇怪……而在 Chrome 中，它们看起来非常好。

我一直在环顾四周，但我认为没有办法通过 CSS 控制这些元素的位置，所以我真的不明白为什么会发生这种情况。

在下面的图片中，我只是强调了发生这种情况的一个实例，但如果你仔细观察，你会发现这是一个一致的问题。

Answer 1

问题可能是您使用'COMBINING ACUTE ACCENT' (U+0301) 和U字符而不是'LATIN SMALL LETTER U WITH ACUTE' (U+00FA) Ú。

前一个字符集不在您的字体中，因此浏览器必须使用其他系统字体，这就是它可能无法正确呈现的原因。您可以在开发工具的字体面板中检查这一点。
但是，你的字体确实有这个Ú字符，所以如果你在你的标记中修复它，你应该在所有浏览器中都很好。

@import url('https://fonts.googleapis.com/css?family=Archivo+Black');
body{
  font-family: 'Archivo Black', sans-serif;
}

<div>MU&#x301;SICA (U +  &#x301; )</div>

<div>MÚSICA (Ú)</div>