В прошлой лекции было проведено знакомство с основными механизмами CSS, но не рассматривались подробности работы отдельных CSS-свойств. Поэтому в этой лекции будет полное погружение в CSS-свойства. Начать следует с оформления основы любой страницы в интернете, а именно – с оформления текста.
Перед прочтением следует ознакомиться с лекцией 5. Основы CSS , так как в этой лекции будет активно использоваться синтаксис каскадных таблиц стилей. Важно понимать механизмы работы стилей на странице перед тем, как учиться работать с конкретными свойствами.
Самый главный «текстовый» параметр, которым можно управлять — это шрифт. Какой именно задать шрифт, какого размера, начертания и насыщенности — необходимо разобрать каждое из этих свойств по порядку.
Как задать шрифт? Для этого существует свойство font-family. В значении этого свойства указывается список названий шрифтов, перечисленных через запятую. В начале списка располагают самый желаемый шрифт, затем менее желаемый, а в самом конце списка — общий тип шрифта. Браузер проходит по списку слева направо и использует первый найденный в системе или на сайте шрифт.
body {
font-family: "PT Sans", "Arial", sans-serif;
}
Если название шрифта состоит из нескольких слов, то его нужно заключать в кавычки. Одинарные названия можно оставлять как без кавычек, так и с ними – для единообразия. Если браузер не находит на сайте или в операционной системе ни одно из перечисленных названий шрифтов, то он применяет последнее значение — общий системный тип шрифта.
Возникает закономерный вопрос – какие шрифты, кроме системного, доступны для использования? Говоря о доступности шрифтов, существует лишь определенное количество шрифтов, которые обычно доступны во всех системах и поэтому могут использоваться без особого беспокойства. Это так называемые веб-безопасные шрифты.
В большинстве случаев веб-разработчикам хочется иметь более конкретный контроль над шрифтами, используемыми для отображения текстового контента. Проблема состоит в том, чтобы узнать, какой шрифт доступен на компьютере, который используется для просмотра наших веб-страниц. Невозможно узнать это в каждом случае, но известно, что веб-безопасные шрифты доступны почти во всех экземплярах наиболее часто используемых операционных систем (Windows, macOS, наиболее распространенные дистрибутивы Linux, Android и iOS).
Список реальных веб-безопасных шрифтов будет меняться по мере развития операционных систем, но разумно считать следующие веб-шрифты веб-безопасными:
Copy of Таблица: веб-безопасные шрифты
CSS определяет пять общих имен для шрифтов: serif, sans-serif, monospace, cursive и fantasy. Они очень общие, и точное начертание шрифта, используемое при использовании этих общих имен, зависит от каждого браузера и может различаться для каждой операционной системы, в которой они работают. Это наихудший сценарий, когда браузер будет стараться изо всех сил предоставить хотя бы подходящий шрифт. serif, sans-serif и monospace вполне предсказуемы и должны выдавать нечто разумное. С другой стороны, cursive и fantasy менее предсказуемы, и рекомендуется использовать их очень осторожно, тестируя в процессе.