Урок №6: шрифт текста в CSS
На этом уроке мы рассмотрим управление шрифтами, стилями и другими возможностями редактирования текста с помощью таблиц стилей.
Названия шрифтов
Свойство font–family – задает список имен шрифтов для любого текстового элемента. Использован будет первый указанный шрифт, который распознает браузер. Рекомендуется задавать минимум два вида шрифта, на случай если браузер не отобразит первой, он перейдет к запасному,(следующему по-списку), шрифту. Например:
h1 {font–family : "Arial", "Times New Roman", "Geneva";}
В данном случае главный заголовок будет написан шрифтом - Arial, остальные шрифты выходят в качестве запасных, в случае если arial, не будет распознан браузером. Видно, что название шрифтов необходим брать в кавычки, также следующий шрифт необходимо указывать после запятой.
Стиль шрифта
Стиль шрифта в CSS задается с помощью свойства font–style, которое имеет следующие параметры:
- {font–style:normal;} - нормальный шрифт, значение по умолчанию
- {font–style: italic;} - курсив
- {font–style: oblique;} - наклонный шрифт(вид как у курсива)
Если рассматривать жирный шрифт и толщину символов, то для этого используют свойство font – weight, которое также имеет свои параметры:
- {font – weight : normal;} - нормальный шрифт, значение по умолчанию
- {font–weight: bold;} - жирный шрифт, аналог тега strong
- {font–weight: bolder;} - более жирный шрифт
- {font–weight: lighter;} - более тонкий шрифт
- {font–weight: 800;} - ширина шрифта задана в ручную
Размер шрифта
Размер шрифта в CSS задается с помощью свойства font-size. Значение этого свойства может быть числовое (%, px, em) или заданное с помощью следующих параметров:
- {font-size: xx–small;} – наименьший размер шрифта
- {font-size: x–small;} – очень маленький размер шрифта
- {font-size: small;} – маленький размер шрифта
- {font-size: medium;} – средний размер шрифта(по умолчанию)
- {font-size: large;} – большой размер шрифта
- {font-size: x-large;} – очень большой размер шрифта
- {font-size: xx-large;} – наибольший размер шрифта
- {font-size: smaller;} – меньше, чем у порождающего текста
- {font-size: larger;} – больше, чем у порождающего текста
- {font-size: large;} – задает фиксированное значение шрифта
- {font–size–adjust} - задает значение аспекта шрифта
Шрифт капитель
Для включения этого, достаточно интересного шрифта, в CSS служит свойство font – variant. Капитель - вариант заглавных букв уменьшенного роста и чуть расширенных пропорций, несколько выше роста строчных, которые и будут использованы в тексте. Свойство имеет всего два значения:
- {font – variant : normal;} - нормальный шрифт(значение по умолчанию)
- {font – variant : small – caps;} - шрифт-капитель
Последовательность Font
При работе со шрифтами в CSS важно придерживаться правила последовательности свойств. Если пропустить свойство, то для него включиться значение по умолчанию. Однако не стоит мешать свойства между собой, иначе их работоспособность пропадет. Пример рабочей версии:
{font:
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 12pt;
line-height: normal;
font-family: Verdana }
|
На следующем уроке рассмотрим относительные и абсолютные единицы измерения: Единицы измерения в CSS
|
R598551293139
