Mac и Windows Browser Windows проблема с высотой шрифта

Я использую собственный шрифт и тег @font-face. В Windows все выглядит отлично, независимо от того, Firefox, Chrome или IE.

На Mac это другая история. По какой-то причине средство визуализации шрифтов Mac считает, что шрифт намного короче, чем он есть.

Например, рассмотрим этот тестовый код ( живой пример здесь):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        
        <title>Webble</title>
        <style type="text/css">
        @font-face
        {
            font-family: "Bubbleboy 2";
            src: url("bubbleboy-2.ttf") format('truetype');         
        }

        body
        {
            font-family: "Bubbleboy 2";
            font-size: 30px;
        }

        div
        {
            background-color: maroon;
            color: yellow;
            height: 100px;
            line-height: 100px;
        }
        </style>
    </head>
    <body>
        <div>The quick brown fox jumped over the lazy dog.</div>
    </body>
</html>

Откройте его в Windows Firefox и Mac Firefox. Используйте вашу мышь, чтобы выбрать его.

В Windows вы заметите, что он полностью выбирает шрифт.

На Mac он выбирает только половину шрифта. Если вы посмотрите на то, что он выбирает, вы увидите, что эта часть была отцентрирована, а не на всю высоту шрифта.

Есть ли способ исправить это довольно большое несоответствие?

Источник

3 ответа

Решение

Подъем шрифта слишком мал. Браузеры 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, хотя имейте в виду, что его интерфейс довольно барочный. Как только вы открыли шрифт, дважды нажмите на заглавную букву; Вы увидите горизонтальную линию, разделяющую глиф на части. Это (неправильное) восхождение. Вы можете исправить всплытие в Element > Font Info, затем нажмите General. Снимите флажок "Масштабные контуры", иначе подъем будет больше, но все равно будет неправильным.:-)

Однако, чтобы изменить шрифт, я бы порекомендовал ttx поверх FontForge для таких небольших изменений, потому что он с меньшей вероятностью разрушит то, что он не понимает.

Источник

Я смог исправить свой шрифт, загрузив версию TTF в FontSquirrel и выбрав опцию "Эксперт", а затем сохранив все настройки по умолчанию. Я полагаю, что это исправляет "Fix Vertical Metrics".

Теперь высота строки шрифта отображается одинаково на MAC и ПК. Удачи

Источник

На самом деле Windows является виновником. Средство визуализации шрифтов Windows ClearType фактически превращает форму шрифта в границы пикселей, чтобы сделать его "более четким", в то время как Mac OS не касается формы шрифта (что я очень предпочитаю). Это часто приводит к "более высоким" или "более тонким" глифам на экране, тогда как в Mac OS вы получаете истинное представление шрифта в соответствии с замыслом дизайнера.

Вот статья Джеффа Этвуда, объясняющая различия. В любом случае, вы не сможете обойти это.

http://www.codinghorror.com/blog/2007/06/font-rendering-respecting-the-pixel-grid.html

Источник
Другие вопросы по тегам