Стандартные шрифты для сайтов
Стандартные шрифты для сайтов
11 января 2013

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

Каждый сталкивается с таким вопросом, какие же шрифты можно использовать, чтобы страничка выглядела так, как было задумано, на всех компьютерах и у каждого посетителя сайта? Опытные дизайнеры и веб-мастера знают, что нужно использовать те шрифты, которые установлены на компьютере у посетителей сайта. Конечно, каждый владелец компьютера может иметь набор разных шрифтов. Ниже приведен список стандартных шрифтов для операционной системы Microsoft Windows и MacOS X Apple. (источник http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html) Таблица шрифтов для Windows и Mac, для безопасного использования во всех браузерах.

Значение @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 MS5 cursive
"Courier New", Courier, monospace Courier New 6 monospace
Georgia, serif Georgia1 Georgia serif
Impact,Charcoal, sans-serif Impact Impact5, Charcoal6 sans-serif
"Lucida Console", Monaco, monospace Lucida Console Monaco5 monospace
"Lucida Sans Unicode", "Lucida Grande", sans-serif Lucida Sans Unicode Lucida Grande sans-serif
"Palatino Linotype", "Book Antiqua", Palatino, serif Palatino Linotype, Book Antiqua3 Palatino6 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 MS1 Helvetica sans-serif
Verdana, Geneva, sans-serif Verdana Verdana, Geneva sans-serif
Symbol Symbol2 Symbol2 -
Webdings Webdings2 Webdings2 -
Wingdings, "Zapf Dingbats" Wingdings2 Zapf Dingbats2 -
"MS Sans Serif", Geneva, sans-serif MS Sans Serif4 Geneva sans-serif
"MS Serif", "New York", serif MS Serif4 New York6 serif

1 Шрифты Georgia и Trebuchet MS поставляются вместе с Windows 2000/XP и включены в пакет шрифтов IE, поэтому они установлены на многих компьютерах с ОС 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-инсталляции

Вот как выглядят шрифты в различных браузерах

Windows Vista, Internet Explorer 7, ClearType включен (для оптимального просмотра сохраните файл себе на компьютер)

Windows Vista, Firefox 2.0, ClearType включен (для оптимального просмотра сохраните файл себе на компьютер)


Mac OS X 10.4.8, Firefox 2.0, ClearType включен (для оптимального просмотра сохраните файл себе на компьютер)

А вот как выглядят шрифты в старом добром Windows 2000, IE 6.0:


Источник: sergeykalugin.com/2011/11/13/standartny-e-shrifty-dlya-sajtov/

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов


Читайте также
Настройки, направляющие, модульная сетка - Секреты веб-дизайна 1-2Уровень сложности:
1. Начинающий
2. Любитель
Настройки, направляющие, модульная сетка - Секреты веб-дизайна

Вступительный урок по веб-дизайну в котором автор рассказывает про настройки, направляющие и модульную сетку.

28.02 0
Почему я бросил работу своей мечты в веб-дизайне?
Почему я бросил работу своей мечты в веб-дизайне?

Что толкает людей на то, чтобы бросить работу в компании, на которую ушло так много времени и усилий?

26.02 0
Тренды веб-дизайна 2017 года
Тренды веб-дизайна 2017 года

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

26.02 0
Специфика работы full-stack designer
Специфика работы full-stack designer

Кто такой full-stack дизайнер и в чём заключается специфика его работы? За что full-stack дизайнер несёт ответственность в проекте.

26.02 0
Комментарии

×
Подписка на новости Skillsup

Заполните поля, чтобы получать новости о дизайне от Skillsup,
обещаем не тревожить чаще 2-х раз в неделю.
Если передумаете — во всех письмах будет ссылка на отписку.