чилка HTML
 
Каскадные таблицы стилей (CSS)

Стилевые параметры для шрифта

Параметры стиля шрифтаЗначениеОписание
font-family
(определяет список семейств шрифтов)


название шрифтаОбычно задаются несколько похожих шрифтов в порядке предпочтения.
Названия разделяются запятыми.
Если название шрифта состоит из нескольких слов, то оно заключается в кавычки.
Список шрифтов желательно завершить
родовым именем шрифта:
serif (для Times),
sans-serif (для Helvetica),
cursive,
fantasy,
monospace (для Courier)
 Пример:
<style>
h1 {font-family: "Times New Roman", serif}
</style>

<body style='font-family: Arial, Helvetica, sans-serif'>
font-size
(размер шрифта)
относительный размер:
larger (больше);
smaller (меньше)
Значения интерпретируются относительно таблицы размеров шрифтов браузера и размера шрифта элемента-родителя.
В CSS1 масштабирующий множитель =1.5, в CSS2 - 1.2.
Размер можно задавать в % и в em.
абсолютный размер:
xx-small,
x-small,
medium (по умолчанию),
large,
x-large,
xx-large,
Пример:
<style>
body {font-size: 12pt}
h1 {font-size: large}
h2 {font-size: 150%}
h3 {font-size: 12pt}
h4 {font-size: 75%}
</style>

<body>
<h1>Заголовок 1 <h1>
<h2>Заголовок 2 <h2>
<h3>Заголовок 3 <h3>
<h4>Заголовок 4 <h4>
</body>
Заголовок 1 и 3 заданы в абсолютных единицах,
а Заголовок 2 и 4 в % относительно размера шрифта, заданного для тега <body>, являющегося родительским (100%) элементом для заголовков.


Единицы измерения шрифта:
  • em - высота шрифта элемента
    {font-size: 2.5em},
  • ex - высота символа "х"
    {font-size: 2.3ex},
  • pt - пункты
    {font-size: 16pt},
  • px - пикселы
    {font-size: 12px},
  • % - проценты
    {font-size: 80%}.
font-weight
(жирность шрифта)
normalсоответствует числу 400
boldЖирный (700)
bolderЖирнее
lighterСветлее
числоОдно из девяти целых чисел от 100 до 900
font-style
(стиль шрифта)
normalНормальный прямой - по умолчанию
italicКурсив
obliqueНаклонный
font-variant
(вариант стиля шрифта)
normalпо умолчанию и не влияет на отображение шрифта.
small-capsЗаменяет строчные буквы прописными, но делает их меньше по размеру, чем прописные буквы текущего шрифта.
Пример:
<style>
span {font-variant: small-caps}
</style>
Купи Слона! (до изменения стиля)
Купи Слона! (после изменения стиля)
font
(позволяет установить сразу несколько свойств шрифта в одном определении)
font-style;
font-variant;
font-weight;
font-size;
line-height;
font-family
Значения параметров указываются через пробел.
Если задается высота строки (line-height), то ее значение отделяется от размера шрифта (font-size) слэшем (/).
Если список шрифтов (font-family) содержит более одного элемента, то последние отделяются друг от друга запятыми.
 Пример:
<style>
body {font: italic 10pt/12pt "Times", serif}
</style>
@font-fase
(указывает семейство шрифтов
и URL-адрес шрифта,
если он отсутствует на компьютере)
font-familyНазвание семейства шрифтов.
srcURL-адрес шрифта. Синтаксис: src:url (URL-адрес)
Открывающаяся круглая скобка идет сразу за словом url
 Пример:
<style>
@font-fase {font-family: MyFont;
src:url(http://myserver.ru/MyFont.eot)}
</style>

 

Пример:

Размер шрифта

  • <style="font-size: xx-small"> - очень очень маленький

  • <style="font-size: x-small"> - очень маленький

  • <style="font-size: small"> - маленький

  • <style="font-size: medium"> - средний

  • <style="font-size: large"> - большой

  • <style="font-size: x-large"> - очень большой

  • <style="font-size: xx-large"> - очень очень большой

 

Пример:

Размер шрифта в em

Чтобы избежать проблем с масштабированием в Internet Explorer, можно использовать em вместо пикселей.

1em равен размеру шрифта по умолчанию.
Размер шрифта по умолчанию равен 16 пикселям.
Таким образом, 1em равен 16 пикселям.

Размер шрифта в em можно перевести из пикселей по формуле: пиксели/16=em

  • h1 {font-size:2.5em;} /* 40px/16=2.5em */
    - Пример1 - размер 2.5em

  • h2 {font-size:1.875em;} /* 30px/16=1.875em */
    - Пример2 - размер 1.875em

  • span {font-size:0.875em;} /* 14px/16=0.875em */
    - Пример3 - размер 0.875em

 

Пример:

Семейство шрифта

  • <style="font-family: 'Times New Roman', Verdana, sans-serif;">

    Купи слона

  • <style="font-family: 'Monotype Corsiva', sans-serif;">

    Купи слона

  • <style="font-family: 'Comic Sans MS', sans-serif;">

    Купи слона

 

 

 

 

Copyright © Москва
Училка HTML: сайт  u4ilka.kcbux.ru