Шрифты в CSS, их семейства и какие лучше использовать


Здравствуйте, уважаемые читатели сайта Uspei.com. Давайте по-быстрому научимся изменять шрифты в html коде наших элементов и разберем некоторые моменты. Сейчас мы видим, что весь текст нашей html страницы выполнен стандартным шрифтом "Times New Roman".

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

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

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

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

p {
 font-family:
 }

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

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

p {
 font-family: Arial, Tahoma, Geneva, sans-serif;
 }
К оглавлению ↑
Читайте также:  Фоновый цвет и фоновое изображение в CSS

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

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

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

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

Здесь же давайте рассмотрим возможность добавления курсива и жирного текста (как это сделать в html я говорил тут). За курсив отвечает свойство "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;
 }

До встречи! Успевайте всё и всегда на страницах блога Uspei.com

Плюсануть
Поделиться
Класснуть
Линкануть
Запинить

Буду благодарен, если поделитесь новостью в соцсетях

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

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

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