Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

118. Семейство шрифтов в CSS

Из урока узнаете, какие бывают семейства шрифтов в CSS и как с ними работать. Теперь посмотрим, какие семейства шрифтов есть в CSS.

  • Шрифт с засечками (serif) – это шрифты, буквы которых имеют разную ширину (а и ш имеют разную ширину) и у этих букв есть засечки.
  • Рубленые шрифты (sans-serif) – пропорциональные (буквы имеют разную ширину) без засечек шрифты.
  • Моноширинные шрифты (monospace) – непропорциональные, то есть все буквы одинаковой ширины. Чаще всего такой шрифт используют для кода. Код становится читать намного проще, если он написан моноширинным шрифтом.
  • Рукописные (cursive) – шрифты, которые имитируют человеческий почерк. Например, буквы более круглые, имеют какие-то дополнительные штрихи и т.д.

Рассмотрим пример первый, где мы указываем для абзаца моноширинный шрифт. Браузер сам выберет моноширинный шрифт, который есть у пользователя. То есть мы указываем только то, что нам нужен моноширинный шрифт и все.

Пример 1, HTML
<p>Моноширинный абзац</p>
Пример 1, CSS
p {
font-family: monospace;
}

Задание конкретного семейства шрифтов

Теперь мы будем задавать конкретное семейство шрифтов, например, Arial или Tahoma. Смотрим пример второй.

Пример 2, CSS
p {
font-family: Tahoma;
}

Теперь абзац написан шрифтом Tahoma, но не стоит забывать, что пользователю должен быть доступен шрифт Tahoma. Tahoma является стандартным шрифтом, поэтому, он есть у многих.

Обратите внимание, что мы используем все тоже свойство – font-family. font-family универсальный, например, можем мы писать как в третьем примере.

Пример 3, CSS
p {
font-family: Tahoma, serif;
}

То есть если браузер не найдет шрифт Tahoma на компьютере, то будет использован какой-то шрифт с засечками. Далее смотрим на четвертый пример.

Пример 4, CSS
p {
font-family: Tahoma, Arial, 'PT Mono';
}

В четвертом примере показано, что если не будет найден шрифт Tahoma, то будет использован шрифт Arial, но если не будет найден и шрифт Arial, то будет использован шрифт PT Mono. Обычно указывают похожие шрифты. Обратите внимание, что последний шрифт я взял в кавычки, это потому что в имени данного шрифта есть пробел. Любой шрифт, в имени которого есть какой-то отличный от букв и цифр знак, должен быть взят в кавычки.

Похожие уроки и записи блога

Первое знакомство с PythonЗнакомство с Python
Основы объектно-ориентированного программирования (ООП) в PythonЗнакомство с Python
Работа с файлами в Python Знакомство с Python
Написание модулей в PythonЗнакомство с Python
Типы данных в PythonЗнакомство с Python
Погружение в PythonЗнакомство с Python
Обработка исключений (try/except) в PythonЗнакомство с Python
Модули в PythonЗнакомство с Python
Продолжаем написание классов в PythonЗнакомство с Python
<
×
>
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно