Question

我正在尝试建立一个wordpress博客（不幸的是瑞典语），并且在一个帖子中，两个人彼此独立，注意到字体正在改变句子：

Wrong font

他们都使用Chrome运行Windows 7，我试图在我的linux，mac和iOS系统上复制这种字体更改，但对我来说它正确地渲染了。例如，在使用最新的Firefox的Ubuntu上，字体保持不变：

correct font

为什么会出现这种奇怪的行为，我该怎么做才能解决这个问题？我真的不知道从哪里开始......

段落的帖子是here。这是段落后面的HTML呈现错误：

<p><strong>Rasmus:</strong> Groggen smakar frihet kamrat! 
Eller, nä&#8230; det smakar vodka — och — Coca-Cola, varken
mer eller mindre. Hade varit gott med lime i, men då är det 
ju ingen grogg längre&#8230;</p>

字体是驻留在Google字体上的Cardo font。

如果您有任何关于开始调试的提示，我将不胜感激！

Answer 1

这是Chrome中字体处理的棘手问题。有几种解决方法，但目前尚不清楚究竟是什么触发了错误，因此无法保证解决方法适用于所有情况。

以下文档触发了Win 7中的Chrome 31中的错误：

<!doctype html>
<meta charset=utf-8>
<title>Font changes mid sentence</title>
<link href='http://fonts.googleapis.com/css?family=Cardo'
     rel='stylesheet'>
<style>
body { font-family: Cardo, Courier New, monospace }
p { text-rendering: optimizeLegibility; }
</style>
<p><strong>Rasmus:</strong> Groggen smakar frihet kamrat! 
Eller, nä&#8230; det smakar vodka — och — Coca-Cola, varken
mer eller mindre. Hade varit gott med lime i, men då är det 
ju ingen grogg längre&#8230;</p>

示例渲染：

enter image description here

因此，从字符串“nä...”到字符串末尾的每个字符都是辅助字体（为了清楚起见，这里是Courier New）。这同样适用于包含第二次出现的“......”的整行。

由于某些奇怪的原因，character repertoire of Cardo不包含“...”。因此，浏览器从另一种字体中选择该字符是很自然的;这也发生在其他浏览器上。但Chrome在字体处理方面完全没错，因此它也会为后续字符使用后备字体，前进到行尾，或者后退到行的开头。（这可能存在差异。）

删除text-rendering: optimizeLegibility会使问题消失，因此这显然与字距调整或连字有关。这个假设得到以下观察的支持：另一种使问题消失的方法是将省略号字符包装在自己的元素中，如<span>…</span>。

当然，使用三个句点“...”而不是省略号“......”可以避免触发错误。但是这个bug可能更为一般，当它们不在主要字体中时，可能会被文本中的各种字符触发。

如何在HTML中表示省略号“...”并不重要（因此与数字引用与命名引用相对应）。

Answer 2

在该段落上，将nä…更改为nä...。这三个点是您选择的字体系列中无法识别的字符，因此将其关闭并强制执行默认渲染。

您的font-family设置为"Cardo", Helvetica, Arial, sans-serif当检测到nä…时，Cardo无法识别它并将其更改为第二个最佳选项Helvetica，这是预期的。

如果您想不惜一切代价强制执行Cardo字体，那么您只需使用font-family: Cardo即可。但是，出于各种原因，我建议不要这样做。

尽管HTML中没有样式更改，但字体会更改网页中的句子。为什么？

2 个答案: