Шрифты для метрики: Детские шрифты — русские скачать бесплатно

Шрифты.

Разработка и использование 86

Шрифты. Разработка и использование

Построение шрифтовых файлов

Файлы, содержащие TrueType-шрифты, состоят из множества таблиц.

Каждая из таблиц содержит определенный набор значений, определяю¬
щих некоторые характеристики шрифта.

Любой шрифтовой файл начинается с таблицы смещений (Offset Table).
В ней содержится версия формата, одновременно идентифицирующая
файл как TrueType-шрифт; количество таблиц в файле и несколько значе¬
ний, облегчающих поиск нужных полей в шрифтовом файле.

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

В шрифтовой файл должны входить обязательные таблицы и могут вхо¬
дить необязательные. Приведем список всех возможных таблиц ТгиеТуре-

файлов:

Тип таблицы

Описание

Обязательные таблицы

стар

Таблицы кодирования символов шрифта, разными спо¬
собами определяющие соответствие между кодами сим¬
волов и их описаниями в шрифте

giyf

Область описания символов (контуров и разметки)

head

Заголовок шрифта

hhea

Глобальные метрики шрифта

hmtx

Горизонтальные метрики символов (ширина и поля)

loca

Таблица указателей на описания символов

maxp

Требования к памяти для данного шрифта

name

Таблица имен шрифта

post

Информация, необходимая для использования шрифта
на PostScript-принтерах (содержит поля, входящие в за¬
головок PostScript-шрифтов и PostScript-имена символов)

OS/2

Метрики и описания, необходимые для использования
шрифта в OS/2 и Windows

Необязательные таблицы

cvt

Таблица значений (CVT)

fpgm

Шрифтовая программа (вызывается один раз при загруз¬
ке шрифта)

hdmx

Горизонтальные метрики устройства, содержат набор
метрик символов для определенных размеров

— 168 —

Глава 6. Форматы цифровых шрифтов

Тип таблицы

Описание

kern

Таблица кернинга

LTSH

Таблица, определяющая размер символов, начиная с ко¬
торого горизонтальные метрики начинают линейно за¬
висеть от размера шрифта

prep

Программа СѴТ (вызывается всякий раз при изменении
размера символов или при трансформировании шрифта)

WIN

Зарезервирована для использования в будущем

VDMX

Таблица, содержащая вертикальные метрики символов

FOCA

Зарезервирована для использования в будущем

PCLT

Таблица, содержащая значения, необходимые для рабо¬
ты с принтерами, управляемыми языком PCL 5 (HP
LaserJet III)

Мы не будем подробно рассматривать особенности построения каж¬
дой таблицы, поскольку это займет слишком много времени. Тем, кто за¬
интересовался построением TrueType-шрифтов, рекомендуем обратить¬
ся к официальной документации, а также найти программы, позволяющие
преобразовать любой TrueType-шрифт в текстовый файл, с которым мож¬
но работать в любом текстовом редакторе.

Большинству пользователей можно порекомендовать не углубляться в
изучение формата TrueType, а обратиться к одному из редакторов контур¬
ных шрифтов, имеющему возможность импорта и экспорта TrueType-
шрифтов.

Другие форматы

Кроме наиболее распространенных форматов Туре 1 и TrueType су¬
ществует множество других форматов представления шрифтов, имею¬
щих определенные области применения. Как правило, каждый из фор¬
матов поддерживается одной или несколькими крупными компаниями,
занимающимися разработкой шрифтов (Adobe, Agfa, Bitstream, URW) или
программного обеспечения и оборудования (Apple, Hewlett Packard,
Microsoft, Sun):

Фирма

Формат

Область применения

Adobe

Type 0, Type 1

PostScript-принтеры и программы

Agfa

Intellifont

Растеризатор Intellifont for

Windows (аналог ATM)

Apple

TrueType

Операционные системы

— 169 —

Знакомство с Font Metrics

Файлы шрифтов содержат большое количество информации о шрифте. Являетесь ли вы дизайнером или разработчиком, узнав больше о том, как работают шрифты, вы можете открыть новые двери в том, как вы работаете и что вы создаете.

Что такое метрики шрифта?

Начнем со шрифта. Шрифт — это цифровое представление гарнитуры, состоящее из ряда глифов (обычно называемых буквами или символами). Компьютеры считывают файл шрифта, чтобы отображать глифы на экране в виде пикселей. Чтобы описать, как все эти отдельные глифы должны быть собраны вместе в слова, предложения и абзацы, дизайнеры шрифтов кодируют шрифт с помощью метрики .

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

Визуализация метрик шрифта очень похожа на рекомендации в Sketch или Photoshop.

Метрики для lato.ttf, просмотренные с помощью https://opentype. js.org/font-инспекции.html, а затем визуализированные.

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

Точно так же, несмотря на то, что средства проектирования и разработки используют метрики шрифтов «под капотом», они не часто раскрывают их своим пользователям. Но они могли — и это могло бы изменить то, как вы проектируете. Чтобы понять как, нам сначала нужно поговорить об анатомии шрифта.

Загляните внутрь, введите

За буквами, составляющими это предложение, скрывается анатомия. Как показано в приведенном ниже примере, изгиб буквы «s» называется корешком, а пробел внутри букв «a» или «o» — счетчиком. Затем есть воображаемая линия, на которой «сидят» все буквы (базовая линия), вершины заглавных букв (высота прописной буквы) и вершины строчных букв (высота x).

Анатомия шрифта. Кредит: https://www.fontshop. com/glossary.

Когда мы практикуем типографику, размещая текст на странице или экране, мы часто используем различные элементы анатомии для создания удобочитаемости и красоты. Например, подсказки для поиска в Картах Google содержат как название места, так и адрес.

Чтобы помочь вам сосредоточиться на самой важной информации (название места), типограф выбрал для адреса меньший размер шрифта и более светлый цвет. Но для удобства чтения и название места, и адрес имеют общую цифру 9.0031 базовый уровень .

Базовая линия также полезна для создания вертикального ритма, который может облегчить читателям переход от строки к строке, от абзаца к абзацу и от раздела к разделу.

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

Уведомление от Airbnb.

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

Название/описание с https://helmsworkshop.com/clients.

Когда мы центрируем значки по вертикали с помощью шрифта, мы обычно центрируем на основе высоты прописной буквы (если первая буква в верхнем регистре) или высоты x (если первая буква в нижнем регистре).

Типографская анатомия играет большую роль в наших проектах. Части этой анатомии закодированы в метриках шрифта, которые открывают дверь для наших инструментов, чтобы помочь по-новому.

Как сегодня наши инструменты используют метрики шрифтов?

Метаданные метрик шрифта используются такими инструментами, как Sketch, для включения таких функций, как интеллектуальные направляющие, которые могут помочь вам привязать базовую линию к сетке макета.

Точно так же вертикальное выравнивание CSS полностью зависит от метрик шрифта.

К сожалению, в большинстве случаев наши инструменты скрывают анатомию шрифта за ограничительной рамкой .

В Sketch ограничивающая рамка представлена ​​маркерами выделения. В CSS вы можете увидеть это, установив background-color . Позиционирование всех типов связано с ограничительной рамкой, поэтому, если вам нужно 100 пикселей от верхней части экрана до абзаца, наши инструменты дают 100 пикселей до верхней части рамки, а не до верхней части буквы «L» (высота прописной буквы). или нижняя (базовая линия).

Хотя наши инструменты, как правило, довольно хорошо помогают с выравниванием базовой линии, это не всегда так. Многоколоночные макеты в Sketch могут быть сложными. Если два заголовка разного размера выровнены по нижнему краю ограничивающей рамки, меньший неизбежно будет выглядеть слишком низким. Необходимо позаботиться о создании сетки макета для привязки к смарт-направляющим, или их необходимо выровнять вручную.

Точно так же не всегда работает выравнивание текста по верхнему краю значка. Слева инструмент Sketch для выравнивания по верхнему краю. Справа я вручную выровнял верхнюю часть буквы «L» со значком. На этот раз никакой помощи от умных гидов нет.

Наконец, вертикальное центрирование текста по значку — это проблема. Используя инструмент выравнивания Sketch, текст всегда выглядит слишком низко. То же самое верно и для CSS flexbox align-items: center .

Это связано с тем, что хотя пространство над и под ограничительной рамкой текста одинаковое, пространство над и под буквой «М» неодинаково.

В зависимости от шрифта и размера шрифта выравнивание часто может быть отклонено более чем на 1 пиксель.

Во всех этих примерах вы могли бы «на глазок», щурясь или увеличивая масштаб до тех пор, пока все не станет выглядеть справа . Однако просмотр на глаз имеет некоторые заметные недостатки:

• Перевод — просмотр на глаз приводит к множеству, казалось бы, случайных значений для интервалов/полей. Скажем, поле: 27px 0 18px . Если вы не создаете проекты самостоятельно, разработчик может легко ошибиться при копировании значений из Sketch. И если вы работаете в команде с другими дизайнерами, соблюдение соглашения об интервалах (например, сетки 8pt) становится почти невозможным.
• Техническое обслуживание — даже если все значения пробелов успешно вводятся в код, их легко случайно сломать при будущих изменениях кода.
• Гибкость — если размер, высота строки или шрифт когда-либо изменятся, вам придется снова все тщательно проверять на глаз.

С современными инструментами метрики шрифта обычно скрыты за кулисами. Но они не должны быть.

Как наши инструменты могут использовать метрики шрифтов?

Метрики шрифтов позволяют нам создавать более интеллектуальные инструменты. Они являются ключом к открытию ограничивающего прямоугольника, обнажая красивую типографскую анатомию внутри.

Например, если текущим шрифтом является Lato, Sketch может считать метрики шрифта lato.ttf , рассчитать расстояние от базовой линии до высоты шапки, а затем изменить ограничивающую рамку, чтобы привязать ее к этой новой высоте. Вертикальное выравнивание по центру теперь работает отлично.

После сообщения о вашем намерении центрировать по высоте крышки инструменты могут сохранить его. Если нужно увеличить размер значка или уменьшить размер текста (например, если ваши пользователи настроили размер базового шрифта CSS в своем браузере), ничего не сломается.

То же самое преимущество применяется при изменении шрифта (возможно, ваш веб-шрифт не загружается или вы используете стратегию системных шрифтов).

Писать код тоже становится проще — не более того align-self: flex-start; поле сверху: 13px; , чтобы идеально центрировать текст. Если бы CSS предоставлял метрики шрифтов через свойство, такое как ведущая обрезка, flexbox мог бы позаботиться обо всем за вас.

 .icon-метка {
    /*
    обрезать биты ограничивающей рамки
    выше высоты шапки и ниже
    идеографическая базовая линия
    */
    окантовка: кепка идеографическая;
    /*
    затем центрируйте, используя обрезанную высоту
    */
    выровнять себя: по центру;
} 

Наши инструменты также могут использовать метрики шрифта, чтобы смотреть на x-высоту и предлагать читаемый шрифт для основного текста, быстро находить подходящий запасной шрифт, чтобы избежать FOUC, или в отдаленном будущем алгоритмически предлагать пары шрифтов.

Использование фантастического средства сопоставления стилей шрифтов Моники Динкулеску, чтобы избежать FOUC. Могут ли метрики шрифтов убрать часть догадок?

Заключение

Хорошая типографика — это сложно, но с хорошими инструментами это может быть проще. Использование необработанных анатомических особенностей шрифта может позволить нам создавать точные, эластичные, читабельные и, возможно, даже оригинальные дизайны.

Но может быть трудно радоваться функциям Sketch, которых не существует, и свойствам CSS, которые не реализованы. К счастью, мы можем построить некоторые из них сами! В следующей статье я расскажу, как именно извлекать и читать метрики шрифтов для ваших шрифтов. Когда у вас будут необработанные данные, я объясню математику их использования в макете и то, как они могут быть полезны в современных HTML и CSS.

Дальнейшее чтение

Метрики шрифтов — низкоуровневая деталь реализации, но они далеко не скучны. Если вам интересно узнать больше, ознакомьтесь с некоторыми из этих фантастических ресурсов. А если ведущая обрезка звучит как привлекательная функция CSS, ознакомьтесь с CSSWG #3240.

• Глубокое погружение в CSS: метрики шрифта, высота строки и выравнивание по вертикали Винсент Де Оливейра
• Приступаем к тонкостям рендеринга текста в Sketch, автор Яким ван Зуйлен
• Understanding the First Baseline Position of Text Майк Рэнкин
  • Стоит отметить, что наши старые инструменты дизайна (InDesign, Illustrator) предоставляют более широкие возможности управления метриками шрифта, чем сегодняшние современные инструменты

Шрифты и текстовые метрики — приложения Win32

Редактировать

Твиттер LinkedIn Фейсбук Эл. адрес

• Статья
• 19. 08.2020
• 5 минут на чтение

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

• Сведения о метриках шрифтов в DirectWrite см. в разделе Текстовые метрики.
• Дополнительные сведения об управлении текстом в приложениях с помощью GDI см. в разделах Шрифты и текст.

Для получения более подробной информации об использовании шрифтов и спецификациях типов см. сайт типографики Microsoft.

Доступные шрифты

Контурные шрифты, поставляемые с Windows, поставляются как шрифты OpenType с контурами TrueType (Windows также поддерживает шрифты OpenType в формате CFF). Списки всех шрифтов, поставляемых Windows, см. в разделе Типографика Microsoft: шрифты по продуктам или семействам. Все контурные шрифты Windows соответствуют последней версии спецификации OpenType.

Список всех текущих и устаревших шрифтов пользовательского интерфейса см. в разделе Показатели заблокированных шрифтов ниже.

Модификации шрифтов

Для обеспечения обратной совместимости шрифты редко удаляются из Windows. Однако шрифты часто модифицируются. Модификации могут включать добавление символов, перерисовку существующих символов, изменение подсказок или добавление или изменение поддержки расширенных функций OpenType и формирование сложных сценариев.

Метрики заблокированных шрифтов

Обратите внимание, что некоторые значения, связанные со шрифтами пользовательского интерфейса и шрифтами по умолчанию, используемыми в приложениях Microsoft, заблокированы. Шрифты пользовательского интерфейса используются для отображения таких элементов пользовательского интерфейса, как заголовки, диалоговые окна и меню. В эти шрифты внесено очень мало изменений, учитывая их высокую заметность и частое использование. Однако, поскольку сообщаемые значения, связанные с этими шрифтами, заблокированы, могут быть расхождения между сообщаемыми и фактическими значениями шрифта.

Следующие сообщаемые значения заблокированы для пользовательского интерфейса и шрифтов по умолчанию и могут указываться неточно:

• Эти значения из таблицы шрифтов OS/2:
  • xAvgCharWidth
  • ТипоЛайнГэп
  • stypoAscender
  • sTypoDescender
  • usWinAscent
  • usWinDescent
• В заголовке шрифта указано значениеunitPerEm
• Значения из таблицы показателей вертикального устройства (VDMX)
• Расширение ширины отдельных глифов

Вот список шрифтов пользовательского интерфейса, поставляемых с Windows 8.1 (затронутых заблокированными значениями):

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

Эти шрифты используются по умолчанию в приложениях Microsoft, и на них также влияют заблокированные значения:

• Arial
• Калибри
• Камбрия
• Консолас
• Курьер Новый
• МС Минчо
• Таймс Нью Роман
• Вердана

Показатели динамического шрифта

Помимо заблокированных показателей, перечисленных выше, значения шрифта сообщаются точно. Если шрифт изменен в новой версии Windows, динамические значения шрифта будут различаться между новым и старым шрифтом. Например, когда к шрифту добавляется глиф, значения в заголовке шрифта могут измениться. Отсечение может произойти, если эти значения (включая xMin, xMax, yMin и yMax, а также минимальную и максимальную ограничивающую рамку для глифов в шрифте) были заблокированы и не отображали истинные значения.

Важно

Если вы используете динамические значения шрифта в своем приложении (например, в TEXTMETRIC ), эти значения изменятся, если шрифты будут изменены в будущих версиях Windows. Не используйте эти фактические значения в ситуациях, когда текст должен оставаться статичным.

Рекомендации по использованию метрик шрифта

• Вычисляйте метрики экрана и метрики шрифта (например, среднюю ширину) при запуске приложения и используйте эти значения для макета приложения. Это обеспечит неизменно точную визуализацию, и ваш макет будет реагировать на изменения в шрифтах или приспосабливаться к резервному шрифту. Обзор резервных шрифтов и связывания шрифтов см. в разделе Globalization Step by Step: Fonts. См. раздел «Использование резервного шрифта» для получения информации, относящейся к Uniscribe.
  • Чтобы вычислить базовую метрику, отобразите репрезентативный текст для предполагаемого языка/сценарии.
  • Для элементов управления, которые содержат только одну строку развернутого текста, расположите их так, чтобы они соответствовали полной ширине необрезанного текста.
  • Для элементов управления с несколькими строками получите общую длину, разделите ее на длину символа, и вы получите твердую ширину для работы. Обратите внимание, что это сложнее для сложных скриптов, где один «символ» для читателя может быть несколькими кодовыми точками.
• Используйте sTypoAscender, sTypoDescender и unitPerEm (из таблицы OS/2) для расчета интервала по вертикали. sTypoAscender используется для определения оптимального смещения от верхней части текстового фрейма до первой базовой линии, а sTypoDescender определяет оптимальное смещение от нижней части текстового фрейма до последней базовой линии.