Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника
font-family

Свойство позволяет определить семейство шрифтов, в котором будет отображаться текстовое содержимое элемента. При этом под семейством шрифтов следует понимать группу однородных шрифтов, обладающих схожими чертами. К названиям семейств шрифтов, к примеру, относят - "Helvetica", "New Century Schoolbook", и "Kyokasho ICA L". Названия семейств шрифтов не ограничены латинскими знаками. Семейство шрифтов может быть сгруппировано в различные родовые группы: те шрифты которые используют засечки и шрифты без засечек, шрифты которые имеют сходство с почерком, шрифты называемые fantasy, и т. д.

Значения свойства позволяют определять названия семейства шрифтов и родовую группу, к которой относится данное семейство шрифтов, например sans-serif.

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

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

  1.BODY {font-family: Baskerville, "Heisi Mincho W3", Symbol, serif}

В приведенном выше примере латинские символы будут взяты из семейства шрифтов «Baskerville», японские символы шрифта будут взяты из «Heisi Mincho W3» и математические символы из «Symbol», все остальные будут определяться обобщенным семейством – serif. При этом обобщенное семейство шрифтов – serif будет применяться только в том случае, если символы не были найдены в предыдущих семейства шрифтов (Baskerville, Heisi Mincho W3, Symbol).

Значение свойства font-family должно быть записано следующим образом:

  1. BODY {font-family: Baskerville, "Heisi Mincho W3", Symbol, serif}

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

  1.BODY {font-family: Baskerville, Heisi Mincho W3, Symbol, serif}

К обобщенным семействам шрифтов (родовым группам шрифтов) в CSS2 относят: serif, sans-serif, cursive, fantasy и monospace.

serif

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

Латиница Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
Греческие шрифты Bitstream Cyberbit
Кириллица Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst
Иврит New Peninim, Raanana, Bitstream Cyberbit
Японские шрифты Ryumin Light-KL, Kyokasho ICA, Futo Min A101
Арабские шрифты Bitstream Cyberbit
Шрифты чероки Lo Cicero Cherokee

sans-serif

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

Латиница MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
Греческие шрифты Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
Кириллица Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
Иврит Arial Hebrew, MS Tahoma
Японские шрифты Shin Go, Heisei Kaku Gothic W5
Арабские шрифты MS Tahoma

cursive

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

Латиница Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
Кириллица ER Architekt
Иврит Corsiva
Арабские шрифты DecoType Naskh, Monotype Urdu 507

fantasy

Семейство декоративных типов шрифтов, к которым относятся:

Латиница Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz

monospace

Отличительной особенностью данных шрифтов являться одинаковая ширина всех символов. Так же эти шрифты сравнивают со шрифтом, печатаемым на пишущей печатной машинке. К ним принято относить следующие виды семейств шрифтов:

Латиница Courier, MS Courier New, Prestige, Everson Mono
Греческие шрифты MS Courier New, Everson Mono
Кириллица ER Kurier, Everson Mono
Японские шрифты Osaka Monospaced
Шрифты чероки Everson Mono

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

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Обобщенные шрифты</TITLE>
  5. <STYLE type="text/css">
  6. BODY { font-family: "new century schoolbook", serif }
  7. </STYLE>
  8. </HEAD>
  9. <BODY>
10. <H1 style="font-family: 'My own font', fantasy">Test</H1>
11. <P> Того, кто учится, сопровождают богатство и почет. Древнеримская поговорка.
12.
13. </BODY>
14.</HTML>
  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Свойство font-weight</TITLE>
  5.<STYLE type="text/css">
  6.P { font-weight: 100 } /* 400 */
  7.em { font-weight: bolder } /* bold */
  8.</STYLE>
  9.</HEAD>
10.<BODY>
11.<p>
12.В <em>CSS2</em> значение счетчиков может быть
13.установлено через свойство <em>"content"</em>.
14.Допустимо использовать none в качестве значения
15.свойства <em>"content"</em>, в этом случае счетчик
16.не будет учитываться в последующей нумерации.
17.</p>
18. </BODY>
19.</HTML>
20.
Свойство font-weight
Свойство font-weight


Доступ и установка с jQuery

  • Получить свойство fontFamily: val = $("div").css("fontFamily");
  • Установить свойство fontFamily: $("div").css({"fontFamily":"..."});
  • Установить свойство fontFamily: $("div").css("fontFamily","...");
  • Как использовать популярный jQuery для свойств CSS, - читайте статью "jQuery для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org