Проблемы с отображением высоты шрифта браузера Mac и Windows - PullRequest
Новая
       16

Проблемы с отображением высоты шрифта браузера Mac и Windows

7 голосов
/ 18 мая 2010

Я использую собственный шрифт и тег @ 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 ]

7 голосов
/ 18 мая 2010

Подъем шрифта слишком мал. Браузеры 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 для таких небольших изменений, потому что он с меньшей вероятностью разрушит то, что не понимает.

3 голосов
/ 11 января 2014

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

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

0 голосов
/ 18 мая 2010

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

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

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

...