Безопасные шрифты
Автор: Cake_SellerПеревод статьи «Common fonts to all versions of Windows & Mac equivalents» (Основные шрифты всех версий Windows и их эквиваленты на Mac’ах). Перевел Cake_Seller.
Резюме: эта тема уже не новая. В статье рассказывается о том, какие шрифты выбрать, чтобы у пользователя не было проблем с их отображением в разных браузерах и разных операционных системах. Статья содержит таблицу так называемых “безопасных шрифтов”, а также примеры отображения этих шрифтов в разных системах.
Далее курсивом примечания переводчика.
Введение
Ниже вы найдете список со стандартным набором шрифтов для всех версий Windows и их аналоги для Mac’ов. Эти шрифты иногда называют “безопасные шрифты браузеров”. Этот список шрифтов я используя при создании веб страниц и я думаю вы тоже найдете его полезным.
Если вы новичок в веб разработке, то возможно вы подумаете: “Зачем я должен ограничивать себя таким маленьким набором шрифтов? Ведь у меня большая коллекция красивых шрифтов на компьютере”. Более опытные дизайнеры знают, что браузер может отображать только те шрифты, которые установлены на компьютере на котором просматривается страница. Это означает, что каждый посетитель вашей страницы обязан иметь на своем компьютере те шрифты, которые вы хотите использовать. Безусловно, у разных людей установлен разный набор шрифтов, и поэтому возникает потребность в стандартном наборе шрифтов. К счастью, CSS позволяет установить несколько значений для свойства font-family, что немного упрощает задание.
Если вы хотите узнать как эти шрифты отображаются в других операционных системах или браузерах, то после таблицы с шрифтами представлены скриншоты этой таблицы под разными ОС и браузерами. Также вы можете взглянуть на список дефолтных шрифтов включенных в состав каждой версии Windows.
Список
- Серым цветом выделено семейство каждого шрифта.
- В некоторых случаях эквивалентом для Mac’ов будет являться тот же шрифт, так как Mac OS X также включает некоторые из шрифтов поставляемых с Windows.
- Сноски снизу содержат специфическую информацию о некоторых шрифтах.
| Arial, Arial, Helvetica, sans-serif |
| Arial Black, Arial Black, Gadget, sans-serif |
| Comic Sans MS, Comic Sans MS5, cursive |
| Courier New, Courier New, Courier6, monospace |
| Georgia1, Georgia, serif |
| Impact, Impact5, Charcoal6, sans-serif |
| Lucida Console, Monaco5, monospace |
| Lucida Sans Unicode, Lucida Grande, sans-serif |
| Palatino Linotype, Book Antiqua3, Palatino6, serif |
| Tahoma, Geneva, sans-serif |
| Times New Roman, Times, serif |
| Trebuchet MS1, Helvetica, sans-serif |
| Verdana, Verdana, Geneva, sans-serif |
| Symbol, Symbol (Symbol2, Symbol2) |
| Webdings, Webdings (Webdings2, Webdings2) |
| Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2) |
| MS Sans Serif4, Geneva, sans-serif |
| MS Serif4, New York6, 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, но только при условии, что font-style будет иметь значение normal, а не bold или italic. У остальных браузеров под Mac OS не было замечено проблемы с отображением шрифтов с нестандартным стилем (за эту подсказку благодарим Christian’а Fecteau).
6 Эти шрифты присутствуют в Mac OS X только если установлен Classic (чесно говоря не имею понятия что такое Classic; возможно имелась ввиду стандартная установка Mac OS X).
Оригинал статьи содержит вторую половину таблицы, в которой отображены шрифты полужирными буквами. Не стал ее перепечатывать из эстетических соображений - вторая колонка просто не влезла бы.
Как выглядят шрифты в разных операционных системах и в разных браузерах
- Mac OS X 10.4.8, Firefox 2.0, ClearType включен (что такое ClearType) (за скриншот спасибо Juris’у Vecvanags’у)
- Mac OS X 10.4.4, Firefox 1.5, ClearType включен (за скриншот спасибо Eric’у Zavesky)
- Mac OS X 10.4.4, Safari 2.0.3, ClearType включен (за скриншот спасибо Eric’у Zavesky)
- Windows Vista, Internet Explorer 7, ClearType включен (за скриншот спасибо Michiel’ю Bijl’у)
- Windows Vista, Firefox 2.0, ClearType включен (за скриншот спасибо Michiel’ю Bijl’у)
- Windows XP, Internet Explorer 6, ClearType включен
- Windows XP, Firefox 1.0.7, ClearType включен
- Windows XP, Internet Explorer 6, базовое сглаживание шрифта включено
- Windows XP, Firefox 1.0.7, базовое сглаживание шрифта включено
- Windows 2000, Internet Explorer 6, базовое сглаживание шрифта включено
- Windows 2000, Firefox 1.0.7, базовое сглаживание шрифта включено
- Linux (Ubuntu 7.04 + Gnome), Firefox 2.0 (за скриншот спасибо Juris’у Vecvanags’у)
Помните, что в то время как сглаживание ClearType всегда включено, базовое сглаживание шрифта в Windows 98/2000/XP работает только при определенных размерах шрифта. Эти размеры могут быть заданы разработчиком шрифта, но чаще всего эти размеры находятся в пределах 0-6 и после 14 pt.