Safari字体渲染问题

Question

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

我找了一个解决方案,但没有找到任何有效的方法.我试过使用,-webkit-font-smoothing: subpixel-antialiased;但根据这个问题,代码不再工作了.

铬:

iOS上的Safari:

以下是上图中的代码:

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

这有什么解决方案吗？

Answer 1

有一个CSS属性,文本呈现,在Safari中默认设置为optimizeSpeed.你想改变的是:

text-rendering:optimizeLegibility;

来自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的Webfont Generator

编辑: 同样如评论中所提到的,默认情况下font-weight设置为bold您正在加载light字体.

Answer 3

Safari有字体问题.重复文本问题的最简单修复是澄清字体重量:

font-weight: 400;

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

Answer 4

我发现了一个使用JS调整文本笔划属性的帖子.这是实际的代码:

$(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 上的字体渲染也遇到了同样的问题，浏览器无法找到网络字体的粗体版本，因此它试图复制它，这可能会导致糟糕的渲染结果。

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

font-synthesis: none

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

font-weight: 400