Привет, сегодня поговорим о том, как можно решить проблему «плохой рендеринг шрифтов в 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;
}
Все, теперь посмотрите на результат.
Кстати, такое решение сработает как для нестандартных шрифтов, которые например, можно скачать из Google Fonts, также как и для иконочных шрифтов.