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

CSS Шрифты

Выбор правильного шрифта для вашего сайта очень важен!

Выбор шрифта важен

Выбор правильного шрифта имеет огромное влияние на то, как читатели воспринимают веб-сайт.

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

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

Общие семейства шрифтов

В CSS есть пять общих семейств шрифтов.:

  1. Serif шрифты имеют небольшую обводку по краям каждой буквы. Они создают ощущение формальности и элегантности.
  2. Sans-serif шрифты имеют чистые линии (без мелких штрихов). Они создают современный и минималистичный вид.
  3. Monospace шрифты — здесь все буквы имеют одинаковую фиксированную ширину. Они создают механический вид.
  4. Cursive шрифты имитируют человеческий почерк.
  5. Fantasy шрифты декоративные/игривые шрифты.

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

Различия между шрифтами Serif (с засечками) и Sans-serif (без засечек)

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

Примеры некоторых шрифтов

Generic Font Family Examples of Font Names
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

CSS свойство font-family

В CSS мы используем свойство font-family чтобы указать шрифт текста.

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

Примечание: Если в названии шрифта больше одного слова, оно должно быть заключено в кавычки, например: "Times New Roman".

Пример

Укажите несколько разных шрифтов для трех параграфов:

.p1 <
font-family: "Times New Roman", Times, serif;
>

.p2 <
font-family: Arial, Helvetica, sans-serif;
>

.p3 <
font-family: "Lucida Console", "Courier New", monospace;
>

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-теги, например < H1 >-< H6 > для заголовков и < p > для абзацев.

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

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

Примечание: Если размер шрифта не указан, по умолчанию для обычного текста, как и для абзацев, используется 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

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

Пример

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

Вес шрифта

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

Пример

p.thick <
font-weight: bold;
>

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

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

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

Hello World

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

Пример

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

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

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

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

Пример

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

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

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

Каскадные таблицы стилей CSS советы & приёмы

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

Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.

Стили шрифтов

Большинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль "жирный курсив" (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.

Модуль "Шрифты" в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.

Навигация по сайту

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *