Есть ли отличия между этими видами подключения шрифтов?

Question

[Nikita Shchypylov]

И так, как я подключаю шрифт на страницу:

@font-face {
	font-family: 'HelveticaNeue-Bold';
	src: url('fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
	url('fonts/HelveticaNeue-Bold.svg#HelveticaNeue-Bold') format('svg'),
	url('fonts/HelveticaNeue-Bold.woff') format('woff'),
	url('fonts/HelveticaNeue-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeue';
	src: url('fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype'),
	url('fonts/HelveticaNeue.svg#HelveticaNeue-Bold') format('svg'),
	url('fonts/HelveticaNeue.woff') format('woff'),
	url('fonts/HelveticaNeue.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

Потом создаю переменные:

$font_regular: 'HelveticaNeue', sans-serif;
$font_bold: 'HelveticaNeue-Bold', sans-serif;

Как предлагает сделать коллега:

@font-face {
	font-family: 'HelveticaNeue';
	src: url('fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
	url('fonts/HelveticaNeue-Bold.svg#HelveticaNeue-Bold') format('svg'),
	url('fonts/HelveticaNeue-Bold.woff') format('woff'),
	url('fonts/HelveticaNeue-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeue';
	src: url('fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype'),
	url('fonts/HelveticaNeue.svg#HelveticaNeue-Bold') format('svg'),
	url('fonts/HelveticaNeue.woff') format('woff'),
	url('fonts/HelveticaNeue.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

То есть, одинаковые названия font-family, а уже потом в коде добавлять font-weight. Как способ лучше?И есть ли между ними разница в отображении?

Answer 1

[iBird Rose]

просто второй сделан для удобства и стандартизации. к примеру когда ты подключаешь шрифты гугла. ты прописываешь к примеру font-family: 'PT sans'; и все. дальше уже если нужен bold - пишешь font-weight: bold; если италик - font-style: italic;
а при первом варианте тебе нужно менять font-family, что не очень удобно для кого-то. а для некоторых вообще не понятно.

Answer 2

[doctorcat]

я предпочитаю первый в связи с большей читабельностью в последствии, проще название увидеть в коде. Вторым не пользовался, отличия? Создай файл и в нём подключи всё это к 4 дубликатам одной стройки. и сам увидишь различия. И вообще всегда если верстаешь сначала проверяй все шрифты именно таким образом. На одинаковых строках.

Answer 3

[Алекс Глебов]

это как удобнее, переменную менять или font-weight
но иногда у шрифта не только bold и regular, а куча всяких вариаций

еще про форматы и их оптимизацию можно тут почитать, многое узнаете.
https://developers.google.com/web/fundamentals/per...