Веб-шрифты отображаются по-разному в Windows, Mac и Linux - PullRequest
Новая
       1

Веб-шрифты отображаются по-разному в Windows, Mac и Linux

4 голосов
/ 20 апреля 2011

Я впервые использую веб-шрифты на веб-сайте, который в настоящее время делаю, и заметил, что ограничивающие рамки шрифтов кажутся разными в Windows, Linux и Mac (то же самое в Linux и Mac).Это не зависит от браузера, поскольку одни и те же версии Chrome и Firefox во всех операционных системах имеют эти различия.По сути, в Windows есть дополнительное пространство сверху символа, в то время как в Linux и Mac ограничивающая рамка символа намного ближе к фактической вершине символа (и, например, умлауты находятся за пределами поля).Это естественным образом меняет поведение позиций, полей и т. Д.

В настоящее время шрифт определяется следующим образом: 

@font-face { font-family: "FranklinGothicHand"; 
    src: url('fonts/franklingothichanddemi-webfont.eot'); 
    src: url('fonts/franklingothichanddemi-webfont.eot?iefix') format('eot'),
        url('fonts/franklingothichanddemi-webfont.woff') format('woff'),
        url('fonts/franklingothichanddemi-webfont.ttf') format('truetype'),
        url('fonts/franklingothichanddemi-webfont.svg#webfontLgJOAlmK') format('svg'); 
}

Из-за этого, например, я не могу правильно выровнять по вертикалиоформленный начальный заголовок статьи в первой строке статьи, поскольку ее положение в разных операционных системах различно.

Кто-нибудь может придумать какое-либо решение для этого?

Ответы [ 3 ]

3 голосов
/ 20 апреля 2011

Я сам изучал это на днях и пришел на этот сайт с объяснением того, что происходит.http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/ Вывод, который я получил из этой статьи, заключается в том, что ОС по-разному отображает шрифты, и единственное реальное исправление, по-видимому, заключается в том, чтобы поменять сам шрифт, чтобы заставить его работать с различными стилями визуализации ОС.К сожалению, редактирование фактического шрифта, вероятно, не вариант, я думаю.

2 голосов
/ 20 апреля 2011

Возможно, определите браузер с помощью javascript с помощью этого плагина (см. Os.name) http://jquery.thewikies.com/browser/, а затем используйте его, чтобы определить, какую таблицу стилей вы хотите загрузить Как загрузить файлы CSS с помощью Javascript?

Шрифты действительно странные между операционными системами, меня не удивляет, что рендеринг несовместим.

0 голосов
/ 03 мая 2013

Я только что обнаружил -webkit-font-smoothing: antialiased; - похоже, он хорошо работает для Safari и Chrome в OSX.

...