Шрифты в HTML письмах

Шрифты в HTML письмах

От автора: не существует такого понятия, как «безопасный веб-шрифт». Я видел так много сообщений с просьбой написать о безопасных шрифтах для использования в электронных письмах HTML, на которые обычно отвечали сокращенным списком шрифтов, доступных в Windows. Итак, позвольте мне объяснить, почему безопасные шрифты — это ошибочная концепция и насколько больше может быть шрифтов в электронных письмах HTML, чем в Arial и Times.

Шрифты в электронном письме в формате HTML могут быть из четырех разных источников:

Системные шрифты.

Пользовательские шрифты.

Шрифты Email клиента.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Встроенные шрифты.

Поговорим о каждом из них.

1. Системные шрифты

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

macOS Catalina предоставляет огромное количество предустановленных шрифтов — 520. Далее следует iOS 13 с 273 предустановленными шрифтами. В Windows 10 183 шрифта. А в Android… 9 семейств шрифтов.

Android — это особый случай, потому что не существует ни одной настоящей версии Android. Шрифты по умолчанию будут отличаться, если у вас есть устройство Samsung, Xiaomi или Google. Хотя Apple и Microsoft предоставляют очень четкие списки шрифтов по умолчанию, установленных в их системах, мне не удалось найти такой список ни для одного производителя устройств Android. (У Google есть только список, начиная с Android 4.1).

С таким небольшим количеством шрифтов, доступных на Android, теперь должно быть ясно, почему говорить о «безопасных шрифтах» практически бессмысленно. Даже Arial или Times New Roman отсутствуют в Android, что означает возврат к Roboto и Noto Serif соответственно.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

2. Пользовательские шрифты

На сегодняшний день вы можете установить свои собственные шрифты в любую систему. Загрузите понравившийся шрифт из Google Fonts, Adobe, DaFont или другого вашего любимого поставщика, установите его, и теперь он станет доступным для всей вашей системы.

Хотя это было возможно с самого начала в таких операционных системах, как Windows, macOS или Android, в iOS это стало возможно только с iOS 13 (в 2019 году). Например, вы можете установить Adobe Creative Cloud на iOS и загрузить и установить оттуда любой новый шрифт, сделав его доступным в любом другом приложении для iOS.

3. Шрифты Email клиента

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

Например, в веб-почту Gmail встроена собственная версия Google Sans (обычная, средняя) и Roboto (обычная, средняя, жирная). В веб-почту Outlook.com встроен Segoe UI Web (обычный, полужирный, полужирный) и иконочный шрифт Shell Fabric MDL2 Icons.

4. Встроенные шрифты

Разработчики электронной почты могут вставлять шрифты с удаленного сервера в свои электронные письма HTML, как и в Интернете. Везде работает? Нет, так же, как в Интернете.

Почему многие почтовые клиенты не поддерживают встроенные шрифты? Я не могу говорить за них. Но я предполагаю, что все сводится к безопасности. Файлы шрифтов сами по себе представляют собой не более чем небольшую исполняемую программу. И, как и любое программное обеспечение, они уязвимы и поэтому могут внести свои уязвимости в любое программное обеспечение, которое их встраивает. (См. эту ветку на StackExchange.)

Рекомендации по настройке шрифтов в HTML письмах

Сокращенное свойство font имеет очень хорошую поддержку. Поэтому вместо объявления отдельных свойств (например, font-family: sans-serif; font-size: 16px; line-height: 24px; font-weight: bold;) вы можете объявить одно свойство шрифта (например, font:bold 16px/24px sans-serif). Это короче, чище. Мне это нравится.

Всегда объявляйте общее название семейства шрифтов как запасной вариант. Если вы его не укажете, механизм рендеринга будет использовать шрифт по умолчанию. Например, в современном браузере font-family: Lobster будет отображаться как Times, а font-family: Lobster, sans-serif будет отображаться как Arial, Helvetica или Roboto в зависимости от вашей системы.

Если вы используете объявление @font-face, включите свойства mso-generic-font-family и mso-font-alt, чтобы лучше контролировать резервный шрифт в The Outlooks в Windows.

Font Style Matcher от Моники Динкулеску — отличный инструмент для поиска запасного шрифта, не слишком отличающегося от веб-шрифта, который вы хотите использовать.

Font Family Reunion от Зака Лита — отличный инструмент, чтобы увидеть, какой системный шрифт вы получите из стека шрифтов семейства шрифтов.

Автор: Rémi Parmentier

Источник: medium.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.