В прошлых уроках мы рассмотрели все виды селекторов, научились, несколькими способами, отбирать элементы со страницы и теперь мы будем учится создавать правила для выбранного элемента. Одно такое правило, мы уже хорошо знаем - это установка цвета для выбранного элемента color:#ff0000;. В этом уроке мы научимся изменять шрифт.
Если не указывать вид шрифта то браузер, по умолчанию, будет отображать весь текст стандартным шрифтом который называется Times New Roman. Этот шрифт есть в операционной системе Windows, есть в операционной системе Mac OS. Поэтому, если на странице не указан шрифт, то весь текст будет отображен шрифтом по умолчанию Times New Roman (этот шрифт установлен в любой системе) и он, все равно, нормально отобразится в любом браузере, и пользователь сможет его нормально прочитать.
Теперь мы рассмотрим как изменить такой шрифт на другой, который нам больше нравится или больше подходит по дизайну. Для этого переходим в файл со стилями и попробуем изменить шрифт конкретно для абзацев. Данное свойство для изменения шрифта называется font-family: ;, что означает «семейство шрифтов» и в нем указываем шрифт, который мы будем использовать вместо стандартного.
Теперь мы должны знать какие шрифты можно использовать чтобы наша страница отображалась без проблем на компьютере у другого пользователя. Так как браузер без проблем отображает все шрифты, которые имеются в операционной системе пользователя, который загружает Ваш сайт. Список, изначально интегрированных в операционные системы шрифтов, Вы может посмотреть на этом сайте http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html, http://maths.nju.edu.cn/~lyu/Myfont/index.html или на изображении ниже, где Вы увидите список шрифтов, установленных по умолчанию в операционную систему.
Вы можете использовать любой из этих шрифтов для написания WEB – сайтов и быть уверенными, что страница отобразится именно так, как Вы задумали во всех браузерах и операционных системах.
В таблице стилей есть такая особенность, что мы можем указать не один вид шрифта а несколько и если первый будет отсутствовать то работать будет следующий но давайте все по порядку.
Например хотим чтобы вместо стандартного Times New Roman отображался шрифт Verdana для этого создаем такую структуру.
Смена типа шрифта
Меняем шрифт с Times New Roman на Verdana
И задаем нужный нам вид шрифта в таблице стилей.
p{
font-family:Verdana ;
}
Теперь наш абзац изменил шрифт. При этом заголовок остался с шрифтом по умолчанию, так как для него тип шрифта мы не указывали.
Теперь для абзаца укажем два шрифта. Делается это через запятую сначала один вид шрифта затем другой.
p{
font-family:Verdana, Tahoma ;
}
Теперь браузер будет действовать следующим образом. Сначала он начнет искать первый указанный шрифт Verdana, если он его нашел, то абзац отобразит именно им, если не нашел данный шрифт то берет следующий по порядку шрифт Tahoma и так далее. Мы можем указывать так сколь угодно много шрифтов и браузер будет перебирать все указанные шрифты пока не найдёт тот, который будет присутствовать в системе пользователя.
В нашем случае такая запись не имеет смысла, так как и шрифт Verdana и шрифт Tahoma имеется в операционной системе, поэтому всегда будет отображается шрифт Verdana. Такой вид записи имеет смысл если вы указываете те шрифты, которые не являются стандартными для в операционных систем.
Для таких случаев есть еще более надежный вариант когда в конце указанного конкретного шрифта Вы указываете конкретную группу шрифтов например sans-serif - это группа содержащая текст без засечек и в нее входит Verdana и Tahoma. Вторая группа это serif отображаемые символы которой содержат засечки и одним из таких шрифтов является Times New Roman. И еще одна такая группа - это monospace которая содержит в себе все моноширинные шрифты. В таких шрифтах каждая буква занимает одинаковую ширину. Такие шрифты используются при создании кода. Это три самые большие группы шрифтов, и указывается такая группка следующим образом.
p{
font-family:Verdana, Tahoma, sans-serif;
}
Такой вид записи для браузера будет говорить следующее: что если не найден первый шрифт Verdana то искать второй шрифт Tahoma и если и он не найден то взять любой шрифт из этой большой группы sans-serif. В данном случае это семейство шрифтов без засечек.
И еще один момент который следует помнить - это названия шрифтов которые состоят из двух и более слов. Такие шрифты указывают с использованием кавычек, то есть форма записи будет иметь следующий вид.
p{
font-family:"Times New Roman" ,sans-serif;
}
Вот мы и рассмотрели, как создавать еще одно свойство для текста - это указывать тип шрифта. В Демо можно посмотреть пример отображения основных видов шрифтов. Ну, а мы переходим к следующему уроку.
CSS