Как браузер делает шрифт жирным?

Question

[pegas]

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

@font-face {
	font-family: 'AvenirNext';
	font-style: normal;
	font-weight: 400;
	src: url('./fonts/AvenirNext.woff2') format('woff2'), url('./fonts/AvenirNext.woff') format('woff');
}

а потом в стилях устанавливаю жирность:

.title {
    font-family: 'AvenirNext';
    font-weight: bold;
}

То жирность срабатывает! как она может сработать если я подключил обычный не жирный шрифт?

Comments

[Ankhena]

Браузер будет эмулировать жирность (только 700) и курсив. Но эта жирность будет, скорее всего, не такая как задумывалась автором шрифта.

Answer 1

[Lord_Dantes]

Это все равно не та жирность шрифта которая изначально задумана в самом шрифте. Если вы подключите жирный шрифт изначально и сравните его с браузерным вы заметите разницу в качестве обрисовки контура(или это только у меня такой эффект есть). Условно говоря, font-weight: bold почти тоже самое что и <b></b>

Comments

[pegas]

Да, спс, я понял. В @font-face указываем какой фрифт применять в зависимости от стилей. А браузер видать сам умеет делать жирным, по своему.

[Евгений]

pegas, да, браузеры умеют сами имитировать жирность шрифта, но так делать, имхо, не стоит, т.к. в разных браузерах он будет отображаться по-разному
nimbupani.com/fake-bolding-of-web-fonts.html