«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


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



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

Свойство font-family предназначено для указания семейства шрифта, которое будет использоваться при оформлении текста в элементе.

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

Можно указать названия нескольких шрифтов через запятую. В этом случае для оформления текста элемента браузер воспользуется первым шрифтом из перечня, если он установлен на компьютере пользователя. Если такового нет, браузер воспользуется вторым шрифтом. И он отсутствует - тогда третьим и т.д.

Если указать семейство шрифтов, то браузер воспользуется одним из шрифтов из этого семейства.

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

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

Свойство применимо ко всем элементам.

Фрагмент кода

<head>
<title>
Семейство шрифта </title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
<p> Для оформления текста в параграфах данного документа я указал два шрифта из семейства monospace и название самого семейства. </p>
<p>
Браузер воспользуется одним из указанных шрифтов, либо другим шрифтом из семейства monospace. </p> </body>

Фрагмент кода из файла со стилями

p {font-family:'Courier New', Courier, monospace;}

Результат

Для оформления текста в параграфах данного документа я указал два шрифта из семейства monospace и название самого семейства.

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

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

Размер шрифта элемента можно установить при помощи свойства font-size.

В CSS есть такое понятие как абсолютный размер шрифта, который задается с помощью ключевых слов xx-small, x-small, small, medium, large, x-large и xx-large; и понятие относительный размер шрифта - задается с помощью слов larger и smaller, которые устанавливают размера шрифта соответственно больше и меньше на одно значение относительно его текущего размера.

Также размер шрифта можно задать в % и в любых допустимых единицах CSS (подробнее здесь...).

Свойство применимо ко всем элементам.

Фрагмент кода

<p style="font-size:15px;"> Установлен размер шрифта для данного абзаца - 15 пикселей. <span style="font-size:larger;"> Теперь размер шрифта больше относительно установленного. </span></p>

Результат

Установлен размер шрифта для данного абзаца - 15 пикселей. Теперь размер шрифта больше относительно установленного.

Начертание шрифта

Свойство font-style устанавливает стиль написания шрифта.

По умолчанию, а также если свойству font-style присвоено значение normal, браузер отображает шрифт без наклона.

Но кроме стандартного стиля существует курсивный и наклонный шрифт - значения italic и oblique соответственно. Курсивный шрифт имитирует рукописный, а наклонный образуется наклоном стандартных букв на определенный угол.

Свойство применимо ко всем элементам.

Фрагмент кода

<p> Стандартный шрифт. </p>
<p style="font-style
:oblique;"> Наклонный шрифт. </p>

Результат

Стандартный шрифт.

Наклонный шрифт.

Насыщенность шрифта

Свойство font-weight позволяет задать насыщенность (толщину) шрифта.

Насыщенность шрифта задается в условных единицах от 100 до 900 с шагом 100 или с помощью ключевых слов: lighter - светлый шрифт, normal - нормальный шрифт, bold - полужирный шрифт и bolder - жирный шрифт.

По умолчанию шрифт соответствует значению normal или 400 условным единицам.

Свойство применимо ко всем элементам.

Фрагмент кода

<p> Нормальный шрифт. </p>
<p style="font-weight
:700;"> Жирный шрифт. </p>

Результат

Нормальный шрифт.

Жирный шрифт.

Строчные и заглавные буквы. Капитель

Свойство font-variant устанавливает характер написания строчных букв.

Значение small-caps этого свойства позволяет отобразить текст Капителью - это когда строчные буквы представлены малыми заглавными. По умолчанию свойство имеет значение normal, что соответствует стандартному написанию строчных букв.

Свойство применимо ко всем элементам.

Фрагмент кода

<p> Строчные буквы в привычном для всех виде. </p>
<p style="font-variant
:small-caps;"> Строчные буквы преобразованы в малые заглавные. </p>

Результат

Строчные буквы в привычном для всех виде.

Строчные буквы преобразованы в малые заглавные.

Универсальное свойство

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

Значения свойств указывают через пробел, в любом порядке. А браузер автоматически определяет принадлежность значения свойству.

Не обязательно указывать значения всех свойств. Не используемым свойствам присваиваются значения по умолчанию.

Свойство применимо ко всем элементам.

Фрагмент кода

<p style="font: italic 18px Georgia, 'Times New Roman', Times, serif;"> В данном абзаце текст оформлен курсивом. Установлен шрифт Georgia размером 18 пикселей. </p>

Результат

В данном абзаце текст оформлен курсивом. Установлен шрифт Georgia размером 18 пикселей.

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

CSS по шагам
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Все cвойства CSS
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта