Mac по сравнению с Windows Browser Font Height Rendering Issue
Я использую пользовательский шрифт и @font-face тег. В Windows все выглядит большим, независимо от того, является ли это Firefox, Chrome или IE.
На Mac это - другая история. По некоторым причинам рендерер Mac Font думает, что шрифт намного короче, чем это.
Например, рассмотрите этот тестовый код (живой пример здесь):
Webble
The quick brown fox jumped over the lazy dog.
Откройте его в Windows Firefox и в Firefox Mac. Используйте свою мышь для выбора его.
В Windows Вы заметите, что он полностью выбирает шрифт.
На Mac это только выбирает приблизительно половину шрифта. Если Вы посмотрите на то, что это выбирает, то Вы будете видеть, что та часть центрировалась вместо полной высоты шрифта.
Там должен так или иначе зафиксировать это довольно большое несоответствие?
2 ответа
Высота шрифта слишком мала. Браузеры Windows (и Mac Safari тоже в моем тестировании) просто выкидывают значение подъема как неправильное, тогда как Firefox и Opera на Mac его принимают.
Самый простой способ исправить это - использовать ttx, входящий в состав FontTools .
Используйте это так:
% ttx bubbleboy-2.ttf
[...]
% edit bubbleboy-2.ttx
Измените значение подъема на 1100 (или другое, что вам подходит):
<hhea>
<tableVersion value="1.0"/>
<ascent value="1100"/>
Затем восстановите шрифт:
% ttx bubbleboy-2.ttx
Compiling "bubbleboy-2.ttx" to "bubbleboy-2#1.ttf"...
[...]
Этот новый шрифт должен быть исправлен; Вы можете проверить, открыв его в Книге шрифтов.
Если вы хотите получить более наглядное представление о проблеме, попробуйте FontForge , хотя имейте в виду, что его интерфейс довольно странный. Открыв шрифт, дважды щелкните заглавную букву; вы увидите горизонтальную линию, разделяющую глиф пополам. Это (неправильный) подъем. Вы можете исправить подъем, выбрав «Элемент»> «Информация о шрифте», затем нажмите «Общие». Снимите флажок «Масштабировать контуры», иначе подъем будет больше, но все равно будет неправильным. : -)
Однако, чтобы изменить шрифт, я бы порекомендовал ttx вместо FontForge для небольших изменений, подобных этому, потому что это с меньшей вероятностью разрушит то, что он не понимает.
На самом деле виновником является Windows. Рендерер шрифтов Windows ClearType фактически вбивает форму шрифта в границы пикселей, чтобы сделать его "четче", в то время как Mac OS не трогает форму шрифта (что я очень предпочитаю). Это часто приводит к тому, что глифы на экране становятся "выше" или "тоньше", в то время как в Mac OS вы получаете истинное представление шрифта, каким его задумал дизайнер.
Вот статья Джеффа Этвуда, объясняющая различия. В любом случае, вы не сможете обойти это.
http://www.codinghorror.com/blog/2007/06/font-rendering-respecting-the-pixel-grid.html