Safari 字体渲染问题

Posted 2023-02-22

技术标签:

【中文标题】Safari 字体渲染问题【英文标题】：Safari font rendering issues 【发布时间】：2015-09-12 10:12:57 【问题描述】：

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

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

铬：

iOS 上的 Safari：

这是上面图片的代码：

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

有什么解决办法吗？

【问题讨论】：

如果您使用的是网络字体，请检查实际应用的是哪个版本（woff、svg、ttf）。然后尝试更改src()s 在@font-family 声明中的顺序你能提供一个MCVE吗？屏幕截图并没有给我们太多继续。 @AlexanderO'Mara 我刚刚添加了图片的代码。这不是一个 MCVE。一个我们可以检查文本的示例网页会更有用。 @AlexanderO'Mara 我添加了一个显示 Safari 中问题的网站。 【参考方案1】：

有一个 CSS 属性 text-rendering，在 Safari 中默认设置为 optimizeSpeed。您要更改的是：

text-rendering:optimizeLegibility;

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

有四个可能的值：

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

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

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

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

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

-webkit-font-feature-settings

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

【讨论】：

有人可以确认这行得通吗？在 Mac OS X 10.12.6 上的 Safari 10.1.2 上，这对我没有影响有效。谢谢！ :)【参考方案2】：

如果根据您的评论，您只提供 .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 是一个很好用的工具

编辑： 同样如 cmets 中所述，font-weight 默认设置为bold，您正在加载light 字体。

【讨论】：

我今天试过了，但问题仍然存在。您是否按顺序加载了各种文件？您问题中的网站链接不再有效？是的，我使用了那个命令，我也使用了字体松鼠生成器。是否有机会更新该链接以仔细查看？您是否尝试过将font-weight: normal; 设置为您的@font-face。字体可以以不同的权重呈现。我很难测试，因为我无法更新您的代码以在我的 iphone 上看到，但我建议您这样做，因为目前您正在使用“轻”字体，但 h2 的浏览器样式默认为 bold【参考方案3】：

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

font-weight: 400;

使用 Lucho 的 javascript 的文本笔画解决方案以及指定字体粗细将使您的文本与 Chrome 上的文本相同。

【讨论】：

这对我不起作用，我正在使用 CSS 中的文本描边解决方案，我觉得我可以控制它在哪个浏览器中显示。【参考方案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');
    


  );

您可以修改某些其他元素的文本笔划。希望对您有所帮助。

【讨论】：

@Ajean：请确保你不只是模式匹配“我有同样的问题”而不检查解决方案，这篇文章包括。 @NathanTuggy 你是对的，我在审阅时没有仔细阅读。感谢您的仔细检查！绝妙的答案！这似乎是唯一有效的解决方案。非常有趣的答案！彻底改变 Safari 上亚像素字体的外观。【参考方案5】：

试试这个：

html, body 
    text-rendering: optimizeLegibility;

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

html, body 
    text-rendering: geometricPrecision;

【讨论】：

我也看不出有什么不同，我觉得这个问题根本解决不了。您尝试过其他字体吗？像 Open Sans google.com/fonts#UsePlace:use/Collection:Open+Sans 或 Roboto 等... 同意。在 Safari 中使用 .woff 字体时，对我来说绝对没有区别（检查屏幕截图缩放）。 Safari 在亚像素渲染方面是最差的浏览器。即使在提示良好的字体中，不同文本行中的“u”或“n”渲染也不一致。【参考方案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>

替代方法：

或者，您可以将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;

【讨论】：

这对我有用，我只是将 -webkit-text-stroke 更改为 -webkit-text-stroke-width 因为之前的设置也需要颜色变量。谢谢！【参考方案7】：

我在 Safari 上的字体渲染也遇到了同样的问题，浏览器无法找到网络字体的粗体版本，因此它试图复制它，这可能会因渲染结果不佳而有所不同。

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

font-synthesis: none

否则，您可以尝试将字体粗细手动设置为可用的，即。

font-weight: 400

【讨论】：

【参考方案8】：

为我工作！！！

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

试试看……！

【讨论】：

也为我工作。但是，这会影响 Chrome 中的字体渲染，因此需要一些逻辑（参见@Lucho 的回答）。【参考方案9】：

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

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

【讨论】：

以上是关于Safari 字体渲染问题的主要内容，如果未能解决你的问题，请参考以下文章

Chrome 中 @font-face 的可怕渲染

Webview 和移动 Safari 在渲染页面上有啥不同吗？

Safari 的 Vue.js 渲染问题

更改位置时的 Safari 渲染问题：固定到位置：相对

Safari（应用内）浏览器破坏网站渲染

Firefox 和 safari 浏览器中 jqx 网格的渲染问题