我已经设置了一个演示，如下所示：
<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中，点的是不同的字体。有没有办法来解决这个问题 ？
中心问题是，演示*中使用的Pacifico字体不包含省略号（U + 2026）。Safari在text-overflow: ellipsis活动时会使用该字符。由于活动字体中不存在该字符，因此字体后备机制会选择一种其他字体，该字体确实包含该字符并且就是所呈现的字体。
在Chrome浏览器中不会发生这种情况，因为Chrome浏览器显然使用句点（U + 002E）字符的字形来合成省略号（我不清楚Chrome是否总是这样做，或者仅在字体不包含U +的情况下2026）。
*注意：Google字体上完整的Pacifico字体 确实包含U + 2026，因此，与本演示中使用webfont.js时字体的子集化有关。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句