Как сделать шрифт без засечек в css

font-family

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

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif , sans-serif , cursive , fantasy или monospace . Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

Синтаксис

font-family: имя шрифта [, имя шрифта[, . ]] | inherit

Значения

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

  • serif — шрифты с засечками (антиквенные), типа Times;
  • sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
  • cursive — курсивные шрифты;
  • fantasy — декоративные шрифты;
  • monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Применение свойства font-family

Рис. 1. Применение свойства font-family

Объектная модель

[window.]document.getElementById(" elementID ").style.fontFamily

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

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

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

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

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

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

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

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

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

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

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

  1. Times New Roman
  2. Georgia
  3. Cambria
  4. Verdena

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

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

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

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

  1. Arial
  2. Helvetica
  3. Tahoma

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

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

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

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

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

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

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

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

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

  1. Courier New
  2. Lucida Console

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

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

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

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

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

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

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

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

ИТОГО:

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

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

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

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

Руководство по свойству font в CSS

Выбор правильного шрифта ( font ) и стиля ( style ) очень важен для читабельности текста на странице.

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

Теперь рассмотрим каждое из этих свойств подробнее.

Свойство font-family

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

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

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

Вы должны закончить список любым общим семейством шрифтов (generic font) на выбор — serif , sans-serif , monospace , cursive и fantasy . Типичное объявление семейства шрифтов может выглядеть так:

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

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

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

Разница между Serif и Sans-serif шрифтами

Шрифты с засечками имеют маленькие штрихи (засечки) на концах символов, тогда как шрифты без засечек более прямые и не имеют этих маленьких штрихов. Посмотрим следующую иллюстрацию:

Подробнее о стандартных, браузерных шрифтах, здесь: web safe fonts.

Свойство font-style

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

Стиль может быть normal , italic или oblique . Значением по умолчанию является normal .

Давайте посмотрим следующий пример, чтобы понять, как это в основном работает:

На первый взгляд стили шрифта с косым ( oblique ) и курсивным ( italic ) шрифтом выглядят одинаково, но есть разница. Курсивный стиль italic использует курсивную версию шрифта (italic version), в то время как наклонный стиль oblique это просто наклоненный браузером обычный шрифт. Разумеется, использование italic более предпочтительно.

Свойство font-size

Свойство font-size используется для установки размера шрифта для текстового содержимого элемента.

Есть несколько способов указать значения размера шрифта, например, ключевыми словами, % , px , em , rem и т. д.

Установка font-size в пикселях (px)

Установка размера шрифта в значениях пикселей (например, 14px , 16px и т. д.) является хорошей практикой только когда вам нужна точность. Пиксель — это абсолютная единица измерения, которая определяет фиксированное значение.

Посмотрим следующий пример, чтобы понять, как это в основном работает:

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

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

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

Установка font-size в единицах em

Единица em является пропорциональной единицей измерения. При определении свойства font-size значение 1em равно размеру шрифта, который применяется к родительскому элементу.

Итак, если вы установите font-size: 20px для элемента body , то 1em = 20px и 2em = 40px .

Однако, если вы нигде не указали размер шрифта на странице, то браузер по умолчанию, будет использовать значение 16 пикселей. Соответственно, относительные единицы будет рассчитываться так: 1em = 16px и 2em = 32px .

Давайте посмотрим на следующий пример, чтобы понять, как это работает:

Использование комбинации % и em

Чтобы упростить вычисление значений em , есть лайфхак, который состоит в том, чтобы установить font-size для элемента body равным 62,5% (чтобы единицы em рассчитывались не от 16px , а от 10px ).

Теперь вы можете установить размер шрифта для любых элементов, используя единицы em , с помощью простого для запоминания преобразования, умножив значение em на 10. Таким образом, 1em = 10px , 1.2em = 12px , 1.4em = 14px , 1.6em = 16px и т.д. Давайте посмотрим на следующий пример:

Установка font-size в единицах rem

Для большей отзывчивости, в CSS3 введены единицы измерения rem (сокращенно от root em), которые всегда зависят от размера шрифта корневого элемента ( <html> ), независимо от того, где находится элемент в документе (в отличие от em , который расчитывается относительно размера шрифта родительского элемента).

Это означает, что 1rem эквивалентен размеру шрифта элемента <html> , который по умолчанию составляет 16px в большинстве браузеров. Взглянем на пример, чтобы понять, как это работает:

Установка font-size с помощью ключевых слов

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

Размер шрифта можно указать с помощью одного из следующих ключевых слов: xx-small , x-small , small , medium , large , x-large , xx-large . Кроме этих, есть еще ключи со значением относительного размера шрифта: smaller or larger . Посмотрим, как это работает:

Ключевое слово medium равно стандартному размеру шрифта в браузере, который обычно составляет 16px . Аналогично, xx-small &#8212; это эквивалент 9px , x-small &#8212; 10px , small &#8212; 13px , large &#8212; 18px , x-large &#8212; 24px и xx-large &#8212; 32px .

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

Установка font-size в единицах vw и vh

Размеры шрифта могут быть указаны с использованием относительных единиц viewport : vw или vh .

Единицы viewport расчитываются в процентном отношении от размеров окна браузера, где 1vw = 1% ширины области просмотра и 1vh = 1% высоты области просмотра. Следовательно, если область просмотра имеет ширину 1600px, 1vw составляет 16px , но т.к. чаще область просмотра имеет ширину 1920px, то 1vw составит 19.2px

Посмотрим следующий пример:

Однако существует проблема с единицами viewport . На маленьких экранах шрифты становятся такими маленькими, что их трудно прочитать. Чтобы предотвратить это, вы можете использовать CSS-функцию calc() , как в примере:

В этом примере, даже если ширина области просмотра становится равной 0 , размер шрифта будет по крайней мере равен 1em или 16px .

Для создания более гибкой типографики вы можете использовать медиазапросы CSS.

Свойство font-weight

Свойство font-weight указывает вес или жирность шрифта.

Это свойство может принимать одно из следующих значений: normal , bold , bolder , lighter , 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 и inherit .

  • Числовые значения 100 &#8212; 900 указывают жирность шрифта. 400 соответствует значению normal , а 700 соответствует bold .
  • Значения bolder и lighter изменяют жирность текущего элемента на 100 по сравнению с жирностью родительского элемента. bolder &#8212; больше, lighter &#8212; меньше.

Давайте посмотрим на примере:

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

Свойство font-variant

Свойство font-variant позволяет отображать текст в специальном начертании с маленькими заглавными буквами.

Маленькие заглавные буквы ( small-caps ) немного отличаются от обычных заглавных букв, в которых строчные буквы отображаются как уменьшенные версии соответствующих заглавных букв.

Посмотрим следующий пример:

Значение normal переформатирует маленькие заглавные буквы в нормальные.

Похожие посты

  • 17 декабря, 2019
  • 4-5 мин.
  • 292

Руководство по свойству opacity в CSS

  • 16 декабря, 2019
  • 7-8 мин.
  • 67

Руководство по таблицам в CSS

  • 14 декабря, 2019
  • 2-3 мин.
  • 49

Руководство по свойству margin в CSS

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Разработка сайтов для бизнеса

Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.

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

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