Как сделать текст тонким в html

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

Как сделать шрифт тоньше и толще чем 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

CSS свойство font-weight устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.

Интерактивный пример

Синтаксис

font-weight: normal; font-weight: bold; /* Relative to the parent */ font-weight: lighter; font-weight: bolder; 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; /* Global values */ font-weight: inherit; font-weight: initial; font-weight: unset; 

Значения

Нормальное начертание. То же, что и 400 .

Полужирное начертание. То же, что и 700 .

Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).

Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).

100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900

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

Недоступность заданного значения

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

• Если задано значение выше 500 , будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
• Если задано значение менее 400 , будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
• Если задано значение 400 , будет применено 500 . Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400 .
• Если задано значение 500 , будет применено 400 . Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400 .

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

Значение относительных весов

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

наследуемое значение	жирнее	светлее
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

Определение веса имени

Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:

Значение	Общее название
100	Тонкий (Волосяной) Thin (Hairline)
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)

Интерполяция

Значения font-weight интерполируются с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путём округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округлёнными в сторону положительной бесконечности.

Формальный синтаксис

font-weight =
| (en-US)
bolder | (en-US)
lighter

=
normal | (en-US)
bold | (en-US)

Примеры

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

/* Назначение тексту элемента 
жирного начертания. */ p  font-weight: bold; > /* Назначение тексту элемента жирности, которая больше на два уровня, чем normal, но все ещё меньше, чем стандартный bold. */ div  font-weight: 600; > /* Назначение тексту элемента жирности, которая на один уровень меньше, чем у его родителя. */ span  font-weight: lighter; > 

Result

Спецификации

Specification
CSS Fonts Module Level 4 # font-weight-prop

Начальное значение	normal
Применяется к	all elements and text. Это также применяется к ::first-letter и ::first-line .
Наследуется	да
Обработка значения	ключевое слово или числовое значение, с bolder и lighter , трансформируемися в действительное значение
Animation type	жирность шрифта

Совместимость браузеров

BCD tables only load in the browser

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

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.

font-weight

Устанавливает насыщенность шрифта. Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов.

Краткая информация

Значение по умолчанию	normal
Наследуется	Да
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

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

Вот как числовые значения влияют на насыщенность шрифта.

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

Учтите, что не все шрифты поддерживают этот набор. Если указанное значение не поддерживается, то браузер приведёт шрифт к ближайшей насыщенности. К примеру, если вы указали 900 и оно не может быть показано, то браузер в действительности применит значение 700 как ближайшее, которое работает корректно.

Песочница

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

100 300 400 500 700 900

@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900); div < font-family: Roboto, sans-serif; font-weight: >; >

Пример

Мелодический голос персонажа

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

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

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

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

Объект.style.fontWeight

Спецификация

Спецификация	Статус
CSS Fonts Module Level 3	Возможная рекомендация
CSS Transitions	Рабочий проект
CSS Level 2 (Revision 1)	Рекомендация
CSS Level 1	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

3.5

12

2

3.5

1.3

1

1

1

6

3.1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

• Насыщенность
• Свойства шрифта в CSS

CSS: Насыщенность шрифта

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

Есть два самых распространённых значения свойства font-weight :

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

.bold

Текст с жирным начертанием шрифта

Но это не все значения, которые может принимать свойство. Помимо словесного описания bold и normal существуют числовые:

• 100
• 200
• 300
• 400 — соответствует значению normal
• 500
• 600
• 700 — соответствует значению bold
• 800
• 900

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

Задание

Добавьте в редактор параграф с классом weight и установите насыщенность bold . Стили добавьте в тег

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

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

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

Прочитал урок — ничего не понятно ��

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

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

Полезное

• Если у шрифта есть только нормальная насыщенность, то при установке значения bold браузер автоматически сделает символы насыщенными. Это может выглядеть не так, как задумывалось разработчиками шрифта, поэтому следите, чтобы были подключены все нужные вариации шрифта

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

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

• Каскадные таблицы стилей
• Использование CSS в HTML
• Наследование стилей
• Запись стилей в теге style
• Базовые стили тегов
• Классы
• Селекторы
• Каскадность
• Приоритет стилей
• Цвета
• Выравнивание текста
• Размер шрифта
• Насыщенность шрифта
• Курсив
• Капитель
• Горизонтальная черта
• Межстрочный интервал
• Семейство шрифта
• Обобщённое правило для шрифтов
• Базовые правила типографики
• Рамки
• Фон
• Внутренние отступы
• Внешние отступы
• Высота и ширина блока
• Блочная модель
• Flex-контейнер
• Направление Flex-элементов
• Перенос элементов внутри контейнера
• Выравнивание элементов внутри контейнера
• Гибкий размер элементов
• Префиксы
• Единицы измерения
• Цветовая модель RGB
• Медиа запросы
• Анимация
• Переменные
• Позиционирование