Материал из Справочник 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(https://www.adatum.com/some_font_file.eot);
   }
   BODY {font-family: "My_font", Arial}
</STYLE>