Заметки с тегом «fonts»

Межстрочное расстояние в абсолютных величинах

Межстрочное расстояние (или интерлиньяж) в вебе не только задаёт расстояние между строками текста, но и предписывает им центрироваться по вертикали. Это уникальное свойство можно использовать для выравнивания объектов по вертикали внутри контейнера заданной высоты.

Однако если вы задаёте интерлиньяж в пикселах для обычного текста, то это может привести к некоторым проблемам. В Twitter Bootstrap, например, межстрочное расстояние указано в пикселах прям у тега <body>. Это приводит к тому, что при изменении font-size приходится менять и line-height.

С другой стороны, задав один раз свойство line-height в виде отношения базового межстрочного расстояния к базовому кеглю, интерлиньяж будет автоматически пересчитываться для соответствующего размера шрифта. Там где нужно явно поменять межстрочное расстояние, указываем его явно.

Комментарии к заметке: 2

Дефект в IE при большом количестве начертаний в @font-face

В статье «Setting Weights And Styles With The @font-face Declaration» рассматривается любопытный случай, возникающий в IE7 и IE8 при объединении различных начертаний шрифта. Если количество начертаний для одной гарнитуры будет больше четырёх, то браузер будет не корректно их использовать.

Так же упоминается тот факт, что это вызывает падение браузера на iPad 1. Но в комментариях указывают на то, что дефект, приводящий к падению браузера, был исправлен более двух лет назад. У меня он не воспроизвёлся.

Комментарии к заметке: 2

Вертикальные метрики у веб-шрифтов

Работая с веб-шрифтами можно натолкнуться на серьёзную проблему с вертикальными метриками на разных платформах (OS X и Windows). Это может проявляется в том, что назначив цвет фону строчного элемента, расцвеченный прямоугольник во всех OS X браузерах будет смещен вниз.

У Font Squirrel есть решение этой проблемы.

Исправление вертикальных метрик шрифта с помощью Font Squirrel

Приведу примеры с использованием PT Sans до и после исправления вертикальных метрик.

Отображение в OS X

Safari 5.1

PT Sans в Safari 5.1 (OS X)

Firefox 13

PT Sans в Firefox 13 (OS X)

Chrome 19

PT Sans в Chrome 19 (OS X)

Opera 12

PT Sans в Opera 12 (OS X)

Отображение в Windows

Interner Explorer 9

PT Sans в Internet Explorer 9 (Windows)

Firefox 13

PT Sans в Firefox 13 (Windows)

Chrome 19

PT Sans в Chrome 19 (Windows)

Opera 12

PT Sans в Opera 12 (Windows)

Интересное наблюдение

Любопытно, но рендеринг текста в Windows версиях Opera, Firefox, Chrome оказывается поразительно идентичен между собой вплоть до межбуквенных и межстроковых интервалов. Увы, но такого же постоянства нет в OS X браузерах.

Комментарии к заметке: 2

Разные начертания веб-шрифта

Font Squirrel после конвертирования шрифтов создает CSS файл, в котором все начертания одной и той же гарнитуры представлены в виде совершенно разных гарнитур. Рассмотрим в качестве примера PT Sans.

@font-face {
    font-family: 'PTSansRegular';
    src: url('PTS55F-webfont.eot');
    src: url('PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS55F-webfont.woff') format('woff'),
         url('PTS55F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'PTSansItalic';
    src: url('PTS56F-webfont.eot');
    src: url('PTS56F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS56F-webfont.woff') format('woff'),
         url('PTS56F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'PTSansBold';
    src: url('PTS75F-webfont.eot');
    src: url('PTS75F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS75F-webfont.woff') format('woff'),
         url('PTS75F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'PTSansBoldItalic';
    src: url('PTS76F-webfont.eot');
    src: url('PTS76F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS76F-webfont.woff') format('woff'),
         url('PTS76F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Когда используется такой шрифт в сочетании с модификаторами начертаний font-weight и font-style, то браузер автоматически пытается «сделать» шрифт полужирным или наклонным не обращая внимания, что для этого есть специально созданные начертания.

h1, h2, h3 { font-family: PTSansBold, Arial, sans-serif; }

Если такой шрифт подключается только для заголовков, где применяется, как правило, только полужирное начертание, то для альтернативных гарнитур полужирного начертания уже не будет!

Чтобы с начертаниями был полный порядок нужно поправить описания шрифтов.

@font-face {
    font-family: 'PTSansWeb';
    src: url('PTS55F-webfont.eot');
    src: url('PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS55F-webfont.woff') format('woff'),
         url('PTS55F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'PTSansWeb';
    src: url('PTS56F-webfont.eot');
    src: url('PTS56F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS56F-webfont.woff') format('woff'),
         url('PTS56F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'PTSansWeb';
    src: url('PTS75F-webfont.eot');
    src: url('PTS75F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS75F-webfont.woff') format('woff'),
         url('PTS75F-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'PTSansWeb';
    src: url('PTS76F-webfont.eot');
    src: url('PTS76F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS76F-webfont.woff') format('woff'),
         url('PTS76F-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

Для начала указываем всем начертаниям одно и тоже имя.

Конкретно в этом примере я выбрал PTSansWeb. Я намеренно отказался от оригинального имени для демонстрации подключения требуемого шрифта, а не какого-то другого. Разумеется в продакшине, если есть шанс, что гарнитура уже установлена у пользователя в системе, то его не стоит упускать. По этому для популярных шрифтов важно сохранять исходное название семейства шрифтов («PT Sans», в моём случае).

Затем в модификаторах начертания указываем значения, которые реально соответствуют начертанию каждого файла.

Всё это позволит браузеру выбирать нужное начертание шрифта как это происходит для обычных шрифтов, установленных в системе пользователя.

Комментарии к заметке: 12