Вы встречались с проблемой разного отображения веб-шрифтов в зависимости от операционной системы?

Question

[Илья Пестов]

Доброго времени суток уважаемые хабравчане. Помогите пожалуйста решить проблему, я запутался окончательно. Хотя сам верстальщик с опытом, и со шрифтами не первый раз работаю (тотже пример проекта на GitHub).

Проблема на jsFiddle

1) Иконочный шрифт визуально меньше текстового, поэтому у текста font-size: 14px, у шрифта 32. Можно ли автоматически увеличить весь иконочный шрифт, а не каждый глиф по отдельности?

Отображение в последних Firefox, Chrome, Opera, Safari на OSX Mavericks/Lion:


Отображение в последних Firefox, Chrome, Opera, Safari на Windows XP/8:


Тестировалось все в живую и на Browserstack.

2) Пара интересных моментов:
С Opera 12 с OSX отображение соотвествует вышеприлагаемому скриншоту FF с Windows.
Это не банальная проблема вертикального выравнивания - если font-size у иконочного шрифта равен размеру текста, то все гут.


3) Даже не смог сделать нормальный пример верстка на jsfiddle, почему?
Сверху Opera 12, снизу последний FF

Answer 1

[animhotep]

сглаживание шрифтов настраивается в ОС для kde например настройки в application appearance > fonts
ну и сам браузер сглаживать может (Opera)
также имеет значение порядок подключение веб шрифтов, попробуйте такой порядок

@font-face {
    font-family: 'Conv_Cuprum';
    src: url('../fonts/Cuprum.eot');
    src: url('../fonts/Cuprum.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cuprum.svg') format('svg'),
         url('../fonts/Cuprum.woff') format('woff'),
         url('../fonts/Cuprum.ttf') format('truetype');
         
    font-weight: normal;
    font-style: normal;
}

Answer 2

[Quber]

Есть такая проблема. Насколько я знаю это проблема в алгоритме сглаживания шрифтов. У всех осей Windows, Macintosh, Linux разное сглаживание, поэтому шрифты выглядят по-разному. Если хотите в Linux, чтобы шрифты отображались как в виндовс, надо костыль какой то прикручивать.. не помню уже какой, в интернете есть инфа

Answer 3

[Николай Васильчук]

Это шрифт кривой. Сравните entipo и font-awesome. Последний отображается нормально, а entipo плывет.