Столкнулись недавно с проблемой разного отображения шрифтов на iOS. Ситуация такая: есть макет в фигме, вёрстка выполнена в соответствии с макетом. В chrome на windows 11 и на устройствах с андроид, вёрстка полностью совпадает с макетом. Но когда открыли сайт в том же хроме, но на планшете с iOS, всё выглядело плачевно. Непонятная ситуация была только с одним из шрифтов, используемых на сайте. Заменять его не хотелось, потому что потребовало бы дополнительных затрат по переделке макета.
Вот скриншоты с iOS (думаю корявость бросается в глаза и без макета):
А вот как это выглядит в том же браузере, но в нормальных ОС:
Как вы понимаете, префиксов в css для браузера хром конкретно на ios не существует. Поэтому поменять жирность шрифта конкретно в хроме на айос не получится. Поэтому мы отправились к гуглу и пытались понять что мы делаем не так. К слову, в данном случае использовался гугловский шрифт “Manrope”. Способы, которые мы нашли в гугле – не помогли. Мы их упоминать даже не будем, чтобы никого не запутать.
В общем, либо мы не долистали до нужных ответов, либо его просто никто ещё не написал. Может быть это очевидные для кого-то вещи, но правильного ответа в интернете мы так и не нашли.
В итоге, у нас опытным путём выяснилось следующее. Мы, как специалисты, которые всю жизнь занимались seo, пользовались всегда свойством text-rendering: optimizeSpeed, чтобы оптимизировать скорость загрузки сайта и отрисовку контента. И конкретно для данного шрифта, правильная отрисовка шрифта, включающая все детали, игнорировалась, и это было одной из причин разного отображения шрифтов. Взамен надо использовать text-rendering: optimizeLegibility;. Второй причиной – для iOS надо явно указывать жирность шрифтов при их импорте. Мы импортировали сразу все варианты шрифта в одном файле (Manrope-VariableFont_wght.ttf). Когда импортируешь по отдельности (regular, bold и т.д.), обычно указываешь font-weight. А вот для вариатовной подгрузки font-weight не указывался. И для iOS это оказалось важным. Поэтому, при импорте такого файла нужно указывать диапазон жирности. В данном случае это font-weight: 200 800;.
Добавив эти две строки (text-rendering: optimizeLegibility; для всего body, и font-weight: 200 800; для этого шрифта) в CSS, мы избавляемся от проблемы разного отображения шрифтов. По-крайней мере, в этом случае.
