MankSans 字体的 Safari 兼容性字母间距问题答案

【问题标题】：Safari compatibility letter-spacing issue with MankSans fontMankSans 字体的 Safari 兼容性字母间距问题
【发布时间】：2017-06-01 21:53:37
【问题描述】：

我正在为网站使用自定义字体 (Mank Sans)，它应该如下所示：

http://i.imgur.com/llwuwRn.png （谷歌浏览器，正确的行为）

但是，当使用 Safari 时，它的显示很奇怪：

http://i.imgur.com/3QJA87w.png

我该如何解决这个问题？

谢谢。

编辑：这里我如何包含我的自定义字体：

@font-face {
    font-family:'MankSans';
    src: url('#{$font-path}/MankSans.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+000D-25CA;
}

【问题讨论】：

字体是什么文件格式？
我的格式是.ttf

标签： javascript html css fonts safari

【解决方案1】：

试试这个：

letter-spacing: 2px;

但不确定它在 chrome 中的外观。如果看起来很奇怪，请尝试检测 safari，然后设置字母间距。

var isSafari = /Safari/.test(navigator.userAgent) && /AppleComputer/.test(navigator.vendor);

if(isSafari) {
  //set letter spacing using jQuery or JS DOM
}

http://www.w3schools.com/cssref/pr_text_letter-spacing.asp

【讨论】：

没有变化，在我的屏幕上你可以看到我只有F和A时有问题，F和L附近没有问题。我不明白为什么 Safari 会“制造”这样的问题。我在 Firefox 上也没有问题
嗯.. 让我看看其他问题。

【解决方案2】：

查看您提到的其他一些选项，我之前的方法不起作用。

选项 A：

字体格式可能有误。 .ttf 是 Safari 和 Android 设备的标准。您可以查看此问题的详细信息：Safari font rendering issues

选项 B：

如果是text-rendering 问题，则上述问题的答案还有更多选择：https://stackoverflow.com/a/31218373/4314753

选项 C：

有些人说 safari 的渲染存在问题，解决他们的问题是定义字体粗细：font-weight: 400

选项 D：

如果最终是渲染问题并且无法找到其他解决方案，则可以使用图像替换文本，即使它没有尽可能友好。

【讨论】：