CSS

Крутой способ настроить рендеринг шрифта в Firefox на Windows 7

Привет, сегодня поговорим о том, как можно решить проблему «плохой рендеринг шрифтов в Firefox на Windows 7». Да, уже есть Windows 10, но тем не менее при тестировании верстки часто возникают проблемы именно со странным отображением шрифтов в Firefox. В Chrome тоже есть проблемы, но они решаются использованием SVG, но поскольку Firefox предпочитает работать с файлами WOFF нужно поступить по-другому.

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

Итак, рендеринг шрифта в Firefox на Windows 7

Первым делом сделаем из TTF файла OTF файл. Так сложилось, что Windows лучше работает именно с Opentype, который может передавать чуть более гладкие линии. Для этого воспользуемся условно-бесплатным конвертером шрифтов от Fontlab: Transtype
Эта программа переконвертирует файл TTF шрифта в более сглаженный OTF. Поидеи мы должны увидеть явную разницу в гладкости шрифта (при отображение в windows).

Далее используя этот сглаженный OTF файл отправляемся в глобальный генератор шрифтов для сайта Fontsquirrel, и получаем на выходе сразу несколько файлов (некоторые из которых нам пригодятся).

.svg будет использоваться для iOS и Webkit.
.eot для старых версий IE.
.woff пока не нужен, удалите.
.ttf вообще не нужен, удалите.

Вместо выкинутого TTF файла будем использовать OTF, сгенерированный в самом начале, а файл WOFF для Firefox закодируем сейчас. Для этого нам потребуется мини-программка: sfnt2woff. Используем её для того, чтобы сгенерировать WOFF файл из полученного ранее гладкого OTF файла.

Готово: набор из всех файлов получен.

Теперь составим CSS:

@font-face {
    font-family: 'fontregular';
    src: url('font-webfont.eot'); /*IE*/
    src: url('font-webfont.eot?#iefix') format('embedded-opentype'), /*IE fix*/
    url('font-webfont.woff') format('woff'), /*Firefox*/
    url('font-webfont.otf') format('opentype'), /*старые версии браузеров*/
    url('font-webfont.svg') format('svg'); /*Chorme, iOS, Android*/
    font-weight: normal;
    font-style: normal;
}

Все, теперь посмотрите на результат.