Как задать толщину шрифта в css

Тонкий и толстый шрифт

Как сделать шрифт тоньше и толще чем font-weight: 100/900? Сделал font-weight: 100 все равно толще чем на скрине получается

Отслеживать

задан 8 июл 2018 в 0:08

492 2 2 золотых знака 6 6 серебряных знаков 13 13 бронзовых знаков

А пример кода? Может подключен шрифт с более толстыми начертаниями?

8 июл 2018 в 0:25

Воспользуйтесь этими атрибутами, чтобы достичь желаемого результата.

8 июл 2018 в 0:33

Скрин не с моего кода. А у меня обыкновенный, стандартный Arial

8 июл 2018 в 0:53

Скрин вообще не кода. Нужен проблемный код, чтобы не ванговать!

8 июл 2018 в 0:58

Также может быть проблема, если оборачиваешь текст в заголовок.

8 июл 2018 в 1:00

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Я вот специально подобрал тонкие шрифты .. на примере mini-landing в сниппете

$(window).on("load resize", function() < var width = $(this).width(); var height = $(this).height(); $(".width").text(width); $(".height").text(height); >)

* < margin: 0; padding: 0; max-width: 100%; >html, body < font-family: 'Nanum Gothic', sans-serif; font-size: 20px; >header, section, .col < height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; >h1, h2, h3, h4 < font-weight: 100; padding: 10px 0; >section.row < display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; height: 100vh; >section.row div < width: 100%; text-align: center; padding: 10px; >section.row div img < border-radius: 50%; >section.row div p < font-family: 'Amatic SC', cursive; font-weight: 100; >.panel < position: fixed; top: 10px; left: 10px; >@media screen and (max-width:600px) < section.row < display: flex; flex-direction: column; justify-content: center; width: 90%; margin: auto; >>

    
Hi , i am junior front end developer
 
 
I decide every day what are the tasks
 
 
apply ScrollMagic and Gsap
 
 
 
scills
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam sed fugit cumque debitis rerum beatae distinctio sunt voluptatum, reprehenderit repellendus!
 
 
profile
   
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, vitae.
 
 
portfolio
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam iure, explicabo eaque. Similique nulla modi facere cum at optio alias, ipsa quia quae animi, unde rem illo, saepe, repudiandae aliquid.
 
 
 

font — weight

Свойство font — weight задаёт насыщенность шрифта: от самого тонкого до самого жирного начертания.

Примеры

Скопировать ссылку «Примеры» Скопировано

 div  font-weight: normal; font-weight: bold;> div  font-weight: normal; font-weight: bold; >    Скопировать Скопировано Не удалось скопировать   

Значения относительно родительского элемента:

 div  font-weight: lighter; font-weight: bolder;> div  font-weight: lighter; font-weight: bolder; >    Скопировать Скопировано Не удалось скопировать   

Значения в цифрах:

 div  font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900;> div  font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Большинство шрифтов имеют два варианта начертания: обычное normal и жирное bold . Их в основном и используют.

Но браузер может отобразить и более тонкие или толстые варианты, если шрифт их поддерживает. Такие варианты задаются с помощью слов lighter и bolder или в условных единицах от сверхсветлого начертания 100 до сверхжирного или «чёрного» 900 с шагом 100 единиц.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Толщину текста можно задать с помощью ключевых слов или числовым значением:

• normal — стандартная толщина шрифта. Соответствует значению 400. Значение по умолчанию.
• bold — жирный набор текста. Соответствует 700.
• lighter — более тонкий вариант, чем в родительском элементе. Например, светлое начертание Light.
• bolder — более насыщенный вариант, чем в родительском элементе. Например, сверхжирное начертание Extra Bold.
• 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 — условные единицы насыщенности, где 400 — это стандартная насыщенность текста. Используются редко, так как большинство шрифтов имеют только обычное и жирное написание.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Если всё же решишь использовать цифры, но у выбранного шрифта нет такого варианта насыщенности, то для значений от 100 до 500 браузер выберет стандартный вариант normal , а от 600 до 900 — жирный шрифт bold .

Ещё примеры

Скопировать ссылку «Ещё примеры» Скопировано

Попробуем задать насыщенность сразу разными способами к разным элементам кода:

   
Шрифт этого заголовка — жирный. Мы задали его с помощью ключевого слова bold. В цифровом значении он равен 700 единицам.  
Это текст стандартной толщины внутри контейнера 
. Он эквивалентен 400 единицам толщины.  Это текст внутри контейнера — и он чуть толще, чем стандартный normal, но тоньше, чем bold. Мы задали его насыщенность с помощью значения 500. В контейнере шрифт тоньше, чем в , внутри которого он находится. Его мы задали с помощью значения lighter.   body> h1>Шрифт этого заголовка — жирный. Мы задали его с помощью ключевого слова bold. В цифровом значении он равен 700 единицам.h1> p> Это текст стандартной толщины внутри контейнера p>. Он эквивалентен 400 единицам толщины.p> div> Это текст внутри контейнера div> — и он чуть толще, чем стандартный normal, но тоньше, чем bold. Мы задали его насыщенность с помощью значения 500.br> span>В контейнере span> шрифт тоньше, чем в div>, внутри которого он находится. Его мы задали с помощью значения lighter.span> div> body>    Скопировать Скопировано Не удалось скопировать   

 body  font-family: "Roboto", sans-serif;> /* Зададим толщину заголовка с помощью слова bold. */h1  font-weight: bold;> /* Обычный текст в абзаце 
сделаем стандартным normal */p  font-weight: normal;> /* В контейнере текст будет средним по жирности между normal и bold */div  font-weight: 500;> /* В элементе текст будет на один уровень меньше по жирности,чем у родительского элемента, внутри которого он находится */span  font-weight: lighter;> body  font-family: "Roboto", sans-serif; > /* Зададим толщину заголовка с помощью слова bold. */ h1  font-weight: bold; > /* Обычный текст в абзаце 
сделаем стандартным normal */ p  font-weight: normal; > /* В контейнере текст будет средним по жирности между normal и bold */ div  font-weight: 500; > /* В элементе текст будет на один уровень меньше по жирности, чем у родительского элемента, внутри которого он находится */ span  font-weight: lighter; >    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Денис Русаков советует

Скопировать ссылку «Денис Русаков советует» Скопировано

�� У каждого значения насыщенности есть своё название, принятое в типографике.

Распространённые названия насыщенности

• 100 — тонкое начертание (thin, hairline);
• 200 — сверхсветлое (extra light, ultra light);
• 300 — светлое (light);
• 400 — нормальное (normal, regular, book);
• 500 — среднее (medium);
• 600 — полужирное (semi bold, demi bold);
• 700 — жирное (bold);
• 800 — сверхжирное (extra bold, ultra bold);
• 900 — тяжёлое (black, heavy).

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

Чтобы использовать все 9 начертаний (100–900), шрифт должен их поддерживать. В противном случае браузер будет подбирать ближайшее подходящее начертание из тех, что есть в подключаемом шрифте и поэтому надёжнее использовать то значение font — weight , которое вы указали в директиве font — face .

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

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

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

�� Относительные значения bolder и lighter не используются почти никогда. Причина в том, что они относительные. Как итог если меняется вес шрифта родительского элемента — меняется вес шрифта ребёнка. Но это, чаще всего, не то что нужно. Совет: используй всегда абсолютный вес шрифта.

Работа с шрифтами в CSS. Подключение кастомных шрифтов

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

body { font-family: "Segoe UI", Arial, sans-serif; }

В этом примере мы для тега установили шрифты в следующем порядке:

1. Segoe UI;
2. Arial;
3. sans-serif.

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

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

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

В случае, когда ни один из заданных шрифтов не найден, будет использоваться тот, который указан в настройках браузера по умолчанию. В Chrome посмотреть, какой шрифт используется по умолчанию можно в разделе «Настроить шрифты»: «Настройки» -> «Внешний вид» -> «Настроить шрифты». Кстати, здесь же его при необходимости можно изменить на другой:

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

Пример, как в очень популярном CSS-фреймворке Bootstrap 5 выполняется установка шрифта для тега и, следовательно, по умолчанию для всех вложенных в него элементов:

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }

Шрифты, в названии которых имеется хотя один пробел, должны быть заключены в кавычки. Наприпер: «Segoe UI», «Helvetica Neue» и так далее.

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

Кроме этого в начале указано ключевое слово system-ui . Какой шрифт оно обозначает? Чтобы это понять, рассмотрим какие вообще имеются основные ключевые слова, которые могут использоваться для указания общих семейств шрифтов:

• system-ui – общее семейство системных шрифтов; оно указывает, что в качестве шрифта будет использоваться системный шрифт операционной системы, но так как разные операционные системы используют разные системные шрифты, то в Windows это будет «Segoe UI», в macOS – «San Francisco», в Android – «Roboto».
• -apple-system – обозначает, что на устройствах Apple (iPhone, iPad и Mac) нужно использовать системный шрифт операционной системы.
• serif – шрифт с засечками. Например: Georgia, Times New Roman.
• sans-serif – шрифт без засечек. Например: Arial, Tahoma, Trebuchet MS, Verdana, San Francisco, Segoe UI.
• monospace – моноширинный шрифт, то есть такой у которого все символы (глифы) имеют одинаковую ширину. Например: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New.
• cursive – шрифты, имитирующие почерк. Например: Comic Sans MS, Comic Sans, Apple Chancery, Bradley Hand, Snell Roundhand.
• fantasy – декоративные шрифты, которые в основном используются для названий, заголовков и так далее. Например: Impact, Luminari, Chalkduster, Jazz LET, Stencil Std.
• emoji – шрифты, специально предназначенные для отображения эмодзи. Например: Apple Color Emoji, Segoe UI Emoji.

Свойство font-family является наследуемым. Это значит, что при его установке некоторому элеиенту, оно по цепочке вложенности передаётся всем его потомкам.

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

body { font-family: Arial, sans-serif; } h1, h2, h3 { font-family: "Times New Roman", serif; }

Размер шрифта (font-size)

В CSS установка размера шрифта осуществляется с помощью свойства font-size .

Например, назначим для

размер шрифта, равный 18px:

p { font-size: 18px; }

Задавать размеры шрифта можно в различных единицах измерения:

• px – в пикселях;
• em – относительно размера шрифта родителя;
• rem – относительно размера шрифта элемента ;
• % – относительно размера шрифта родителя; аналогично em , только значение указывается в процентах;
• vw , vh , vmin , vmax – относительно viewport;

Другие единицы измерения ( mm , cm , pt , pc ) сейчас практически не используются.

Кроме использования единиц измерения, задавать размер тексту можно ещё с помощью следующих ключевых слов:

• xx-small (9px);
• x-small (10px);
• xx-small (13px);
• medium – начальное значение font-size (обычно 16px);
• large (18px);
• x-large (24px);
• xx-large (32px);
• xxx-large (48px).

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

Кроме этих ключевых слов имеются ещё два: smaller и larger . Они позволяют сделать размер шрифта немного меньше или больше, чем у родителя.

Насыщенность шрифта (font-weight)

Установка насыщенности шрифту (толщины букв) в CSS осуществляется с помощью свойства font-weight :

/* установим жирный текст для всех элементов с классом title */ .title { font-weight: bold; }

Задать толщину тексту можно с помощью числа или ключевого слова. Список значений от самого тонкого до самого жирного начертания:

• 100 – тонкое;
• 200 – сверхсветлое;
• 300 – светлое;
• 400 или normal – стандартное (значение по умолчанию);
• 500 – среднее;
• 600 – полужирное;
• 700 или bold – жирное;
• 800 – сверхжирное;
• 900 – тяжёлое.

Чтобы использовать все эти начертания, шрифт должен их поддерживать. В противном случае браузер будет использовать ближайшее начертание, которое этот шрифт имеет. Набиолее часто из всех значений используются два: normal и bold .

Например, установим заголовкам стандартное начертание текста:

h2 { font-weight: normal; }

На этом рисунке приведены начертания стандартного шрифта «Segoe UI» от 100 до 900.

Как видите, от 100 до 300 этот шрифт имеет одинаковое начертание. Также оно не отличается в диапазонах: 500-600 и 800-900.

Например, установим заголовкам внутри .card среднюю толщину букв тексту:

.card h2 { font-weight: 500; }

Кроме абсолютных значений у font-weight имеются ещё относительные: lighter и bolder . С помощью них мы можем установить соотвественно более тонкое или толстое начертание шрифту, чем то, которое имеется у его родителя:

/* в элементах , расположенных непосредственно в 
, текст будет на один уровень меньше по жирности, чем у родительского элемента */ p > span { font-weight: lighter; }

На практике относительные значения bolder и lighter практически не используются.

Стиль шрифта (font-style)

С помощью свойства font-style мы можем установить начертание шрифта:

• normal – обычное (значение по умолчанию);
• italic – курсивное;
• oblique – наклонное;
• oblique 14deg – с указанием угла наклона текста.

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

Допустимые значения — это градусы от -90deg до 90deg включительно.

Подключение кастомных шрифтов

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

По факту в font-family мы указываем не сам шрифт, а его семейство. Семейство – это полный набор стилей, а стиль – это отдельный и конкретный шрифт в этом семействе. Например, семейство «Roboto» состоит из следующих стилей (шрифтов):

Поэтому, когда браузер применяет стиль, ему нужно знать не только семейство, но и такие свойства как font-style (начертание) и font-weight (насыщенность).

Кроме этого, стоит отметить про новый шрифтовой формат — вариативные шрифты (variable fonts). До их появления каждый стиль реализовывался как отдельный файл шрифта. В случае вариативных шрифтов все стили могут содержаться в одном файле. Кроме этого, описание вариативных шрифтов может сопровождаться кроме font-style и font-weight ещё другими свойствами. Например, font-variant , font-stretch и так далее. Но эти шрифты не так популярны и в этой теме мы их рассматривать не будем.

Пример подключения шрифта «Roboto» к странице и установка его по умолчанию в качестве базового шрифта для сайта:

/* подключение шрифта Roboto */ @font-face { font-family: "Roboto"; src: local("Roboto"), local("Roboto-Regular"), url("/assets/fonts/roboto-regular.woff2") format("woff2"); } /* установка Roboto в качестве основного шрифта */ body { font-family: Roboto, sans-serif; }

Деректива @font-face должна обязательно содержать следующие два свойства:

• font-family – семейство шрифтов, к которому относится этот вариант шрифта (при этом данное название необязательно должно соотвествовать настоящему имени шрифта);
• src – один или несколько источников, из которых браузер может взять данный шрифт.

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

В свойстве src источник можно определять с помощью функции local() и url() . Функция local() предназначена для поиска шрифта на устройстве пользователя по его имени, а url() – для загрузки шрифта из файла по указанному URL-адресу. Этот файл в данном формате должен быть доступен по указанному адресу.

Очень часто local() и url() используют вместе. Это позволяет, если доступен шрифт на устройстве поользователя, то использовать его. Если его нет, то загрузить его с сервера по указанному URL:

@font-face { font-family: "Roboto"; /* браузер сначала попробует найти шрифт на устройстве пользователя по имени Roboto */ src: local("Roboto"), /* если не получилось, то попробует найти его на устройстве пользователя по имени Roboto-Regular */ local("Roboto-Regular"), /* если не получилось, то загрузит его с сервера по указанному URL */ url("/assets/fonts/roboto-regular.woff2") format("woff2"); }

В этом примере с помощью format() мы указали формат этого шрифта. В данном случае «woff2» – Web Open Font Format. Данный формат поддерживают все современные браузеры. Использовать какие-то другие форматы не нужно. Но, если нужна поддержка старых браузеров, то тогда нужно добавить другие форматы шрифтов, которые они поддерживают. Например, woff, ttf или ещё какие-то другие:

@font-face { font-family: "Roboto"; src: local("Roboto"), local("Roboto-Regular"), url("/assets/fonts/roboto-regular.woff2") format("woff2"), /* если шрифт не доступен или не подерживается woff2, то загрузит woff */ url("/assets/fonts/roboto-regular.woff") format("woff"), /* если шрифт не доступен или не подерживается woff, то загрузит ttf */ url("/assets/fonts/roboto-regular.ttf") format("ttf"), }

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

Поэтому, чтобы этого избежать нам нужно для каждого стиля подключить свою версию шрифта с помощью @font-face . В этом случае браузер при отрисовке текста будет использовать соответствующую версию шрифта и текст будет отображаться так как нужно.

Например, для того чтобы браузер для отрисовки курсивного текста ( font-style: italic ) с насыщенностью 400 ( font-weight: 400 ) использовал соотвествующую версию шрифта нужно добавить ещё один @font-face :

/* шрифт Roboto для стандартного начертания */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(/assets/fonts/roboto-regular.woff2) format('woff2'); } /* шрифт Roboto для курсива */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; src: local('Roboto Italic'), local('Roboto-Italic'), url(/assets/fonts/roboto-italic.woff2) format('woff2'); }

Допонительно в @font-face мы добавили свойства font-style и font-weight , чтобы браузер знал, какую версию шрифта нужно использовать в том или ином случае.

Если мы хотим, чтобы для жирного начертания браузер тоже использовал соотвествующую версию шрифта, то её также необходимо добавить с помощью @font-face к уже 2 имеющимся:

/* для жирного начертания */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url(/assets/fonts/roboto-bold.woff2) format('woff2'); }

Подключение шрифтов с Google Fonts

Google Fonts – это бесплатный сервис, с помощью которого можно очень просто подключить на страницу нестандартный шрифт. Google Fonts содержит более 1500 семейств шрифтов и все они имеют открытый исходный код.

Наиболее популярными семействами на этом сервисе являются: Roboto, Open Sans, Noto Sans, Montseratt, Lato, Poppins, Inter, Oswald и так далее.

Для подключения шрифтов необходимо выбрать нужные семейства и в них одно или несколько необходимых начертаний:

После этого скопировать сгенерированный HTML-код и вставить его раздел :

Теперь выбранные шрифты можно использовать в свойстве font-family :

/* по умолчанию для основного текста */ body { font-family: 'Roboto', sans-serif; } /* для заголовков */ h1, h2, h3 { font-family: 'Montserrat', sans-serif; }

Если перейти по ссылке, которую нам даёт Google Fonts, то мы увидим ничто иное как CSS-код, содержащий множество @font-face для подключения каждого конкретного выбранного варианта шрифта.

Из интересных свойств, которые мы ещё не рассматривали – это font-display и unicode-range .

Свойство font-display предназначено для настройки поведения текста на странице во время загрузки шрифта. Этому свойству можно установить одно из следующих значений:

• auto – определяется браузером; в большинстве своём он близок к block ;
• block – если в течение 3 секунд нужный шрифт не загрузился, браузер его покажет невидимым запасным шрифтом; после загрузки отображение текста будет переключено на него;
• swap – если менее чем за 100мс шрифт не загрузился, то текст будет отображён запасным шрифтом; после того как нужный шрифт будет загружен текст будет переключен на него;
• fallback – если менее чем за 100мс шрифт не загрузился, то текст будет отображён запасным шрифтом; после этого, если в течение 3 секунд нужный шрифт загрузился, то текст будет переключен на него; но если этого не произошло, текст останется на запасном шрифте;
• optional – похож на fallback , но в отличие от него здесь период для замены 3 секунды не задан; поэтому решение переключать отображение текста или нет на нужный шрифт остаётся за браузером.

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

Например, такой диапазон символов Unicode используется в Google Fonts для поддержки кириллицы:

/* киррилица */ font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

Свойство CSS font-weight

Свойство font-weight в CSS устанавливает начертание (еще говорят толщину или насыщенность) шрифта и зависит от доступных вариантов в семействе шрифтов, а также от вариантов, определенных браузером.

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

font-weight: bold;

Значения

Свойство font-weight принимает либо значения в виде ключевых слов, либо числа в диапазоне от 100 до 900.

Доступные ключевые значения:

normal обычный, соответствует числу 400 bold жирный текст, соответствует числу 700 bolder более жирный относительно начертания родителя lighter более тонкий относительно родителя

Также есть 2 вспомогательных значения:

• inherit – указывает наследование показателя от родителя;
• initial – установка в значение по умолчанию.

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

Если шрифт имеет жирное («700») или нормально («400») начертание как часть семейства, браузер будет использовать их. Если они недоступны, браузер смоделирует собственные жирную или нормальную версию. Но он не будет моделировать другие недоступные варианты жирности.

Иногда можно встретить термин полужирное начертание или semibold, но такого предустановленного значения в CSS нет, это соответствует жирности 600 .

Следующая демонстрация показывает использование различных вариантов жирности для текста:

В приведенной выше демонстрации используется шрифт Open Sans, встроенный с помощью Google Fonts API. Загружаются все доступные варианты жирности. Недоступные варианты просто отображают ближайшим вариантом.

Обычные шрифты, такие как Arial, Helvetica, Georgia и т. д. не имеют начертаний, отличных от 400 и 700. Таким образом, в той же демонстрации с применением одного из этих шрифтов, в девяти абзацах будет отображаться только два варианта жирности.

Использование bolder и lighter

Толщина шрифта bolder и lighter (жирнее и тоньше) вычисляется относительно родительского элемента. Браузер будет искать ближайший «более жирный» или «легкий» вес, в зависимости от того, что доступно в семействе шрифта, в противном случае он просто выберет «400» или «700», в зависимости от того, что логичнее.

Дочерние элементы не будут наследовать bolder и lighter, а вместо этого унаследуют вычисленный вес.

Что происходит при недоступности заданного значения

Если заданное числовое значение веса недоступно, для определения жирности применяется такой подход:

1. Если задано число больше 500 , будет использовано первое доступное более жирное начертание (если такого нет, то первое доступное более светлое).
2. Если задано значение меньше 400 , будет использовано первое доступное более светлое начертание (если такого нет, то первое доступное более жирное).
3. Если задано 400 , будет применено 500 . Если 500 недоступно, будет использован подход из предыдущего пункта.
4. Если задано 500 , будет применено 400 . Если 400 недоступно, то будет использован алгоритм для пункта 2.

Это значит, что для шрифтов , у которые есть только начертания normal и bold , значения 100-500 становятся normal , а 600-900 – bold .