html - 尽管 HTML 中没有样式更改，但网页中的字体更改了中间句子。为什么？-6ren

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

转载作者：行者123 更新时间：2023-11-28 00:01:35

我正在尝试建立一个 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>

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

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

最佳答案

这是 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> .

当然，使用三个句点“...”而不是省略号“...”可以避免触发错误。但该错误可能具有更普遍的性质，并且可能由文本中的各种字符在所使用的主要字体中不存在时触发。

省略号“...”在 HTML 中的表示方式并不重要(例如数字引用与命名引用)。

关于html - 尽管 HTML 中没有样式更改，但网页中的字体更改了中间句子。为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21056652/

首页

博学

6Ren·AI

商城

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