Свойство 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>Желания учиться резко прибавилось.
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;
}
.
Что в задании вам не понравилось?
Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)
Другое (сейчас напишу)
Спасибо! Мы скоро всё исправим)
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
- Для класса
.page-titleзадайте насыщенностьfont-weightсо значениемbold, - а для
h2— со значением400.
Почему какие‑то значения font‑weight в СSS пишут цифрами, а какие‑то словами?
Я не Аня, но попробую ответить.
В ЦСС font-weight отвечает за «жирность» начертания. Задается в числах от 100 до 900:
Чтобы использовать все девять начертаний, шрифт должен их поддерживать. В противном случае браузер будет подбирать ближайшее подходящее начертание из тех, что есть в шрифте.
Бюросанс поддерживает три начертания: тонкое, нормальное и жирное. Бюросайн — вариативный шрифт, поддерживает все начертания.
font‑weight
100
Бюросанс
light
Бюросайн
light
font‑weight
200
Бюросанс
light
Бюросайн
light
font‑weight
300
Бюросанс
light
Бюросайн
light
font‑weight
400
Бюросанс
regular
Бюросайн
regular
font‑weight
500
Бюросанс
regular
Бюросайн
regular
font‑weight
600
Бюросанс
bold
Бюросайн
bold
font‑weight
700
Бюросанс
bold
Бюросайн
bold
font‑weight
800
Бюросанс
bold
Бюросайн
bold
font‑weight
900
Бюросанс
bold
Бюросайн
bold
Чтобы использовать все девять начертаний, шрифт должен их поддерживать.
В противном случае браузер будет подбирать ближайшее подходящее начертание из тех, что есть в шрифте.
Бюросанс поддерживает три начертания: тонкое, нормальное и жирное. Бюросайн — вариативный шрифт, поддерживает все начертания.
Кроме числовых значений поддерживаются ключевые слова: normal, bold, lighter и bolder.
normal — это обычное начертание, синоним font-weight: 400:
font‑weight: 400
font‑weight: normal
bold — жирное начертание, синоним font-weight: 700:
font‑weight: 700
font‑weight: bold
Советую использовать ключевые слова, а не их числовые значения: их проще воспринимать, не нужно запоминать магические числа.
Жирность начертания относительно родителя задаётся с помощью lighter и bolder:
В случае с вариативным шрифтом Сафари и Фаерфокс неправильно обрабатывают lighter, bolder. Сравните искусственную разрядку у font‑weight: lighter от 500 и font‑weight: bolder от 300
В случае с вариативным шрифтом Сафари и Фаерфокс неправильно обрабатывают lighter, bolder.
Сравните искусственную разрядку у font‑weight: lighter от 500 и font‑weight: bolder от 300
Ещё по теме
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Поделиться
Запинить
Твитнуть
Свежак
css — Почему вес шрифта по умолчанию 400?
По причине отсутствия единиц
Толщина шрифта не указана в единице, потому что с увеличением и уменьшением толщины шрифта нет конкретной, идентифицируемой «вещи», которую вы «переворачиваете вверх и вниз». В отличие от размера шрифта, увеличение/уменьшение веса шрифта на компьютерах традиционно не достигалось программно — каждый уровень толщины шрифта должен был создаваться дизайнером вручную как совершенно другой шрифт.
Это связано с тем, что программно изменить толщину шрифта намного сложнее, чем изменить, скажем, размер. Жирный текст не просто добавляет толщину всему символу. Он добавляет контраста, выборочно увеличивая толщину одних частей буквы по сравнению с другими. Обратите внимание на шрифт ниже, как некоторые части буквы «а» становятся очень толстыми с более высоким весом, в то время как другие части той же буквы не увеличиваются так сильно.
Это непросто сделать программно, в основном это приходилось делать вручную, чтобы это выглядело хорошо — типографы создавали несколько разных версий своего шрифта — обычно три — разработчики загружали все три стиля и шрифт CSS Свойство -weight будет настроено только на изменение между этими тремя, обычно на 300, 400 и 700. Это предполагает, что вы хотите настоящий полужирный шрифт/курсив. Фальшивые стили — искусственный полужирный шрифт, искусственный курсив и т. д. — были предоставлены браузерами, но результаты, как правило, были не очень хорошими.
Сейчас все движется к вариативным шрифтам, представленным в 2016 году. Это шрифты, которые специально разработаны, чтобы дать разработчикам полный контроль над атрибутами стиля, такими как вес шрифта и выделение курсивом. По сути, создатели шрифтов создают несколько различных вариаций своего шрифта с разным уровнем насыщенности, а затем компьютер разумно заполняет промежутки между ними, так что у разработчиков теперь есть потенциально бесконечное количество степеней плотности шрифта, которые можно использовать для данного шрифта.
Однако даже с этим изменением трудно определить конкретную, научно измеримую «вещь», которая делает текст более или менее тяжелым. Поэтому я сомневаюсь, что в ближайшее время мы увидим какую-либо не относительную единицу для веса шрифта.
По причине кратности 100 и значения по умолчанию 400
Система основана на системе Linotype, которая была разработана для шрифта Univers в 1957 году. Идея заключалась в том, что вы должны использовать три цифры для указания веса шрифта , ширина и выделение курсивом в указанном порядке.
Так 099 будет очень светлым, очень широким и очень курсивным. 905 будет очень тяжелым, очень сжатым, со средним курсивом. Это просто пример, фактические доступные значения были другими. Люди больше использовали «весовую» часть системы, чем две другие цифры, поэтому вторые две цифры использовались все меньше и меньше, пока они не стали рудиментарными, и люди забыли, что система нумерации использовалась для чего-то другого, кроме указания веса. Было бы действительно разумнее иметь 1-9масштаб для веса шрифта на данный момент, но 100-900 теперь стали обычными.
Я предполагаю, что 400 — это значение по умолчанию просто потому, что оно находится прямо посередине. Я думаю, что они выбрали 400 вместо 500, потому что люди чаще хотят сделать свой текст жирным, чем светлым, поэтому они выбрали значение по умолчанию, которое оставляет для этого больше места.
html — Вес шрифта не работает
спросил
Изменено 1 год, 4 месяца назад
Просмотрено 10 тысяч раз
3
Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.
У меня возникла проблема с работой шрифта с меньшим начертанием. У меня есть шрифт со всеми весами, которые я хочу использовать на своем компьютере, но он не будет работать. Я обнаружил, что многие шрифты не будут работать с меньшим весом. В чем дело?
https://jsfiddle.net/ywr2ks1p/
р{
семейство шрифтов: museo sans;
вес шрифта: 100;
размер шрифта: 50px;
} <дел>привет я какой-то текст
