Question

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

我已经找到了一个解决方案但发现没有任何效果。我尝试使用-webkit-font-smoothing: subpixel-antialiased;，但根据this question，代码不再有效。

铬：

Chrome font-rendering

iOS上的Safari：

Safari font-rendering

以下是上述图片的代码：

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

有没有解决方案？

Answer 1

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

text-rendering:optimizeLegibility;

enter image description here

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

有四种可能的值：

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

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

•optimizeLegibility - 浏览器强调了渲染速度和几何精度的可读性。这样就可以使用特殊的字距调整和可选的连字信息，这些信息可能包含在某些字体的字体文件中。

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

还有一个额外的设置-webkit-font-feature-settings，其中一个是字距调整：

-webkit-字形特征的设置

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

Answer 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＆＃39; Webfont Generator

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

Answer 3

Safari有字体问题。重复文本问题最简单的解决方法是澄清font-weight：

font-weight: 400;

使用Lucho的Javascript文本笔划解决方案以及指定font-weight将使您的文本与Chrome上的文本相同。

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

试试这个：

html, body {
    text-rendering: optimizeLegibility;
}

或者如果它不起作用，

html, body {
    text-rendering: geometricPrecision;
}

Answer 6

为我工作！！！

test('Expect label to be of type string', () => {
  const testString = 'Test value'
  const { getByDisplayValue } = render(<Label text={testString}/>);
  expect(getByDisplayValue).toBe(string);
});

尝试一下...！

Answer 7

基于@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;
}

Answer 8

我在Safari上进行字体渲染时遇到了同样的问题，浏览器找不到网络字体的粗体版本，因此它试图复制它，这可能会导致不良的渲染结果。

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

font-synthesis: none

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

font-weight: 400

Answer 9

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

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

Safari字体渲染问题

9 个答案: