Safari 字体渲染问题

Question

如下所示，Chrome 中的 Texta-Light 字体在 Safari 中看起来完全不同。 Chrome 显示我喜欢的字体，但 Safari 在 OS X 和 iOS 上的渲染看起来太细了。下面的 Safari 图像是在 iOS 上拍摄的，正如您所看到的，出于某种原因，字体看起来好像有两位文本。

我一直在寻找解决方案，但没有找到任何有效的方法。我尝试使用 -webkit-font-smoothing: subpixel-antialiased;，但根据 this question，代码不再有效。

Chrome:

iOS 上的 Safari：

以上图片的代码如下：

h2 {
    font-family: 'Texta-Light', sans-serif;
    font-size: 3.5em;
    line-height: 1.2em;
}

有什么解决办法吗？

Answer 1

如果根据您的评论，您只提供 .otf，则您还需要提供其他文件类型。

这可能会导致与 iOs 有关的问题，因为直到 iOs 4.2，SVG 是唯一在 ipad 或 iphone 上使用自定义字体的格式.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

一个很棒的工具是 Font Squirrel 的 Webfont Generator

编辑： 同样如评论中所述，默认情况下 font-weight 设置为 bold 并且您正在加载 light 字体。

Answer 2

有一个 CSS 属性，文本渲染，在 Safari 中默认设置为 optimizeSpeed。您要更改的是：

text-rendering:optimizeLegibility;

来自https://css-tricks.com/almanac/properties/t/text-rendering/

有四个可能的值：

• 自动（默认）- 浏览器在绘制文本时对何时优化速度、易读性和几何精度进行有根据的猜测。请注意，不同的浏览器对此值的解释不同。

• optimizeSpeed - 浏览器在绘制文本时强调呈现速度而不是易读性和几何精度。它禁用字距调整和连字。

• optimizeLegibility - 浏览器强调渲染速度和几何精度的易读性。这允许使用特定字体的字体文件中可能包含的特殊字距调整和可选的连字信息。

• geometricPrecision - 浏览器强调几何精度而不是渲染速度和易读性。字体的某些方面（例如字距调整）不是线性缩放的，因此 geometricPrecision 可以使使用这些字体的文本看起来不错。缩放 SVG 字体时，浏览器会计算像素大小，然后四舍五入到最接近的整数。 geometricPrecision 属性允许更流畅的缩放。注意：只有 WebKit 浏览器应用这个流畅的值，Gecko 像 optimizeLegibility 一样对待这个值。

还有一个额外的设置-webkit-font-feature-settings，其中一个是kerning：

-webkit-font-feature-settings

h2 {
     -webkit-font-feature-settings: "kern" 1;
}

Answer 3

试试这个：

html, body {
    text-rendering: optimizeLegibility;
}

或者如果这样它不起作用，

html, body {
    text-rendering: geometricPrecision;
}

Answer 4

我找到了 a post which uses JS to adjust the text-stroke property。这是实际的代码：

$(document).ready(function(){
    is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
    is_explorer = navigator.userAgent.indexOf('MSIE') > -1;
    is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
    is_safari = navigator.userAgent.indexOf("Safari") > -1;
    is_opera = navigator.userAgent.indexOf("Presto") > -1;
    is_mac = (navigator.userAgent.indexOf('Mac OS') != -1);
    is_windows = !is_mac;

    if (is_chrome && is_safari){
      is_safari=false;
    }

    if (is_safari || is_windows){
      $('body').css('-webkit-text-stroke', '0.5px');
    }


  });

您可以修改其他元素的文字描边。希望对你有帮助。

Answer 5

Safari 存在字体问题。解决重复文本问题的最简单方法是澄清字体粗细：

font-weight: 400;

使用 Lucho Javascript 的文本笔划解决方案并指定字体粗细将使您的文本与 Chrome 上的文本相同。

Answer 6

根据@lucho 的回答，我使用了相同的方法，但我在 <body> 标记加载后立即应用修复。这解决了 iOS Safari 中 Open Sans 字体太细的问题。

<body>
<script>
  (function () {
    var ua = navigator.userAgent
    var isIOSSafari = /iPhone|iPad|iPod/.test(ua) && /AppleWebKit.*Safari\//i.test(ua) && ua.indexOf('Chrome') === -1
    if (isIOSSafari) {
      document.body.style.webkitTextStroke = '.5px'
    }
  })()
</script>

替代方法：

或者，您可以添加一个 class，例如 ios-safari 到 <html> 标签，然后正常应用 CSS：

  <script>
  (function () {
    const ua = navigator.userAgent
    const isIOSSafari = /iPhone|iPad|iPod/.test(ua) && /AppleWebKit.*Safari\//i.test(ua) && !ua.includes('Chrome')
    if (isIOSSafari) document.documentElement.classList.add('ios-safari')
  })()
  </script>
</head>

CSS:

.ios-safari {
  -webkit-text-stroke: .5px;
}

Answer 7

为我工作！！！

.text{
       font-weight: unset;
       -webkit-text-stroke: thin;
}

试一试...！

Answer 8

我在 Safari 上的字体渲染也遇到了同样的问题，浏览器找不到网络字体的粗体版本，所以它试图复制它，这可能会导致糟糕的渲染结果。

您可以尝试通过添加来禁用它：this CSS:

font-synthesis: none

否则您可以尝试将 font-weight 手动设置为可用的，即

font-weight: 400

Answer 9

一个经过测试的潜在解决方案是将字体粗细增加 100 iOS 宽，使用（假设您的默认字体粗细为 400）：

@supports (-webkit-touch-callout: none) {
  body {
    font-weight: 500;
  }
}

Answer 10

我使用了这种方法，它使基于 Chromium 的浏览器上的字体与以前相同，并且仅针对 safari 浏览器进行了更改。

$(document).ready(function(){
    if (navigator.userAgent.indexOf("Safari") == 125) {
        $('body').css('-webkit-text-stroke', 'thin');
    }
});

Safari 字体渲染问题

Safari font rendering issues

css

safari

fonts

rendering

google-chrome