Верстальщику о шрифтах. Часть II : Соответствия шрифтов Windows, Mac и Unix/Linux

Шрифты поддерживающие кириллицу

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

Ниже приведена таблица соответствий шрифтов.

Windows	Mac OS	Unix/Linux	Родовое семейство
Arial Black	Helvetica CY	Nimbus Sans L	Sans-serif
Arial	Helvetica CY	Nimbus Sans L	Sans-serif
Comic Sans MS	Monaco CY	* (см. ниже)	cursive
Courier New	* (см. ниже)	Nimbus Mono L	Monospace
Georgia	* (см. ниже)	Century Schoolbook L	Serif
Impact	Charcoal CY	* (см. ниже)	Sans-serif
Times New Roman	Times CY	Nimbus Roman No9 L	Serif
Trebuchet MS	Helvetica CY	* (см. ниже)	Sans-serif
Verdana	Geneva CY	DejaVu Sans	Sans-serif

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

Например, если основным текстом макета является Arial, находим в табличке этот шрифт и в CSS пишем соответствующую ему строчку:

Эта запись означает, что если у пользователя есть шрифт Arial (а он есть у всех пользователей Windows и всех пользователи Mac OS X), то страница отобразися этим шрифтом. Если же у пользователя нет этого шрифта, то страничка русскоязычного пользователя Mac OS 9 точно отобразится стандартным системным шрифтом Helvetica CY, а у пользователя Unix/Linux отобразися шрифтом Nimbus Sans L который установлен у 90% пользователей Unix/Linux. Если же пользователь Unix/Linux принадлежит в тем 10%, у которых нет этого шрифта, то страница отобразится тем шрифтом с засечками, который установлен для просмотра Web-страниц по умолчанию.

Образцы подобных линеек можно увидеть, например, в Dreamweaver.

Образец линеек шрифтов в Dreamweaver

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

Но мы то теперь знаем, что означает эта строка, не правда ли? И уже можем правильно ее использовать.

Но почему же строка построенная нами так сильно отличается от привычного по Dreamweaver:

Кроме того, что в таблице учитываются шрифты Unix/Linux, там еще после обычного Helvetica идет какой-то странный значок CY. Давайте разбираться, что же это такое!

До выхода Mac OS X эта линейка имела следующее значение: для пользователей Windows отображаем страницу Arial, для пользователей Mac OS 9 — стандартным шрифтом Helvetica, а остальные видят страницу с системным шрифтом без засечек, настроенным по умолчанию в браузере. Но опять же немаловажный нюанс! У стандартного Mac OS 9 шрифта Helvetica нет кириллицы! Для русскоязычной страницы это означало следующее: для пользователей Windows отображаем страницу Arial, для пользователей Mac OS 9 — стандартным шрифтом Helvetica, который выводит нечитаемую информацию, а остальные видят страницу с системным шрифтом без засечек, настроенным по умолчанию в браузере.

Для правильного отображения этого набора у пользователей Mac OS 9 вместо некириллизированной Helvetica, имеет смысл указывать такой же стандартный для Mac OS 9 шрифт Helvetica CY, содержащий кириллицу.

Прочтение линеек после выхода Mac OS X изменилось. Теперь для Windows/Mac OS X указывается один общий стандартный шрифт. А если мы хотим, чтобы замысел дизайнера смогли увидеть пользователи Mac OS 9, для них нужно в линейке шрифтов прописать шрифт содержащий кириллицу.

Таким образом хотя и не существует безопасных шрифтов, существуют безопасные линейки шрифтов. Их еще называют шрифтовыми CSS стеками. В эти линейки помимо стандартных шрифтов Windows/Mac OS X можно включать также эквивалентные шрифты из стандартного набора Mac OS 9 (которая не содержит по умолчанию «безопасных» шрифтов) и распространенных шрифтов Unix/Linux.

Любой верстальщик рано или поздно сталкивается с моментом, когда дизайнер использует в макете шрифт, не входящий в перечень «безопасных»;. Но это еще не повод бить тревогу! Например, дизайнеры очень часто используют на макетах шрифт Tahoma, который не входит в этот перечень. Правильно построенная линейка шрифтов открывает возможность использовать не только Tahoma, но и другие шрифты. Все большее количество дизайнеров пользуются этой возможностью и грамотный верстальщик должен об этом знать.

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

Windows	Mac OS	Родовое семейство
Lucida Console	Monaco	Monospace
Lucida Sans Unicode	Lucida Grande	Sans-serif
Tahoma	Geneva CY	Sans-serif

А если без кириллицы?

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

Windows	Mac OS	Unix/Linux	Родовое семейство
Arial Black	Gadget	Nimbus Sans L	Sans-serif
Arial	Helvetica	Nimbus Sans L	Sans-serif
Comic Sans MS	Monaco	TSCu_Comic	cursive
Courier New	Courier	Nimbus Mono L	Monospace
Georgia	* (см. ниже)	Century Schoolbook L	Serif
Impact	Charcoal	Rekha	Sans-serif
Times New Roman	Times	Nimbus Roman No9 L	Serif
Trebuchet MS	Helvetica	Garuda	Sans-serif
Verdana	Geneva	DejaVu Sans	Sans-serif

Для шрифтов Arial, Courier New и Times New Roman при составлении линеек лучше указывать сначала шрифт для Unix/Linux, а затем для Mac OS. Это связанно с некоторой кривостью набора Linux шрифтов X11 core fonts set.

Шрифты, которые не входят в перечень «безопасных», но могут использоваться на макетах, лучше определять шрифтовыми CSS стеками на основе этой таблицы.

Windows	Mac OS	Unix/Linux	Родовое семейство
Lucida Console	Monaco	—	Monospace
Lucida Sans Unicode	Lucida Grande	Garuda	Sans-serif
Palatino Linotype	Palatino	Garuda**	Sans-serif
Tahoma	Geneva	Kalimati	Sans-serif

Прочерк в графе Unix/Linux обозначает, что пользователи этих ОС скорее всего увидят на странице шрифт, установленный для отображения страниц по умолчанию.

** В данной линейке шрифт Garuda имеет смысл ставить перед Palatino (см. пояснение выше).

Установка и удаление шрифтов на компьютере Mac

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

Установка шрифтов

Дважды щелкните нужный шрифт в Finder, затем щелкните «Установить шрифт» в открывшемся окне предварительного просмотра шрифта. После тогда как компьютер Mac проверит шрифт и откроет программу Шрифты, шрифт установлен и доступен для использования.

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

Шрифты, отображаемые в программе «Шрифты» затененными, либо отключены («Откл.»), либо доступны для загрузки с веб-сайта Apple как дополнительные. Чтобы загрузить шрифт, выделите его и выберите «Правка» > «Загрузить».

Отключение шрифтов

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

Удаление шрифтов

Удалить можно любой шрифт, не являющийся обязательным для компьютера Mac. Выделите шрифт в программе «Шрифты», затем выберите «Файл» > «Удалить». Программа «Шрифты» переместит шрифт в корзину.

Дополнительная информация

ОС macOS поддерживает шрифты TrueType (.ttf), Variable TrueType (.ttf), TrueType Collection (.ttc), OpenType (.otf) и OpenType Collection (.ttc). В ОС macOS Mojave добавлена поддержка шрифтов OpenType-SVG.

Шрифты устаревшего комплекта TrueType и шрифты PostScript Type 1 LWFN могут работать, но использовать их не рекомендуется.

Какие шрифты (если есть) предварительно установлены в Windows, OS X и iOS?

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

• Microsoft Windows (XP+)
• Apple Mac OS X (10.5+)
• Apple iOS (5+)

насколько я могу судить, единственным кандидатом оказывается Arial, но я надеюсь, что есть и другие.

3 ответов

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

причина в том, что, когда почтовый клиент, как Outlook, Thunderbird, или Mail на OS X или iOS отображает сообщение электронной почты HTML, он использует некоторые устоявшиеся HTML макет двигателя. Например, Thunderbird использует тот же движок верстки, что и Firefox-Gecko, а Mail-WebKit, который отображает HTML-страницы в Safari и Chrome.

Ниже приведен список веб-безопасных шрифтов рекомендуется полагаться наw3schools.com:

Шрифты С Засечками

• Грузии
• Palatino Linotype
• Times New Roman

Шрифты Без Засечек

• Arial
• Arial Black (недоступно для iOS 5)
• комикс без МС (недоступно для iOS 5)
• влияние (не доступна на iOS 5)
• Lucida Sans Unicode (недоступно для iOS 5)
• Tahoma (недоступно для iOS 5)
• Требюше MS
• Verdana

Моноширинный Шрифт

альтернативные списки веб-безопасных шрифтов:

Что касается iOS в частности, вы можете проверить, какие шрифты установлены на устройстве iOS с помощью шрифты приложение, которое является бесплатным, или с помощью этот онлайн-инструмент.

Шрифты, общие для всех (актуальных) версий Windows, и их Mac-эквиваленты

Введение

В данном списке перечислены шрифты, общие для всех актуальных на данный момент операционных систем Windows (фактически начиная с Windows 98), и их эквиваленты в Mac OS. Такие шрифты иногда называют «безопасными шрифтами для браузеров» (browser safe fonts). Это небольшой справочник, которым я пользуюсь, когда делаю Web-страницы и думаю, что он будет полезен и Вам.

Если Вы новичок в web-дизайне, то может быть думаете что-нибудь типа: «Почему это я должен ограничиваться таким небольшим набором шрифтов? У меня есть огромная коллекция прекрасных шрифтов!» Дело в том, что браузер посетителя может отобразить только те шрифты, которые установлены в его операционной системе (прим. переводчика: в настоящее время уже есть возможность применять фактически любые шрифты при оформлении страниц используя CSS 3 и его новое свойство @font-face; правда, поддерживают эту функцию пока ещё далеко не все браузеры), а это означает, что каждый посетитель Вашей страницы должен быть обладателем выбранных Вами шрифтов. Поэтому Вы должны использовать только те шрифты, которые есть в каждой операционной системе. К счастью, в CSS есть свойство @font-family, облегчающее эту задачу.

Список

Значение @font-family	Windows	Mac	Семейство
Arial, Helvetica, sans-serif	Arial	Arial, Helvetica	sans-serif
«Arial Black», Gadget, sans-serif	Arial Black	Arial Black, Gadget	sans-serif
«Comic Sans MS», cursive	Comic Sans MS	Comic Sans MS 5	cursive
«Courier New», Courier, monospace	Courier New	Courier New, Courier 6	monospace
Georgia, serif	Georgia 1	Georgia	serif
Impact,Charcoal, sans-serif	Impact	Impact 5 , Charcoal 6	sans-serif
«Lucida Console», Monaco, monospace	Lucida Console	Monaco 5	monospace
«Lucida Sans Unicode», «Lucida Grande», sans-serif	Lucida Sans Unicode	Lucida Grande	sans-serif
«Palatino Linotype», «Book Antiqua», Palatino, serif	Palatino Linotype, Book Antiqua 3	Palatino 6	serif
Tahoma, Geneva, sans-serif	Tahoma	Geneva	sans-serif
«Times New Roman», Times, serif	Times New Roman	Times	serif
«Trebuchet MS», Helvetica, sans-serif	Trebuchet MS 1	Helvetica	sans-serif
Verdana, Geneva, sans-serif	Verdana	Verdana, Geneva	sans-serif
Symbol	Symbol 2	Symbol 2	—
Webdings	Webdings 2	Webdings 2	—
Wingdings, «Zapf Dingbats»	Wingdings 2	Zapf Dingbats 2	—
«MS Sans Serif», Geneva, sans-serif	MS Sans Serif 4	Geneva	sans-serif
«MS Serif», «New York», serif	MS Serif 4	New York 6	serif

1 Шрифты Georgia и Trebuchet MS поставляются вместе с Windows 2000/XP и включены в пакет шрифтов IE (да и вообще поставляются со многими приложениями от Microsoft), поэтому они установлены на многих компьютерах с ОС Windows 98.

2 Символьные шрифты отображаются только в Internet Explorer, в остальных браузерах они обычно заменяются на стандартный шрифт (хотя, например, шрифт Symbol отображается в Opera, а Webdings — в Safari).

3 Шрифт Book Antiqua практически идентичен Palatino Linotype; Palatino Linotype поставляется с Windows 2000/XP, а Book Antiqua — с Windows 98.

4 Обратите внимание, что эти шрифты не TrueType, а bitmap, поэтому они могут плохо выглядеть с некоторыми размерами (они предназначены для отображения в размерах 8, 10, 12, 14, 18 и 24 pt при 96 DPI).

5 Эти шрифты работают в Safari только в стандартном начертании, но не работают при выделении жирным или курсивом. Comic Sans MS также работает жирным, но не курсивом. Другие Mac-браузеры, кажется, нормально эмулируют отсутствующие у шрифтов свойства самостоятельно (спасибо Christian Fecteau за подсказку).

6 Эти шрифты установливаются в Mac только при Classic-инсталляции