Шрифт

Свойства текста

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

Свойства шрифта

Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 1.

Табл. 1. Атрибуты CSS для управления шрифтами

Свойство	Значение	Описание	Пример
font-family	имя шрифта	Задает список шрифтов	P
font-style	normal italic oblique	Нормальный шрифт Курсив Наклонный шрифт	P
font-variant	normal small-caps	Капитель (особые прописные буквы)	P
font-weight	normal lighter bold bolder 100–900	Нормальная жирность Светлое начертание Полужирный Жирный 100 — светлый шрифт, 900 — самый жирный	P
font-size	normal pt px %	нормальный размер пункты пикселы проценты	font-size: normal font-size: 12pt font-size: 12px font-size: 120%

В примере 1 показано использование параметров при работе со шрифтами.

Пример 1. Задание свойств шрифта с помощью CSS

       
Заголовок
 
Обычный текст
  

Ниже приведен результат данного примера (рис. 1).

Рис. 1. Вид текста после применения стилей

В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат их применения.

Табл. 2. Результат использования различных параметров шрифтов

Пример	Пример	Пример	Пример	Пример
font-family: Verdana, sans-serif; font-size: 120%; font-weight: light	font-size: large; font-weight: bold	font-family: Arial, sans-serif; font-size: x-small; font-weight: bold	font-variant: small-caps	font-style: italic; font-weight: bold

Свойства текста

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

Табл. 3. Свойства CSS для управления видом текста

Свойство	Значение	Описание	Пример
line-height	normal множитель значение %	Интерлиньяж (межстрочный интервал)	line-height: normal line-height: 1.5 line-height: 12px line-height: 120%
text-decoration	none underline overline line-through blink	Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста	text-decoration: none
text-transform	none capitalize uppercase lowercase	Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные	text-transform: capitalize
text-align	left right center justify	Выравнивание текста	text-align: justify
text-indent	значение %	Отступ первой строки	text-indent: 15px; text-indent: 10%

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

Табл. 4. Результат использования различных параметров текста

Пример: и это все о нем	Пример: текст по центру	Пример: Это не ссылка, а просто текст	Пример: отступ первой строки	Пример: полуторный межстрочный интервал
text-transform: capitalize	text-align:center	text-decoration: underline	text-indent: 20px	line-height: 1.5

Источник

font-weight

The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.

Try it

Syntax

/* Keyword values */ font-weight: normal; font-weight: bold; /* Keyword values relative to the parent */ font-weight: lighter; font-weight: bolder; /* Numeric keyword values */ font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; /* normal */ font-weight: 500; font-weight: 600; font-weight: 700; /* bold */ font-weight: 800; font-weight: 900; /* Global values */ font-weight: inherit; font-weight: initial; font-weight: revert; font-weight: revert-layer; font-weight: unset; 

The font-weight property is specified using any one of the values listed below.

Values

Normal font weight. Same as 400 .

Bold font weight. Same as 700 .

One relative font weight lighter than the parent element. Note that only four font weights are considered for relative weight calculation; see the Meaning of relative weights section below.

One relative font weight heavier than the parent element. Note that only four font weights are considered for relative weight calculation; see the Meaning of relative weights section below.

In earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts using the Fallback weights system.

CSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000 and introduces Variable fonts, which can make use of this much finer-grained range of font weights.

Fallback weights

If the exact weight given is unavailable, then the following rule is used to determine the weight actually rendered:

• If the target weight given is between 400 and 500 inclusive:
  • Look for available weights between the target and 500 , in ascending order.
  • If no match is found, look for available weights less than the target, in descending order.
  • If no match is found, look for available weights greater than 500 , in ascending order.

  Meaning of relative weights

  When lighter or bolder is specified, the below chart shows how the absolute font weight of the element is determined.

  Note that when using relative weights, only four font weights are considered — thin (100), normal (400), bold (700), and heavy (900). If a font-family has more weights available, they are ignored for the purposes of relative weight calculation.

  Inherited value	bolder	lighter
  100	400	100
  200	400	100
  300	400	100
  400	700	100
  500	700	100
  600	900	400
  700	900	400
  800	900	700
  900	900	700

  Common weight name mapping

  The numerical values 100 to 900 roughly correspond to the following common weight names (see the OpenType specification):

  Value	Common weight name
  100	Thin (Hairline)
  200	Extra Light (Ultra Light)
  300	Light
  400	Normal (Regular)
  500	Medium
  600	Semi Bold (Demi Bold)
  700	Bold
  800	Extra Bold (Ultra Bold)
  900	Black (Heavy)
  950	Extra Black (Ultra Black)

  Variable fonts

  Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. However some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.

  For TrueType or OpenType variable fonts, the «wght» variation is used to implement varying widths.

  Note: For the example below to work, you’ll need a browser that supports the CSS Fonts Level 4 syntax in which font-weight can be any number between 1 and 1000 . The demo loads with font-weight: 500; . Change the value to see the weight of the text change.

  Accessibility concerns

  People experiencing low vision conditions may have difficulty reading text set with a font-weight value of 100 (Thin/Hairline) or 200 (Extra Light), especially if the font has a low contrast color ratio.

  Formal definition

  Initial value	normal
  Applies to	all elements. It also applies to ::first-letter and ::first-line .
  Inherited	yes
  Computed value	the keyword or the numerical value as specified, with bolder and lighter transformed to the real value
  Animation type	a font weight

  Formal syntax

  font-weight =
  |
  bolder |
  lighter

  =
  normal |
  bold |

  Examples

  Setting font weights

  HTML

  p> Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice "without pictures or conversations?" p> div> I'm heavybr /> span>I'm lighterspan> div> 

  CSS

  /* Set paragraph text to be bold. */ p  font-weight: bold; > /* Set div text to two steps heavier than normal but less than a standard bold. */ div  font-weight: 600; > /* Set span text to be one step lighter than its parent. */ span  font-weight: lighter; > 

  Result

  Specifications

  Browser compatibility

  BCD tables only load in the browser

  See Also

  Found a content problem with this page?

  This page was last modified on Feb 21, 2023 by MDN contributors.

  Your blueprint for a better internet.

  MDN

  Support

  Our communities

  Developers

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Источник

  Как установить стиль шрифта. CSS-свойство font

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

  Свойство в общем виде записывается так:

  font-family — устанавливает семейство шрифтов.

  font-style — задаёт стиль шрифта.

  font-variant — определяет вариант шрифта.

  font-weight — задаёт жирность шрифта.

  font-size — указывает размер шрифта.

  line-height — задаёт высоту строки.

  Значения и примеры использования

  Font-family

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

  Font-style

  Можно выбрать один из стилей оформления текста: обычный шрифт normal , курсив italic , наклонный oblique .

  Font-variant

  У свойства font-variant несколько значений:

  small-caps — все строчные символы отображаются как заглавные уменьшенного размера.

  Font-weight

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

  Возможные значения font-weight :

  • 100: Thin;
  • 200: Extra Light (Ultra Light);
  • 300: Light;
  • 400: Normal;
  • 500: Medium;
  • 600: Semi Bold (Demi Bold);
  • 700: Bold;
  • 800: Extra Bold (Ultra Bold);
  • 900: Black (Heavy).

  Но в большинстве системных шрифтов есть только два варианта толщины: обычный normal (400) и полужирный bold (700).

  Font-size

  Размер шрифта font-size измеряется в пикселях ( px ), процентах, относительных ( em , rem ) или абсолютных единицах ( pt , cm , mm ).

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

  Line-height

  Свойство line-height устанавливает высоту строки, указывая множитель относительно размера шрифта. По умолчанию line-height имеет значение normal . Оно указывает браузеру, что межстрочный интервал нужно подобрать автоматически, исходя из размера шрифта.

  Наследование

  Свойство font наследуется от родительского элемента на его дочерние элементы.

  Нюансы

  ✅ Если заданы различные атрибуты шрифта в разных правилах для одного элемента, последнее применённое свойство переопределит предыдущие.

  

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

  

  ⭐ Свойство font поддерживается современными браузерами. Актуальная информация — на caniuse.com.

  Чем заменить свойство font

  Если нужно управлять отдельными атрибутами шрифта, например, размером, начертанием, жирностью, можно использовать соответствующие отдельные свойства — font-size , font-style и font-weight .

  Материалы по теме

  «Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

  Источник

  Читайте также:  Error line number python