Safari 以错误的字体省略省略号答案

【问题标题】：Safari does ellipsis in wrong fontSafari 以错误的字体省略省略号
【发布时间】：2016-01-07 06:07:56
【问题描述】：

我设置了一个demo 如下：

<div>Bar Foo</div>

和样式：

div {
    width: 100px;
    overflow: hidden;
    border: 1px solid black;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 50px;
    font-family: 'Pacifico', cursive;
}

现在，在 Chrome 中，省略号的点使用正确的字体，但在 Safari 中，点使用不同的字体。有没有办法解决这个问题？

【问题讨论】：

字体是否确实包含省略号字符（在 U+2026 处）或者省略号恰好在其他浏览器选择的字体中看起来相似？
我不知道，但在 Chrome 中，这些点看起来是正确的。此外，chrome 和 safari 显示相同的字体，但点不同

标签： css fonts safari

【解决方案1】：

核心问题是演示*中使用的 Pacifico 字体不包含省略号字符 (U+2026)。当text-overflow: ellipsis 处于活动状态时，Safari 会使用该字符。因为该字符不存在于活动字体中，所以字体回退机制会选择一个包含该字符的不同字体，这就是被渲染的字体。

这在 Chrome 下不会发生，因为 Chrome 显然使用句点 (U+002E) 字符的字形合成省略号（我不清楚 Chrome 总是这样做，还是仅在字体不包含 U+2026 的情况）。

*注意：complete Pacifico font on Google fonts 确实似乎包含 U+2026，因此这与在本演示中使用 webfont.js 时字体被子集化有关。

【讨论】：