Как предотвратить разные шрифты браузеров по-разному?

У меня проблема с попыткой поддерживать постоянный стиль шрифта во всех браузерах. Как видно ниже, система рендеринга сафари делает шрифт меньше, чем шрифт хром.

Safari: Safari

Chrome: Chrome

Я попытался использовать решения, найденные по другим вопросам, хотя они не решили эту проблему. Как я могу поддерживать постоянный стиль шрифта во всех основных браузерах? Это Chrome, Safari, Opera, Firefox и Internet Explorer.

Вот что я пробовал.

  • -webkit-font-smoothing: antialiased;

  • font-weight: 800;

  • text-rendering: optimizeLegibility;

Ответы

Ответ 1

Браузеры по большому счету имеют разные механизмы/методы рендеринга шрифтов. Для более подробной информации я рекомендую читать этот, этот и/или это.

Честно говоря, для среднего пользователя разница будет не такой заметной и, по большей части, идеальное кросс-браузерное отображение чего-либо уже давно прекращено как результат послепечатного мира.

Если по какой-то мазохистской причине совершенство пикселя более важно, чем здравомыслящий и поддерживаемый код, вы можете попробовать старые резервные копии (текстовые изображения, изображение/текстовое замещение) или отключить подпиксельную визуализацию через CSS (хотя не все браузер поддерживает его, и текст будет менее читаемым).

Надеюсь, что это поможет.

Ответ 2

Много различий больше связано с тем, что браузеры браузера добавляют или опускают разные шрифты/стили по умолчанию для шрифтов. Чтобы это не произошло, убедитесь, что в вашем CSS есть font-weight: normal и font-style: normal в блоке кода @fontface.

Затем вам необходимо применить необходимые стили к элементам HTML.

Итак, если у меня есть шрифт под названием geo-light, я бы сделал:

@font-face {font-family: 'geo-light';
    src: url('fonts/geo-extralight.woff2') format('woff2'), url('fonts/geo-extralight.woff') format('woff');
    font-weight: normal;
    font-style: normal; 
}

Затем добавьте конкретные стили для каждого элемента, который использует этот шрифт.

/*SET STYLES ON ELEMENTS*/
h1, h2, h3, h3 > a, p, li {
    font-family: 'geo-light', sans-serif;
    font-weight: normal;
    font-style: normal; 
    text-decoration: none;
}

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

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