Какие существуют виды шрифтов в CSS

Содержание

Виды шрифтов в CSS

  • Данная статья написана командой Vertex Academy.
  • Это одна из статей из нашего Самоучителя по HTML&CSS.
  • Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Привет! В этой статье мы продолжим знакомство с CSS, а именно поговорим о шрифтах.

Какие есть виды шрифтов

Шрифты — важная часть вида веб-страницы. Существует множество различных, не похожих друг на друга шрифтов.

Тем не менее, все шрифты можно разделить на 4 группы:

  • с засечками (serif)
  • без засечек (sans-serif)
  • рукописные (handwritten)
  • моноширинные (monospace)

Группа 1 — с засечками (serif)

Давайте посмотрим на следующую картинку:

Слева мы видим шрифт без засечек, справа — с засечками.

Шрифты с засечками по-английски называются «serif» (англ. «serif» — «засечка», «выступ», «штрих»). К таким шрифтам относятся, например:

Шрифты из данной группы обычно используются для длинных текстов , поскольку считается, что их легче воспринимать благодаря засечкам.

Группа 2 — шрифты без засечек (sans-serif)

Шрифты без засечек (‘»sans-serif», от фр. «sans» — «без», и англ. «serif» — «засечка»).

К шрифтам без засечек относятся, например:

Шрифты без засечек часто используются для заголовков .

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

Группа 3 — рукописные шрифты (handwritten)

Вот Вам пример рукописного шрифта:

Рукописные шрифты обычно используются для декоративных элементо в на страницах.

Группа 4 — моноширинные шрифты

Моноширинные шрифты — это шрифты, в которых ширина всех букв одинаковая.

ЭТО МОНОШИРИННЫЙ ТЕКСТ

К моноширным шрифтам относятся, например:

Моноширными шрифтами часто пишется программный код.

Например, если Вы пользуетесь текстовым редактором Sublime Text, тогда знайте, что когда Вы набираете код в Sublime, Вы его набираете моноширным шрифтом

Зачем front-end разработчику знать типы шрифтов?

Действительно — зачем? Разве мы как разработчики не должны просто подключить шрифт, который указан в задании?

Все дело в том, что может так получиться, что человек зашел к Вам на сайт, а при разработке сайта использовали такой шрифт, который по тем или иным причинам не установлен у него на компьютере. И все, беда. Чтобы перестраховаться от таких ситуаций необходимо использовать такое понятие как fonts fallback или просто «фоллбэк».

Читать еще:  Есть ли параллельные вселенные

То есть этой строчкой мы указали, что:

  • Все параграфы должны отображаться шрифтом Times New Roman.
  • Если же вдруг у пользователя нет такого шрифта на компьютере, тогда все тексты параграфов необходимо отображать шрифтом Georgia.
  • Если же и этот шрифт не найдется на компьютере пользователя, тогда отображать любым стандартным шрифтом, относящимся к группе шрифтов с засечками (serif).

Как видите, fallback читается браузером слева — направо.

ИТОГО:

Выделяют 4 группы шрифтов:

  • с засечками (serif)
  • без засечек (sans-serif)
  • рукописные (handwritten)
  • моноширинные (monospace)

Front-end разработчику необходимо знать какие есть виды шрифтов, например, для написания fallback.

Надеемся, данная статья была Вам полезна и теперь Вы знаете чуть больше о видах шрифтов Читайте дальше наши статьи или приходите учиться к нам на курсы по front-end. Детальнее о наших курсах у нас на сайте здесь.

CSS HTML шрифты, цвет и размер текста

Свойства шрифта CSS определяют семейство шрифтов, смелость, размер и стиль текста.

Разница между засечками и шрифтами без засечек

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

В CSS существует два типа имен семейств шрифтов:

  • родовое семейство — группа семейств шрифтов с похожим видом (например, «засечка» или «однодисковая»)
  • семейство шрифтов — конкретная семья шрифтов (например, «Times New Roman» или «Arial»)

Примечание: На компьютерных экранах шрифты без засечек считаются более удобными для чтения, чем шрифты с засечками.

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

Семейство шрифтов текста задается с помощью свойства font-family .

Свойство font-family должно содержать несколько имен шрифтов в качестве «резервной» системы. Если обозреватель не поддерживает первый шрифт, он пытается следующий шрифт и т. д.

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

Примечание: Если имя семейства шрифтов больше одного слова, оно должно быть в кавычках, например: «Times New Roman».

В списке, разделенном запятыми, указано несколько семейств шрифтов:

Пример

Для часто используемых комбинаций шрифтов, посмотрите наши безопасные сочетания шрифтов.

Стиль шрифта

Свойство font-style в основном используется для указания текста курсивом.

Это свойство имеет три значения:

  • normal — Текст отображается нормально
  • italic — Текст показан курсивом
  • oblique — Текст «опираясь» (косой очень похож на курсив, но менее поддерживается)

Пример

p.italic <
font-style: italic;
>

p.oblique <
font-style: oblique;
>

Размер шрифта

Свойство font-size задает размер текста.

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

Всегда используйте правильные HTML-теги, например — для заголовков и для абзацев.

Значение размера шрифта может быть абсолютным или относительным размером.

  • Устанавливает заданный размер текста
  • Не позволяет пользователю изменять размер шрифта во всех браузерах (плохо для специальных возможностей)
  • Абсолютный размер полезен, когда известен физический размер выходных данных
  • Устанавливает размер относительно окружающих элементов
  • Позволяет пользователю изменять размер текста в обозревателях

Примечание: Если размер шрифта не указан, по умолчанию для обычного текста, как и для абзацев, используется 16px (16px = 1em).

Задать размер шрифта с пикселями

Установка размера текста с пикселями дает полный контроль над размером текста:

Читать еще:  Как получить визу в Грецию

Пример

Совет: При использовании пикселов можно по-прежнему использовать инструмент «Масштаб» для изменения размера всей страницы.

Установить размер шрифта с em

Чтобы разрешить пользователям изменять размер текста (в меню обозревателя), многие разработчики используют EM вместо пикселов.

Единица измерения размера em рекомендуется консорциумом W3C.

1em равен текущему размеру шрифта. Размер шрифта по умолчанию в обозревателях — 16px. Таким образом, по умолчанию размер 1em является 16px.

Размер можно вычислить от пикселов к EM использующ эту формулу: пикселы/16 =EM

Пример

h2 <
font-size: 1.875em; /* 30px/16=1.875em */
>

p <
font-size: 0.875em; /* 14px/16=0.875em */
>

В приведенном выше примере размер текста в EM совпадает с предыдущим примером в пикселях. Однако, с размером EM, можно настроить размер текста во всех браузерах.

К сожалению, есть еще проблема с более старыми версиями IE. Текст становится больше, чем он должен, когда сделал больше, и меньше, чем он должен, когда сделал меньше.

Используйте комбинацию процентов и EM

Решение, которое работает во всех браузерах, заключается в том, чтобы задать размер шрифта по умолчанию в процентах для элемента :

Пример

Наш код теперь отлично работает! Он показывает тот же размер текста во всех браузерах, и позволяет всем браузерам, чтобы увеличить или изменить размер текста!

Вес шрифта

Свойство font-weight задает вес шрифта:

Пример

p.thick <
font-weight: bold;
>

Отзывчивый размер шрифта

Размер текста может быть установлен с помощью vw единицы, что означает «ширина видового экрана».

Таким образом размер текста будет следовать размеру окна браузера:

Hello World

Измените размер окна обозревателя, чтобы увидеть, как масштабируется размер шрифта.

Пример

Hello World

Видовой экран — это размер окна обозревателя. 1ВВ = 1% ширины видового экрана. Если видовой экран шириной 50 см, 1ВВ составляет 0.5 cm.

Шрифт вариант

Свойство font-variant указывает, должен ли текст отображаться в шрифте с малыми прописными буквами.

В шрифте с малыми прописными буквами все строчные буквы преобразуются в прописные буквы. Однако преобразованные прописные буквы отображаются в меньшем размере шрифта, чем исходные прописные буквы в тексте.

Пример

p.small <
font-variant: small-caps;
>

Другие примеры

Все свойства шрифта в одном Декларации
В этом примере демонстрируется использование сокращенного свойства для установки всех свойства шрифта в одном объявлении.

Способы задания шрифтов в CSS

Шрифт – это важная составляющая веб-дизайна, придающая сайту узнаваемость и выразительность.

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

Как задать шрифт в CSS?

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

Для категоризации используют два типа имён: гарнитура шрифта family name и общее семейство generic family .

Первый тип — название шрифта (например, Calibri, Times New Roman и т. д.), второй — группа шрифтов с характерными общими чертами (например, sans-serif ).


Указывать шрифты для сайта нужно, начиная с предпочтительного и заканчивая альтернативными вариантами. В конце списка рекомендуется указать родовое имя, поскольку в случае отсутствия определённых шрифтов на компьютере пользователя страница будет отображаться родственными.

Читать еще:  Что можно приготовить на 100 рублей

Список шрифтов может выглядеть следующим образом:

Основные свойства шрифтов в CSS

В CSS при описании шрифта используют следующие характеристики:

Стиль

Стиль шрифта определяет тип начертания для представления текста: наклонный, курсивный или обычный.

Атрибут font style может принимать такие значения как:

  • normal (обычный);
  • italic (курсив);
  • oblique (наклонный).

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

Вариант шрифта

Данная характеристика указывает использование строчными символами обычных глифов или глифов капители. Любой шрифт может включать в себя либо только глифы капители, либо только обычные глифы, либо оба варианта в совокупности.

Свойство font variant может иметь одно из двух возможных значений:

  • normal (обыкновенный шрифт);
  • small-caps (шрифт с малыми прописными буквами).

Вес шрифта

В CSS жирный шрифт или наоборот, более светлый, задаётся параметром font weight . Некоторыми браузерами поддерживаются числовые значения в описании веса.

Каждый шрифт может принимать следующие значения:

  • normal (обычный);
  • lighter (светлее);
  • bold (жирный);
  • bolder (ещё более жирный);
  • 100-900 (числовое описание веса, в котором значение 100 соответствует самому тонкому начертанию, а 900 — самому толстому начертанию).

Размер шрифта

Размер шрифта — это расстояние от нижней кромки текста до границ кегельного пространства. Если в HTML данный параметр варьируется от 1 до 7 условных единиц, что не далеко не всегда является удобным, то в CSS с помощью свойства font size размер шрифта можно указать с точностью до пикселя.

Например, задание шрифта размером 20 пикселей выглядит таким образом:

Также, размер шрифта можно задать с помощью процентов от его базового размера.

Например, шрифт с параметрами:

будет отображён на 50% больше стандартного размера. В том случае, если гарнитура и размер шрифта не указаны, браузером будет выводиться базовый шрифт Times New Roman со стандартным, на усмотрение браузера, размером.

Цвет шрифта

Возможности CSS позволяют задать цвет текста и его фона с помощью следующих свойств:

  • color (цвет текста);
  • background color (цвет фона текста).

Цветовые значения рекомендуется указывать в общепринятом шестнадцатеричном виде цветовой модели RGB .

Например, белый текст на чёрном фоне будет иметь такие значения:

Первая пара цифр отвечает за уровень красного цвета, вторая — за уровень зелёного цвета, а третья — за уровень синего.

Минимальное значение — 0, а максимальное — f. Этот принцип позволяет самостоятельно « придумать » значения некоторых цветов: например, если первой паре цифр присвоить максимальное значение, а второй и третьей — минимальные, получится насыщенный красный цвет #ff0000 .

Смешивая цвета, можно получать дополнительные оттенки: совокупность красного и синего цветов, как известно, дадут красно-фиолетовый #ff00ff .

Однако, для того, чтобы не изобретать велосипед, можно воспользоваться специальными программами или онлайн-сервисами для подбора цветового шестнадцатеричного кода: например, если в поисковом сервисе Яндекс ввести слово « цвет », появится удобное для таких целей средство.


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

Надеемся, что данное руководство было для вас полезно. Желаем успехов!

Источники:

Виды шрифтов в CSS

http://html5css.ru/css/css_font.php

http://www.internet-technologies.ru/articles/sposoby-zadaniya-shriftov-v-css.html

Ссылка на основную публикацию
Статьи на тему:

Adblock
detector