macOS Mojave下Safari渲染Lato字体（12-16px）垂直拉伸问题求助

我之前也碰到过几乎一模一样的问题，Mojave下Safari 13在12-16px字号的Lato字体确实会出现诡异的垂直拉伸，给你几个实测有效的解决思路：

• 升级Google Fonts加载语法
  你原来用的是旧版Google Fonts链接，换成CSS2新语法，明确指定字体格式和加载策略，能大幅改善Safari的渲染稳定性：

  <link href='https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap' rel='stylesheet'>
  

  新语法会优先加载woff2格式字体，display=swap还能避免字体加载时的闪烁，同时让Safari的字体渲染引擎更准确地解析字体文件。

• 针对非Retina屏定制渲染规则
  Mojave的Safari在非Retina屏上对antialiased的处理存在bug，换成subpixel-antialiased并配合媒体查询仅在非Retina屏生效：

  @media not all and (min-resolution: 2dppx) {
    body {
      -webkit-font-smoothing: subpixel-antialiased;
      text-rendering: optimizeSpeed;
      -webkit-text-size-adjust: 100%;
    }
  }
  

  这能强制Safari回到更适合低分辨率屏幕的渲染模式，避免垂直拉伸。

• 添加明确的行高和字体属性
  有时候默认行高或继承的字体属性会和渲染引擎冲突，给文本元素添加明确的属性减少引擎“猜测空间”：

  p, h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
    font-variant-ligatures: normal;
    font-feature-settings: normal;
  }
  

• 本地引入字体文件（终极方案）
  如果远程加载的字体还是有问题，直接下载Lato的woff2/woff字体文件，本地用@font-face声明：

  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'),
         url('/fonts/lato-v24-latin-regular.woff2') format('woff2'),
         url('/fonts/lato-v24-latin-regular.woff') format('woff');
  }
  /* 重复声明700、900及斜体版本 */
  

  本地字体的渲染优先级更高，能避开Google Fonts加载时的解析问题。

问题根源分析 #

Mojave的Safari 13在非Retina屏上的字体渲染引擎存在特定bug，对远程加载的Lato字体在12-16px字号区间的垂直缩放计算出错。Google官方演示页因为使用了更优化的CSS规则和可能的本地缓存字体，所以没触发这个bug；而Retina屏因为像素密度更高，渲染算法不同，显示就正常了。

内容的提问来源于stack exchange，提问作者beely