自定义网站字体在Mac设备上看起来很奇怪

Question

我已经在我的网站上添加了自定义字体，以更好地适合主题，但是在使用Mac时，该字体看起来很奇怪并且几乎被反转了。在Windows上看起来不错，有没有办法让我在Mac上看起来正确呢？如果没有，是否只能在Mac上使用完全不同的字体？我不是经验丰富的Web开发人员，所以不确定如何执行此操作。网站是goldbergphysics.com，字体为Rob Graves。

在MacOS设备上显示的字体

Answer 1

不幸的是，您必须为Mac使用另一种字体，因为它似乎无法正确呈现，不仅在Web上，而且在预览或Font Book中也是如此，这使我认为它的设计不佳。

尝试使用Google Fonts，可能会有一些类似的字体可以满足您的需要（并且如果可能，请避免使用诸如Dafont或FontSpace之类的字体提供商，因为它们的许多字体都不是为网络设计的。） / p>

我还建议您通过不加载不同的字体来简化操作，具体取决于操作系统。

Answer 2

您可以在JavaScript中使用navigator.platform来查看您是否在MAC上（它将返回MacIntel）并导入其他字体。

在这里navigator platform

例如：

if (navigator.platform === 'MacIntel') {

  let fontLink = document.createElement('link');
  fontLink.setAttribute('rel', 'stylesheet');
  fontLink.setAttribute('href', 'https://fonts.googleapis.com/css?family=Roboto');
  document.head.appendChild(fontLink);


  document.body.style.fontFamily = "Roboto, sans-serif"

}