Свойство CSS font

Свойство CSS font отвечает за внешний вид текста (форматирование): размер шрифта, стиль шрифта, расстояние между строками, толщина линий.

Синтаксис CSS font

font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit;

Где:

  • font-style – стиль шрифта:

    • normal – обычное начертание (по умолчанию)
    • italic – курсивный текст
    • oblique – наклонное текст (немного меньше, чем курсив)
    • inherit – применяется значение родительского элемента

  • font-variant – тип шрифта:

    • normal – обычное начертание (по умолчанию)
    • small-caps – весь текст выводится в виде маленьких прописных букв
    • inherit – применяется значение родительского элемента

  • font-weight – ширина шрифта (жирность). Можно задавать в цифрах (100, 200,.., 900) или в установленных константах:

    • normal – обычный размер шрифта (400)
    • bold – жирный размер (700)
    • bolder – увеличивает степень жирности
    • lighter – уменьшает степень жирности

    Более подробно читайте в статье: свойство font-weight. Также ознакомьтесь: какой выбрать шрифт для сайта »

  • font-family – семейство шрифта. Другими словами это название шрифта. Их очень много, перечислим лишь часто встречающиеся:

    • Ariel
    • Verdana
    • Times New Roman
    • Calibri
    • Georgia
    • Impact

  • font-size / line-height – размер шрифта и через слэш задается еще отступ между строками. Чаще всего записывается в абсолютных значениях (в px или pt).



Помимо этих значений font может принимать значения “константы”:

  • caption – шрифт для текста элементов форм (тег <form>)
  • icon – шрифт из ярлыков иконок
  • menu – шрифт из меню
  • message-box – шрифт из диалоговых окон
  • small-caption – уменьшенный заголовочный шрифт
  • status-bar – шрифт из строки состояния

Примечание

Свойства font-style, font-variant, font-weight, font-size, line-height, font-family можно использовать отдельно (независимо) друг от друга.

Как изменить стиль и оформление текста в html

Пример 1. Шрифт 15px, Ariel, Italic

<html>
<head>
<style>
.primer1{
font: italic 15px/30px Arial;
}
</style>
</head>
<body>
<div class="primer1">Пример №1. Текст со свойством italic 15px/30px Arial. Расстояние между строками 30 пикселей</div>
</body>
</html>

На странице преобразуется в следующее

Пример №1. Текст со свойством italic 15px/30px Arial

Расстояние между строками 30 пикселей






Пример 2. Шрифт 16px, Calibri, жирный (bold)

<html>
<head>
<style>
.primer2{
font-size: 16px;
font-family: Calibri;
font-weight: bold;
font-style: oblique;
}
</style>
</head>
<body>
<div class="primer2">Пример №2. Текст со свойством font-size: 16px;font-family: Calibri;font-weight: bold;font-style: oblique;
</div>
</body>
</html>

На странице преобразуется в следующее

Пример №2. Текст со свойством font-size: 16px;

font-family: Calibri;

font-weight: bold;

font-style: oblique;

Пример 3. Font: caption

Пример: готовый шрифт для текста элементов форм “font: caption”

<html>
<head>
<style>
.primer3{
font: caption;
}
</style>
</head>
<body>
<div class="primer3">Пример №3. Текст со свойством font: caption;</div>
</body>
</html>

На странице преобразуется в следующее

Пример №3. Текст со свойством font: caption;

Для обращения к font из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.font="VALUE"




Читайте также:

• Свойство transform

• HTML тег <font>

• Правило @font-face

• Свойство transform-origin

• Как сделать рамку элементов border

• Курсивный текст в html

• Как сделать фон на сайте html

• Как сделать анимацию в html

• Медиа запросы (@)

• position absolute


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.