Safari показывает больший размер шрифта, чем другие браузеры

Question

Я работаю над веб-сайтом, шрифты которого в Mac Safari намного больше, чем в других браузерах,

веб-сайт, использующий шрифт «Open Sans» из шрифтов Google

ex- это css для титила

h2.protitles{
    color: #404040;
    font-size: 22px;
    text-transform: uppercase;
    float: none;
} 

Это показано, как показано ниже, для Chrome, Firefox и IE, как показано ниже, все в порядке

Но Mac Safari показывает вот так

Каким-то образом Safari, кажется, добавляет 1px для всех шрифтов.

любой может помочь мне решить эту проблему, пожалуйста, большое спасибо

Answer 1

Вы всегда можете использовать JavaScript, чтобы проверить, является ли браузер Safari, и если это так, просто уменьшите размер шрифта на 1px.Я знаю, что это не обычный способ ведения дел, но пока он работает:

var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) {
    return p.toString() === "[object SafariRemoteNotification]";
})(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

Этот метод был взят из Javascript - Как обнаружить браузеры И его объяснение: Safari: Уникальный шаблон именования в именах конструкторов.Это наименее надежный метод из всех перечисленных свойств, и угадайте, что?В Safari 9.1.3 это было исправлено.Таким образом, мы проверяем SafariRemoteNotification, который был представлен после версии 7.1, чтобы охватить все Safaris от 3.0 и выше.

Чтобы изменить размеры шрифта, существует устаревший метод, который все еще может работать:

document.body.fontSize(-1);

Если нет, попробуйте CSS Relative Fizes Sont Sizes:

document.body.style.fontSize = ""; //Either Enter Percentages (90%) or EM
//EM Will Automatically Change Font-Size According To Browser
//%-ages Will Change Values Through Math (110% of 16px)

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

Answer 2

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

вы можете попробовать что-то вроде

h2.protitles{
    color: #404040;
    font-size: 22px;
    text-transform: uppercase;
    float: none;
    font-weigth: 400; /* This should be the normal font-weigth in Chrome */
}

Если он все еще недостаточно тонкий, вы можете попробоватьпоиграйте со значением font-weigth.

Может ли это помочь:)

Answer 3

Вы можете попробовать использовать

-webkit-font-smoothing: subpixel-antialiased;

или

-webkit-font-smoothing: antialiased;