Блог

Главная - Вопросы по программированию - Рендеринг шрифта Lato в Google Chrome в Windows

Рендеринг шрифта Lato в Google Chrome в Windows

#css #fonts #webfonts

#css #шрифты #веб-шрифты

Вопрос:

Я пытался найти ответ на этот вопрос и не могу его найти. Я загрузил Lato webfont с www.latofonts.com и в моем файле css есть следующее: 

 @font-face {
    font-family: 'LatoLight';
    src: url('fonts/Lato/Lato-Light.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato/Lato-Light.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato/Lato-Light.ttf') format('truetype'); 
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato/Lato-Regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato/Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato/Lato-Regular.ttf') format('truetype'); 
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

Это отлично смотрится в любом браузере на Mac (safari, chrome, Firefox) и в Firefox на Windows, НО в Chrome на Windows это выглядит размытым и в нем отсутствуют части букв, например, верхняя часть заглавных букв «T» . Есть ли исправление для этого?

Комментарии:

1. Попробуйте -webkit-font-smoothing: antialiased;

2. Можете ли вы показать нам скриншот или создать демонстрацию JSFiddle?

Ответ №1:

У меня тоже была эта проблема. Я перепробовал всевозможные вещи, но в конце концов я нашел, что лучшее решение — это просто добавить небольшое определение браузера javascript, которое добавляет класс body. Затем переопределите любой шрифт с весом ниже 400 на 400. По какой-то причине сглаживание в Windows в Chrome действительно приводит к тому, что тонкие шрифты выглядят ужасно.

Ответ №2:

Я ответил на вопрос. Я добавил svg-файл и следующий код:

 @font-face {
    font-family: 'LatoLight';
    src: url('fonts/Lato/Lato-Light.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato/Lato-Light.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato/Lato-Light.ttf') format('truetype');
         url('fonts/Lato/Lato-Light.svg#LatoLight') format('svg');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'LatoLight';
        src: url('fonts/Lato/Lato-Light.svg#latolight') format('svg');
    }
}

чтобы узнать, что нужно поставить после «#», вам нужно открыть svg-файл, чтобы увидеть, какой идентификатор