与MankSans字体

Question

我在网站上使用自定义字体（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;
}

Answer 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

Answer 2

如果你提到我之前提到的一些其他选项不起作用。

选项A：

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

选项B：

上述问题的答案还有一些选项，因为这是一个text-rendering问题：https://stackoverflow.com/a/31218373/4314753

选项C：

有些人说safari的渲染存在问题，修复问题的方法是定义字体权重：font-weight: 400

选项D：

如果它最终是一个渲染问题并且找不到另一个解决方案，那么黑客可能会让图像替换文本，即使它不是那么友好。