CSS. Шрифты (Урок 2)

Оглавление:

Давайте сегодня научимся изменять шрифты в html коде наших элементов и разберем некоторые моменты. Сейчас мы видим, что весь текст нашей html страницы выполнен стандартным шрифтом «Times New Roman».

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

css шрифты

 

К оглавлению ↑

Семейство шрифтов «font-family»

Наша задача изменить этот шрифт на тот, что нам больше нравится или подходит по дизайну. Для этого мы переходим в таблицу стилей и для абзацев (p) прописываем новое для нас свойство «font-family», что означает «семейство шрифтов».

p {
font-family:
}

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

Перейдите по этой ссылке и вы увидите список шрифтов, которые гарантированно есть в системе любого пользователя по умолчанию. Кроме того, список шрифтов есть у вас в программе «Word», если конечно вы не закачивали их туда дополнительно. При этом, мы можем указать как один шрифт, так и несколько. Причем, браузер если не найдет первый указанный шрифт он станет искать второй и так далее. Также можно указать сразу семейство шрифтов, например, san-serif или cursive. К какому семейству относится тот или иной шрифт можно посмотреть там же.  В итоге получается:

p {
font-family: Arial, Tahoma, Geneva, sans-serif;
}
К оглавлению ↑

Размеры шрифтов «font-size»

css шрифты размеры

Теперь перейдем к размерам шрифта. Делается это с помощью свойства «font-size»  и указывается размер шрифта, например 14px (пикселей). Аналогично как со шрифтами если не указать размер, то браузер по умолчанию будет использовать 16px. Размер можно задавать не только в пикселях, но и в других мерах измерения. И также приведу сразу  БАЗОВЫЕ размеры.

Соответственно если вы хотите изменить размер шрифта от базового, то должны указать либо 120%, либо  2em, либо 14px, либо любое другое значение измерения, но ТОЛЬКО одно. Ну думаю тут все понятно. Я всегда использую либо % либо px. В итоге получается:

p {
font-family: Arial, Tahoma, Geneva, sans-serif;
font-size: 14px;
}

Здесь же давайте рассмотрим возможность добавления курсива и жирного текста.  За курсив отвечает свойство  «font-style» (стиль шрифта), со значением «italic» (курсив). Свойство жирного шрифта —  «font-weight» (насыщенность шрифта) со значением  «bold» (жирный).

p {
font-family: Arial, Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
}

Css предоставляет еще одну интересную возможность, такое как объединение свойств, что упрощает оформление. Так как все свойства у нас относятся к шрифтам, то можно указать одно ОБЩЕЕ свойство «font» и перечислить друг за другом все его значения.  Это будет тоже самое но намного короче и красивее)))).

p {
font: Arial, sans-serif  14px  italic  bold;
}

На этом урок закончим, увидимся в следующем, где мы начнем работу с текстом.

Удачи вам! До скорых встреч на страницах блога VyacheslavDanilov.ru


Вам также понравится...

Смотри и удивляйся:
Десерт

*посмотреть еще ролик можно обновив страницу в браузере

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *