шрифт выглядит поддатый в Chrome

Question

Я нашел ответ здесь относительно графического дизайна: https://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-really-bad-which-fonts-are-you-using-that-rend Это именно то, что мои шрифты делают, но я пытаюсь выяснить, есть ли способ предотвратить это с помощью HTML или CSS или что-нибудь веб-.

Я использую «платин» в качестве моего шрифта. Мне просто нужно найти другой шрифт?

Другие мысли по теме?

Answer 1

Если это вызвано использованием веб-шрифтов, я нашел этот SO пост (и принятый ответ) полезным: Google webfonts render choppy in Chrome on Windows

Мое решение было использовать инструмент WebFont Generator (http://www.fontsquirrel.com/tools/webfont-generator), чтобы преобразовать свой шрифт в различных веб-форматов и скопировать их предоставленные CSS в мою таблицу стилей. Я использовал шрифт Fauna One от Google, поэтому мне пришлось загрузить его из Google, а затем загрузить его в FontSquirrel.

Ключ должен поставить линию SVG выше TTF, так что Chrome использует ее в первую очередь. Вот что работает для меня:

@font-face { 
    font-family: 'Fauna One'; 
    src: url('fonts/faunaone-regular-webfont.eot'); 
    src: url('fonts/faunaone-regular-webfont.eot?#iefix') format('embedded-opentype'), 
    url('fonts/faunaone-regular-webfont.svg#fauna_oneregular') format('svg'), 
    url('fonts/faunaone-regular-webfont.woff') format('woff'), 
    url('fonts/faunaone-regular-webfont.ttf') format('truetype'); 
} 

(Это 99% же, как файл CSS, вырабатываемая генератором WebFont, просто переставить немного).

Answer 2

Чтобы получить Веб-шрифты, чтобы сделать с хорошим Антиалайзинговыми в Chrome на Windows, вы должны использовать этот формат в объявлении шрифта:

@font-face { 
    font-family: 'Futura'; 
    src: url('futura.eot'); 
    src: url('futura.eot?#iefix') format('embedded-opentype'), 
     url('futura.woff') format('woff'), 
     url('futura.ttf') format('truetype'), 
     url('futura.svg#futura') format('svg'); 

    font-weight: normal; 
    font-style: normal; 
} 

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

В принципе, вы должны заставить Chrome использовать формат SVG шрифта. Вы можете сделать это, переместив url для версии .svg наверху, однако Chrome на Windows возникли проблемы с испортить макет при этом (вплоть до версии 30). Переопределяя декларацию шрифта с помощью медиа-запроса, эти проблемы решаются.

Другое дело: этот трюк заставит браузер загружать две версии шрифта, но это небольшая цена за хороший текст!

Также: Иногда базовая позиция не совпадает между шрифтами OpenType и шрифтами SVG, но вы можете настроить это, просто отредактировав файлы шрифтов SVG. SVG шрифты XML на основе, и если вы посмотрите на декларации

<font-face units-per-em="2048" ascent="1900" descent="-510" /> 

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