.Bold{Font-Weight:700}: font-weight — CSS: Cascading Style Sheets

Содержание

Свойство font-weight, насыщенность шрифта — Оформление текста — HTML Academy

Загрузка…
Через несколько секунд всё будет готово

index.html
style.css

HTML

<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<title>Дневник начинающего верстальщика</title>
<link rel=»stylesheet» href=»style.css»>
</head>
<body>
<header>
<p>Блог</p>
<nav>
<a href=»index.html»>На главную</a>
</nav>
</header>
<main>
<article>
<h2>День второй. Хочу быть верстальщиком</h2>
<p>Сегодня весь вечер просидел в интернете. Читал про преимущества работы верстальщиком. Часто отвлекался на видео с котиками, конечно, но кое-что я запомнил:</p>
<ul>
<li>ты делаешь полезное дело</li>
<li>можешь работать удалённо</li>
<li>интересные люди</li>
<li>хорошая зарплата</li>
</ul>
<p>Желания учиться резко прибавилось. </p>
</article>
<aside>
Тут могла быть ваша реклама
</aside>
</main>
<footer>
Подвал сайта
</footer>
</body>
</html>

CSS

body {
padding: 0 30px;
font-size: 16px;
line-height: 26px;
font-family: «Arial», sans-serif;
color: #222222;
background: #ffffff url(«img/bg-page.png») no-repeat top center;
}
h2 {
font-size: 24px;
line-height: normal;
}
h3 {
font-size: 20px;
line-height: normal;
}
a {
color: #0099ef;
text-decoration: underline;
}
.page-title {
font-size: 36px;
line-height: 42px;
font-family: «Verdana», sans-serif;
}
.avatar {
border-radius: 50%;
}
.blog-navigation {
margin-bottom: 30px;
padding: 20px;
color: #ffffff;
background-color: #4470c4;
border: 5px solid #2d508f;
}
.blog-navigation h3 {
margin-top: 0;
}
.blog-navigation ul {
padding-left: 0;
list-style: none;
}
.blog-navigation li {
margin-bottom: 5px;
}
. blog-navigation a {
color: #ffffff;
}
.skills dd {
margin: 0;
margin-bottom: 10px;
background-color: #e8e8e8;
}
.skills-level {
font-size: 12px;
text-align: center;
color: #ffffff;
background-color: #4470c4;
}
.skills-level-ok {
background-color: #47bb52;
}
footer {
margin-top: 30px;
}

Что в задании вам не понравилось?

Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)

Другое (сейчас напишу)

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

ЗадачиВыполнено

Для класса .page-title задайте насыщенность font-weight со значением bold,
а для h2 — со значением 400.

font-weight | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6. 0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

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

Значение по умолчанию	normal
Наследуется	Да
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900
с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет
значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое
установлено по умолчанию) эквивалентно 400, стандартный полужирный текст —
значению 700.

Синтаксис

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

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-weight</title>
  <style>
   h2 {
    font-weight: normal; /* Нормальное начертание */
   } 
   .select {
    color: maroon; /* Цвет текста */
    font-weight: 600; /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  <h2>Duis te feugifacilisi</h2>
  <p><span>Lorem ipsum dolor sit amet</span>, 
  consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
  dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud 
  exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
  consequat.</p>
 </body>
</html>

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

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

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

[window.]document.getElementById(«elementID»).style.fontWeight

Браузеры

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

Шрифт

CSS по теме

font-weight

Статьи по теме

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

Рецепты CSS

Как с помощью стилей выделить ссылки, которые ссылаются на другой сайт?

шрифтов — CSS: Каскадные таблицы стилей

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

 /* Значения ключевых слов */
вес шрифта: нормальный;
вес шрифта: полужирный;
/* Значения ключевых слов относительно родителя */
вес шрифта: светлее;
вес шрифта: жирнее;
/* Числовые значения ключевых слов */
вес шрифта: 100;
вес шрифта: 200;
вес шрифта: 300;
вес шрифта: 400; /* обычный */
вес шрифта: 500;
вес шрифта: 600;
вес шрифта: 700; /* смелый */
вес шрифта: 800;
вес шрифта: 900;
/* Глобальные значения */
вес шрифта: наследовать;
вес шрифта: начальный;
вес шрифта: вернуться;
вес шрифта: обратный слой;
вес шрифта: не установлен;

Свойство font-weight задается с использованием любого из перечисленных ниже значений.

Значения

нормальный: Обычный вес шрифта. То же, что и 400 .
полужирный: Вес полужирного шрифта. То же, что и 700 .
зажигалка: На один относительный вес шрифта светлее родительского элемента. Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже.
жирнее: На один относительный вес шрифта больше, чем у родительского элемента. Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже.
<номер>: A <число> значение от 1 до 1000 включительно. Более высокие числа представляют веса, которые выделены жирнее (или так же жирно, как) меньшие числа. Некоторые часто используемые значения соответствуют общим именам гирь, как описано в разделе «Сопоставление общих имен гирь» ниже.

В более ранних версиях спецификации font-weight свойство принимает только значения ключевых слов и числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 9.00; непеременные шрифты могут действительно использовать только эти установленные значения, хотя более мелкие значения (например, 451) будут преобразованы в одно из этих значений для непеременных шрифтов с использованием системы резервных весов.

Шрифты CSS Уровень 4 расширяет синтаксис, чтобы принимать любое число от 1 до 1000, и вводит вариативные шрифты, которые могут использовать этот гораздо более тонкий диапазон веса шрифта.

Запасные веса

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

Если заданный целевой вес находится в диапазоне от 400 до 500 включительно:
- Найдите доступные веса между целевым значением и 500 в порядке возрастания.
- Если совпадений не найдено, ищите доступные веса меньше целевого в порядке убывания.
- Если совпадений не найдено, ищите доступные веса больше 500 в порядке возрастания.
Если вес меньше 400 , ищите доступные веса меньше целевого, в порядке убывания. Если совпадений не найдено, найдите доступные веса, превышающие целевой, в порядке возрастания.
Если указан вес больше 500 , ищите доступные веса больше целевого в порядке возрастания. Если совпадений не найдено, ищите доступные веса меньше целевого в порядке убывания.

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

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

Обратите внимание, что при использовании относительной толщины учитываются только четыре толщины шрифта — тонкий (100), обычный (400), полужирный (700) и тяжелый (900). Если в семействе шрифтов доступно больше весов, они игнорируются при расчете относительного веса.

`Сопоставление общих названий гирь`

Числовые значения от 100 до 900 примерно соответствуют следующим общим именам гирь (см. спецификацию OpenType):

Значение	Общее название веса
100	Тонкий (линия волос)
200	Сверхлегкий (Сверхлегкий)
300	Свет
400	Обычный (Обычный)
500	Средний
600	Полужирный (Полужирный)
700	Жирный
800	Extra Bold (Сверхжирный)
900	Черный (тяжелый)
950	Экстра-черный (Ультра-черный)

`Вариативные шрифты`

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

Для изменяемых шрифтов TrueType или OpenType вариант "wght" используется для реализации различной ширины.

Примечание: Для работы приведенного ниже примера вам потребуется браузер, поддерживающий синтаксис CSS Fonts Level 4, в котором font-weight может быть любым числом от 1 до 1000 . Демонстрация загружается с font-weight: 500; . Измените значение, чтобы увидеть изменение веса текста.

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

MDN Понимание WCAG, пояснения к Руководству 1. 4
Понимание критерия успеха 1.4.8 | Понимание W3C WCAG 2.0

 вес шрифта = 
 <абсолютный вес шрифта> | 
 смелее | 
 светлее  "><шрифт-вес-абсолютный> = 
 обычный | 
 полужирный | 
 <число [1,1000]>

`Установка толщины шрифта`

`HTML`

 
  Алисе уже начинало надоедать сидеть рядом с сестрой на берегу.
  и от нечего делать: раз или два она заглянула в книгу,
  сестра читала, но в ней не было ни картинок, ни разговоров, "и что
  Польза от книги, — подумала Алиса, — без картинок и разговоров?»

<дел>
  Я тяжелый

  Я легче


 CSS 
 /* Сделать текст абзаца полужирным. */
п {
  вес шрифта: полужирный;
}
/* Устанавливаем текст div на два шага тяжелее, чем
   нормальный, но меньше стандартного жирного шрифта. */
дел {
  вес шрифта: 600;
}
/* Устанавливаем текст span на один шаг светлее
   чем его родитель. */
охватывать {
  вес шрифта: светлее;
}
 
 Результат 
0
0
04
 Таблицы BCD загружаются только в браузере
 с включенным JavaScript. Включите JavaScript для просмотра данных.
  семейство шрифтов 
  стиль шрифта 
 Основные стили текста и шрифта
  Последнее изменение:   27 сентября 2022 г.  , участниками MDN
 рендеринг текста - вес шрифта: 700 или вес шрифта: полужирный, какой из них мы должны следовать в CSS? 
 спросил
  10 лет, 5 месяцев назад 
 Изменено
 2 года, 7 месяцев назад
 Просмотрено
 45 тысяч раз
 Я видел несколько веб-сайтов, которые упоминали в CSS -  вес шрифта: 700  или  размер шрифта: полужирный  . Но оба результата одинаковы. Какой из них правильный и как мы должны следовать? Пожалуйста, предложите мне.
 CSS
 рендеринг текста
 3
 Вы можете найти полную разбивку всех допустимых значений для  font-weight  в Спецификации уровня 3 модуля шрифтов CSS. В разделе 3.2 (свойство font-weight) мы находим следующий список:
 100 - Thin
 200 - Сверхлегкий (Сверхлегкий)
 300 - светлый
  400 - Обычный 
 500 - Средний
 600 — полужирный (полужирный)
  700 — полужирный 
 800 — очень жирный (сверхжирный)
 900 - Черный (тяжелый)
 Вы, наверное, заметили, что  700  выделено жирным шрифтом. Так что в любом случае вы получите одинаковые результаты. (Единственное другое, которое соответствует номеру, это «обычный» —  400 .)
 Полный список:
  обычный  — То же, что и «400» 
  полужирный  — То же, что и «700» 
  жирнее  — указывает более жирный шрифт, чем унаследованное значение 
  Легче  - Определяет меньший вес, чем унаследованное значение
 На самом деле разницы нет. Это больше о том, к чему вы и ваша команда привыкли.
 3
  вес шрифта  в цифрах лучше, чем по умолчанию  жирный , потому что в цифрах вы можете настроить  жирный  в соответствии с вашими требованиями к дизайну.
 Проверьте это http://www.w3.org/wiki/CSS/Properties/font-weight
 5
 Мой основной ответ такой же, как уже дан дважды, но с правильной ссылкой:
 Они являются синонимами по определению, согласно спецификации CSS 2.1, пункт 15.6. Это авторитетная спецификация.
 Ключевое слово «обычный» является синонимом «400», а «жирный» — синонимом «700».
 Слово  жирным шрифтом  делает код более читаемым, чем цифра  700  , что не имеет интуитивного значения. Число может быть более подходящим для удобочитаемости в ситуациях, когда вы указываете насыщенность шрифта с помощью чисел, чтобы получить насыщенность, для которой нет ключевых слов. Такие ситуации случаются редко, отчасти потому, что вес шрифта, отличный от  400  и  700 , не поддерживается для большинства шрифтов.
 2
 Функционально они равны, но по стилю я бы сказал, выберите один из методов и соблюдайте его: либо вы используете только ключевые слова, либо только числовые идентификаторы. Это упрощает понимание кода CSS.
 Поскольку шрифты имеют гораздо более широкий спектр жирности, чем только  обычные  и  полужирные  , например.  экстра светлый  ,  светлый  ,  книжный  ,  средний  ,  полужирный  ,  черный  ,  экстра черный  , при использовании пользовательских шрифтов обычно невозможно не использовать числовые идентификаторы. В этих ситуациях я думаю, что лучше вообще не использовать  обычный  и  полужирный , используя  400  и  700  вместо этого.
новостейка © 2022
 Спецификация
 Модуль шрифтов CSS Уровень 4 
  # font-weight-prop