Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Шрифт и текст : font-family

Материал из Справочник Web-языков.

Содержание

1 Атрибут font-family | Свойство fontFamily

[править] Атрибут font-family | Свойство fontFamily

Задает шрифт, которым отображается текст в объекте.

[править] Синтаксис

HTML	{ font-family : sFamily }
Скрипты	[ sFamily = ] object.style.fontFamily

[править] Используемые значения

sFamily: Строка, которая устанавливает или принимает одно из следующих значений.

family-name	Любое из возможных значений семейств шрифтов, поддерживаемых браузером.
generic-name	Любое значение из списка семейств шрифтов: serif, sans-serif, cursive, fantasy, monospace.

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Свойство не имеет значения по умолчанию. Атрибут Каскадных таблиц стилей (CSS) наследуется.

[править] Замечания

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

Так как вы не знаете, какие шрифты установлены на компьютере пользователя, вы должны предусмотреть составление альтернативного списка с несколькими общими шрифтами в конце. Этот список может включать и вложенные шрифты. Узнать больше о вложенных (интегрированных) шрифтах мы можете, посмотрев правило @font-face.

[править] Примеры

В первом примере показывается как использовать вызов вложенных таблиц стилей для установки атрибута font-family.

<HTML>
<HEAD>
<STYLE>
	P {font-family:"ARIAL"}
	.other {font-family:"COURIER"}
</STYLE>
</HEAD>
<BODY>
<P tabindex="1" onkeydown="this.className='other'" 
onmousedown="this.className='other'" onmouseup="this.className=''" 
onkeyup="this.className=''">Tab to select this paragraph and press down a 
key or just click on it with the mouse to change the font-family style 
attribute to COURIER.</P>
</BODY>
</HTML>

Во втором примере примере продемонстрировано как изменить значение свойства fontFamily, используя скрипт.

<HTML>
<BODY>
<DIV tabindex ="1" onkeydown="this.style.fontFamily='Courier'"
onkeyup="this.style.fontFamily=''" onmousedown="this.style.fontFamily='Courier'"
onmouseup="this.style.fontFamily=''">Tab to select this DIV element and press 
down a key or just click on it with the mouse to change the fontFamily style 
property to COURIER. 
</DIV>
</BODY>
</HTML>

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

<STYLE type="text/css">
   @font-face {
      font-family: "My_font";
      src: url(http://www.adatum.com/some_font_file.eot);
   }
   BODY {font-family: "My_font", Arial}
</STYLE>