新线字符和<br/>在Microsoft Edge上呈现为矩形框

Question

问题：

如果您的网站对非拉丁语言使用自定义字体（例如日语，中文...）或使用字体图标，则有时换行符（和<br>标签）将显示为矩形。

因此在Chrome / Firefox上看起来像这样：

但是在Edge上看起来像这样：

我们如何解决这个问题？

Answer 1

问题是因为在Edge上新行显示了空格字符（0x20），并且您的字体没有 Amerino 拉丁语空格字符的字形。

This is a known issue（已标记为已解决，但显然不是）

---

最简单的解决方案，如果您的问题仅发生于<br>标签，则应设置<br>的样式，并使其使用默认的系统字体：

br {
  font-family: initial !important; /* Fix error on Edge (br render a Latin space character) */
}

---

如果您遇到段落内换行符的问题（例如，文章中的\n字符），那么您就不得不考虑将空白字形添加到自定义字体中的冗长解决方案。

您可以使用fonttools之类的库来编辑原始的ttf / otf，并添加0x20字形，然后它将正常工作。