Высота буквы шрифта Google не соответствует

Question

У меня странная проблема в Chrome, где шрифт Google показывает непоследовательную высоту букв. Это происходит только когда я использую text-transform: uppercase и это исправлено, если я использую font-weight:bold, У меня есть пример кода, где вы можете увидеть S слишком высокий в слове TESTING:

body {
    font-family: 'Exo 2' !important;
    line-height:1.42857143;
}
div {
    width:40px;
}
span.upper {
    display:block;
    margin-top:20px;
    font-size:18px;
    text-transform:uppercase;
}
span {text-transform:uppercase; }

<link href="//fonts.googleapis.com/css?family=Exo+2:200,300,400,700,300italic,400italic,700italic|Raleway:200,300,400,600" rel="stylesheet" type="text/css">
    <div>
        Broken:<br>
        <a href="#">
            <span class="upper">Testing 123</span> </a>
        
        <br>Normal:<br><br>
        <span>Testing 123</span>
        
    </div>

Если я изменю шрифт на arial, это фиксированная. Есть ли свойство CSS, которое мне нужно сбросить, чтобы шрифт отображался правильно?

Answer 1

Это хорошо известная ошибка в Chrome на Windows. Chrome сделал политический / экосистемный шаг, чтобы уменьшить зависимость от других компаний и других признанных технологий, таких как переход к развилке Blink из Web-Kit. Chrome также решил отказаться от рендеринга шрифтов Microsoft. Результатом является плохой субпиксельный рендеринг. Вы заметили, что после увеличения размера или веса шрифта проблема решается, потому что штрихи символов шире, чем один пиксель.

Одно решение для вас: вы можете перейти к флагам Chrome://, чтобы включить прямую запись.

Но это не поможет вашим пользователям, конечно. Есть несколько хаков.

Один из способов - изменить ваш стек шрифтов, чтобы SVG вызывался специально для веб-набора.

Вы можете сделать это с помощью взлома медиа-запроса:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'chunk-webfont';
        src: url('webfont.svg') format('svg');
    }
}

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

Answer 2

У меня были те же проблемы с браузерами Windows, и я сначала попытался использовать SVG в стеке, но это не сработало - позже я узнал, что Chrome с тех пор отказался от поддержки SVG-шрифтов. Поэтому я попытался использовать версию шрифта TTF, помещенную первой в стек, и по какой-то причине это решило проблему. Протестировал его в Chrome, Firefox и Edge. Как ни странно, если я ссылаюсь на TTF в URI данных, он снова возвращается к противоречивым буквенным высотам.