Проблемы с отображением шрифтов Safari

Как вы можете видеть ниже, шрифт Texta-Light в Chrome полностью отличается от Safari. Chrome отображает шрифт, как мне нравится, но рендеринг Safari на OS X и iOS выглядит слишком тонким. Ниже приведено изображение Safari на iOS, и по какой-то причине шрифт выглядит так, как будто есть два бита текста.

Я искал решение, но ничего не нашел. Я попытался использовать -webkit-font-smoothing: subpixel-antialiased;, но в соответствии с этим вопросом код больше не работает.

Chrome:

Safari на iOS:

Вот код для изображений выше:

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

Есть ли какое-либо решение для этого?

Ответ 1

У Safari есть проблема со шрифтами. Самое простое исправление дублированной текстовой проблемы - это уточнение шрифта:

font-weight: 400;

Использование Lucho Javascript text stroke solution вместе с заданием font-weight сделает ваш текст таким же, как в Chrome.

Ответ 2

Существует свойство CSS, текстовый рендеринг, который по умолчанию в Safari установлен на optimizeSpeed. Что вы хотите изменить:

text-rendering:optimizeLegibility;

От https://css-tricks.com/almanac/properties/t/text-rendering/

Существует четыре возможных значения:

• auto (по умолчанию) - браузер делает обоснованные предположения о том, когда следует оптимизировать скорость, четкость и геометрическую точность при рисовании текста. Имейте в виду, что разные браузеры интерпретируют это значение по-разному.

• optimizeSpeed - браузер выделяет скорость рендеринга по удобочитаемости и геометрической точности при рисовании текста. Это отключает кернинг и лигатуры.

• optimizeLegibility - браузер подчеркивает четкость по скорости рендеринга и геометрической точности. Это позволяет использовать специальную кернинг и дополнительную информацию о лигатуре, которая может содержаться в файле шрифта для определенных шрифтов.

• geometricPrecision - браузер подчеркивает геометрическую точность по скорости и четкости изображения. Некоторые аспекты шрифтов, такие как кернинг-не масштабируются линейно, поэтому geometricPrecision может сделать текст с использованием этих шрифтов хорошим. Когда шрифт SVG масштабируется, браузер вычисляет размер пикселя, а затем округляет его до ближайшего целого. Свойство geometricPrecision позволяет увеличить масштаб жидкости. Примечание. Только эти браузеры используют только текущие значения, Gecko обрабатывает значение так же, как optimizeLegibility.

Существует дополнительная настройка -webkit-font-feature-settings, одним из которых является кернинг:

-webkit-FONT-функция-настройки

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

Ответ 3

Если в соответствии с вашим комментарием вы используете только .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

Edit: Также, как упоминалось в комментариях, font-weight по умолчанию установлен на bold, и вы загружаете шрифт light.

Ответ 4

Я нашел сообщение, которое использует JS для настройки свойства text-stroke. Вот фактический код:

$(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');
    }


  });

Вы можете изменить текст-ход другого элемента. Надеюсь, что это поможет.

Ответ 5

Попробуйте следующее:

html, body {
    text-rendering: optimizeLegibility;
}

или если это не работает,

html, body {
    text-rendering: geometricPrecision;
}