Работаем над приминением шрифта CSS. Задавать стиль шрифта. Как изменить вид для букв нижнего регистра в CSS.

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

1) Первым посмотрим свойство FONT-FAMILY оно определяет семейство шрифта. Когда мы указываем какой будет шрифт нашего текста, то сперва указываем самый популярный, потом менее популярный в конце указываем семейство. Например, в нашем примере строка p {font-family: verdana, geneva, arial, sans-serif;} означает, что мы указали для параграфа шрифт будет verdana, но если по каким ни будь причинам этот шрифт отсутствует в компьютере то будет применён шрифт geneva, а если и этого шрифта не установлено на компьютере то будет использован шрифт arial и если отсутствуют все приведенные шрифты, то браузер применит любой другой, из семейства sans-serif который будет доступен. В первой строке мы шрифт "Times New Roman" поместили в кавычки это, потому что если мы указываем название шрифта и оно состоит из нескольких слов, то его следует помешать в кавычки.

Пример содержание файла style.css для свойства FONT-FAMILY.


h2 {font-family: "Times New Roman", serif;}            
p {font-family: verdana, geneva, arial, sans-serif;}


Вот посмотрите итог применения таблицы CSS к шрифту текста. Вид шрифта в браузере.

Шрифт текста CSS

2) Свойство FONT-STYLE в CSS с ним мы придаём стиль для шрифта текста. Она может применяться в шрифте для текста в трёх различных вариантах таких как normal - нормальный, oblique - наклонный и italic - курсивный. Давайте посмотрим пример, где с помощью CSS мы задаём шрифт и стиль тексту.

Пример содержание файла style.css для свойства FONT-STYLE.


h1 {                                                                     
font-family: verdana, geneva, arial, sans-serif;
font-style:normal;                                        
}                                                                
h2 {                                                                     
font-family: verdana, geneva, arial, sans-serif;
font-style:oblique;                                       
}                                                                
h3 {                                                                     
font-family: verdana, geneva, arial, sans-serif;
font-style:italic;                                           
}                                                                
 

Посмотрите в браузере первый заголовок отобразится в нормальном стиле второй в наклоном а третий курсивом.

Задаем стиль шрифту CSS

3) Свойств FONT-VARIANT в CSS с его помощью мы можем изменить вид для букв нижнего регистра. Рассмотрим вариант применения значения normal - когда буквы пишутся в обычном виде как по умолчанию и значение small-caps - изменяющий буквы нижнего регистра в копии заглавных, но не изменяет размер. Это хорошо видно будет в примере.

Пример содержание файла style.css для свойства FONT-VARIANT.


h3 {                                                                    
font-family: verdana, geneva, arial, sans-serif;
font-variant:normal;                                     
}                                                                
p {                                                                    
font-family: verdana, geneva, arial, sans-serif;
font-variant:small-caps;                                
}                                                                 
 

Как видите заголовок ни чем не изменился можно было и не задавать значение normal всё равно было бы по умолчанию. А вот в параграфе мы видим что все буквы нижнего регистра стали копиями заглавных букв хотя размер остался маленьким. Эти значения не влияют на заглавные буквы в словах.

Изменяем буквы нижнего регистра CSS

На этом мы заканчиваем первую часть урока по работе над шрифтом CSS. Если вы усвоили этот урок, то жду вас на второй части урока, где мы зададим размеры, насыщенность текста и посмотрим более лёгкий вариант записи кода для шрифта в CSS.

Продолжение урока по работе со шрифтом CSS часть 2.
Вернуться к уроку по работе с текстом CSS часть 2.



Рейтинг@Mail.ru   Яндекс.Метрика