Сглаживание шрифтов в Safari и рендер Mac

В разных браузерах шрифты выглядят по разному — это аксиома. Но о ней каждый раз забываешь, привыкнув к одному отображению на своём любимом устройстве. А мак и сафари, в это время, таят всё больше сюрпризов.

Час убитой жизни жизни на попытки доказать, что два символа абсолютно одинаковы, потому что у них одинаковые стили, и конечное признание своей неправоты. Именно так начиналась эта история.

Я нередко использую в вёрстке символы шрифта FontAwesome. И не только использую, но ещё и всем рекомендую. Причём не в их стандартном виде (через тег i и встроенные классы), куда чаще я копирую content для собственных псевдоэлементов before и after. И мне всегда казалось, что указания font-family и font-size будет достаточно для корректного отображения. Так я считала ровно до тех пор, пока скриншоты с макбука не поставили меня на место, заставив приглядеться к исходным стилям font-awesome.css

.fa {
      display:inline-block;
      font:normal normal normal 14px/1 FontAwesome;
      font-size:inherit;
      text-rendering:auto;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
}

Вот и они: незначительные, как мне раньше казалось, префиксные свойства. Именно они обеспечивают большую чёткость иконок в safari. Дело в том, что Windows и MacOS используют разные технологии сглаживания шрифтов, устанавливаемые настройкой системы. Safari же предлагает обход этих настроек, используя префиксное свойство. Заметить разницу можно только в браузерах на движках webkit. Более того, Chrome, который работает на том же движке, разницу покажет только на Маке.

Webkit-font-smoothing предлагает нам три варианта сглаживания. И вот как это выглядит на примере:

А вот так «плавающая ошибка» проявилась на моём сайте: обратите внимание на значок корзины в правом углу и в списке товаров.

Действительно, очевидная разница на устройстве клиента и никак не проявляющая себя на моём. Теперь то мне ясно, почему он был так удивлён моей «непонятливостью».