font-family

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	Шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman.
Наследуется	Да
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family

Версии CSS

Описание

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

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif , sans-serif , cursive , fantasy или monospace . Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

Синтаксис

font-family: имя шрифта [, имя шрифта[, . ]] | inherit

Значения

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

• serif — шрифты с засечками (антиквенные), типа Times;
• sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
• cursive — курсивные шрифты;
• fantasy — декоративные шрифты;
• monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).

inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-family

Объектная модель

[window.]document.getElementById(» elementID «).style.fontFamily

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

font-family

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	Шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman.
Наследуется	Да
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family

Версии CSS

Описание

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

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif , sans-serif , cursive , fantasy или monospace . Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

Синтаксис

font-family: имя шрифта [, имя шрифта[, . ]] | inherit

Значения

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

• serif — шрифты с засечками (антиквенные), типа Times;
• sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
• cursive — курсивные шрифты;
• fantasy — декоративные шрифты;
• monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).

inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-family

Объектная модель

[window.]document.getElementById(» elementID «).style.fontFamily

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

font-family

Поддержка браузерами

Описание

CSS свойство font-family позволяет указать шрифт текста, который будет использован внутри элемента. Существует два способа указать шрифт для использования:

• family-name (имя шрифта) — название определённого шрифта из какого-нибудь семейства шрифтов, например: times , courier , arial , и т.д. Если название шрифта содержит пробелы, оно должно быть заключено в одиночные или двойные кавычки, например: «Times New Roman» .
• generic-family (семейство шрифтов) — набор шрифтов, обладающих общими характеристиками. Следующие семейства шрифтов по умолчанию доступны в любой операционной системе: serif , sans-serif , cursive , fantasy , monospace .

Описание стандартных семейств шрифтов:

• serif — шрифты с засечками
• sans-serif — шрифты без засечек
• cursive — представляют собой шрифты с большим количеством плавных красивых элементов оформления и всевозможных завитушек — это попытка повторить на компьютере рукописный текст
• fantasy — художественные и декоративные шрифты
• monospace — моноширинные шрифты, все символы которых имеют одинаковую фиксированную ширину

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

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

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

Чаще всего при указании свойства font-family , используют «безопасные» (стандартные) Web-шрифты.

Чтобы на сайте отображался выбранный вами нестандартный шрифт для текста, который с высокой вероятностью будет отсутствовать у большинства пользователей, нужно совместно со свойством font-family использовать правило @font-face.

Common fonts to all versions of Windows & Mac equivalents

Introduction

Here you can find the list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as «browser safe fonts». This is the reference I use when making web pages and I expect you will find it useful too.

If you are new to web design, maybe you are thinking: «Why I have to limit to that small set of fonts? I have a large collection of nice fonts in my computer». Well, as seasoned web designers already know, browsers can use only the fonts installed in each computer, so it means that every visitor of your web page needs to have all the fonts you want to use installed in his/her computer. Of course, different people will have different fonts installed, and thus come the need of a standard set of fonts. Fortunately, CSS allows set several values for the font-family property, which eases the task a bit.

If you want to know how the fonts are displayed in other OS’s or browsers than yours, after the table you can find several screen shots of this page in different systems and browsers. Also, you can take a look to the list of the default fonts included with each version of Windows.

The list

First, a few introductory notes:

• The names in grey are the generic family of each font.
• In some cases the Mac equivalent is the same font, since Mac OS X also includes some of the fonts shipped with Windows.
• The notes at the bottom contains specific information about some of the fonts.

Windows fonts / Mac fonts / Font family

Normal style	Bold style
Arial, Arial, Helvetica , sans-serif	Arial, Arial, Helvetica , sans-serif
Arial Black, Arial Black, Gadget , sans-serif	Arial Black, Arial Black, Gadget , sans-serif
Comic Sans MS, Comic Sans MS 5 , cursive	Comic Sans MS, Comic Sans MS 5 , cursive
Courier New, Courier New , monospace	Courier New, Courier New , monospace
Georgia 1 , Georgia , serif	Georgia 1 , Georgia , serif
Impact, Impact 5 , Charcoal 6 , sans-serif	Impact, Impact 5 , Charcoal 6 , sans-serif
Lucida Console, Monaco 5 , monospace	Lucida Console, Monaco 5 , monospace
Lucida Sans Unicode, Lucida Grande , sans-serif	Lucida Sans Unicode, Lucida Grande , sans-serif
Palatino Linotype, Book Antiqua 3 , Palatino , serif	Palatino Linotype, Book Antiqua 3 , Palatino , serif
Tahoma, Geneva , sans-serif	Tahoma, Geneva , sans-serif
Times New Roman, Times New Roman, Times , serif	Times New Roman, Times New Roman, Times , serif
Trebuchet MS 1 , Trebuchet MS , sans-serif	Trebuchet MS 1 , Trebuchet MS , sans-serif
Verdana, Verdana, Geneva , sans-serif	Verdana, Verdana, Geneva , sans-serif
Symbol, Symbol (Symbol 2 , Symbol 2 )	Symbol, Symbol (Symbol 2 , Symbol 2 )
Webdings, Webdings (Webdings 2 , Webdings 2 )	Webdings, Webdings (Webdings 2 , Webdings 2 )
Wingdings, Zapf Dingbats (Wingdings 2 , Zapf Dingbats 2 )	Wingdings, Zapf Dingbats (Wingdings 2 , Zapf Dingbats 2 )
MS Sans Serif 4 , Geneva , sans-serif	MS Sans Serif 4 , Geneva , sans-serif
MS Serif 4 , New York 6 , serif	MS Serif 4 , New York 6 , serif

1 Georgia and Trebuchet MS are bundled with Windows 2000/XP and they are also included in the IE font pack (and bundled with other MS applications), so they are quite common in Windows 98 systems.

2 Symbolic fonts are only displayed in Internet Explorer, in other browsers a font substitute is used instead (although the Symbol font does work in Opera and the Webdings works in Safari).

3 Book Antiqua is almost exactly the same font that Palatino Linotype, Palatino Linotype is included in Windows 2000/XP while Book Antiqua was bundled with Windows 98.

4 These fonts are not TrueType fonts but bitmap fonts, so they won’t look well when using some font sizes (they are designed for 8, 10, 12, 14, 18 and 24 point sizes at 96 DPI).

5 These fonts work in Safari but only when using the normal font style, and not with bold or italic styles. Comic Sans MS works in bold but not in italic. Other Mac browsers seems to emulate properly the styles not provided by the font (thanks to Christian Fecteau for the tip).

6 These fonts are present in Mac OS X only if Classic is installed (thanks to Julian Gonggrijp for the corrections).

How the fonts look in different systems and browsers

• Mac OS X 10.4.8, Firefox 2.0, font smoothing enabled (thanks to Juris Vecvanags for the screen shot)
• Mac OS X 10.4.4, Firefox 1.5, font smoothing enabled (thanks to Eric Zavesky for the screen shot)
• Mac OS X 10.4.11, Safari 3.0.4, font smoothing enabled (thanks to Nolan Gladius for the screen shot)
• Mac OS X 10.4.4, Safari 2.0.3, font smoothing enabled (thanks to Eric Zavesky for the screen shot)
• Windows Vista, Internet Explorer 7, ClearType enabled (thanks to Michiel Bijl for the screen shot)
• Windows Vista, Firefox 2.0, ClearType enabled (thanks to Michiel Bijl for the screen shot)
• Windows XP, Internet Explorer 6, ClearType enabled
• Windows XP, Firefox 1.0.7, ClearType enabled
• Windows XP, Internet Explorer 6, Basic font smoothing enabled
• Windows XP, Firefox 1.0.7, Basic font smoothing enabled
• Windows 2000, Internet Explorer 6, Basic font smoothing enabled
• Windows 2000, Firefox 1.0.7, Basic font smoothing enabled
• Linux (Ubuntu 7.04 + Gnome), Firefox 2.0 (thanks to Juris Vecvanags for the screen shot)

Note that while the ClearType smoothing is applied always, the basic font smoothing of Windows 98/2000/XP is applied only to certain font sizes. That sizes can be specified by the font designer, but usually they are in the ranges of 0-6 and 14+ points (pt).

The Mac font list was obtained from the Browser Safe Fonts PDF of webbedEnvironments and from the List of fonts in Mac OS X of the Wikipedia.