Правильно ли так задавать шрифт?

Question

[wakenbyWork]

Получил проект в руки на доработку и от увиденного пришел в ступор, и хотел бы узнать норма ли такое делать?

1) Первое удивление у меня вызвало описание шрифтов:

Описание font-family

@font-face {
	font-family: "Noto Sans HK - Regular";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/Noto_Sans_HK/NotoSansHK-Regular.otf") format("opentype");
}

@font-face {
	font-family: "Noto Sans HK - Medium";
	src: url("../fonts/Noto_Sans_HK/NotoSansHK-Medium.otf") format("opentype");
	font-style: normal;
	font-weight: 500;
}

@font-face {
	font-family: "Noto Sans HK - Bold";
	src: url("../fonts/Noto_Sans_HK/NotoSansHK-Bold.otf") format("opentype");
	font-style: normal;
	font-weight: 700;
}

@font-face {
	font-family: Cambria;
	src: url("../fonts/Cambria.ttf") format("truetype");
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: "Cambria - Bold";
	src: url("../fonts/Cambria-Bold.ttf") format("truetype");
	font-style: normal;
	font-weight: 700;
}

Я в первые вижу такое, а проект весьма крупны...

2) Второе это размер шрифта вычисленный через calc:

.class-round {
  font-size: calc(18px + 2 * ((100vw - 320px) / (1920 - 320)));
}

Во многих местах такой размер шрифта, это норма?

Comments

[Антон Литвиненко]

1. отчасти неправильно. Можно и так, но фонт фемили по хорошему должен быть одинаковый для разных начертаний, а разная должна быть жирность. иначе придется везде писать разный фонт фемили. Также указан старый формат, сейчас предпочтительно woff и woff2.
2. наверно допустимо, но слишком непонятно)

[Сергей delphinpro]

Вы правильно понимаете. Это он самый — лютый пц.
Во-первых, семейство указано через задницу.
Во-вторых, используется otf формат, вместо компактного woff2. Про ttf я вообще молчу.

[Сергей delphinpro]

А вот calc для размера — это норм. Это даже отлично в определенных кейсах. Адаптивный подход.

[Aetae]

Первое - ересь, конечно. Могу предположить легаси, где все привыкли к программному болд\италик начертанию обычной версии, а потом понадобились и отдельные начертания, пришлось их в свою family выносить, но врядли.)
Второе - норм, там прослеживается какая-то логика.

Answer 1

[Андрей Федоров]

Никакого 3.14деца тут нет. (Ошибаюсь, есть) Это абс.нормально. (Нет) Google Fonts отдает похожий код. (Не совсем) По второму вопросу - такой расчет нужен для адаптивности, чтобы на мобильных шрифт не был слишком маленьким, а на десктопах слишком большим. Немного устаревший подход с появлением функции clamp, но приемлемый в связи с браузерной поддержкой.

Comments

[Сергей delphinpro]

Не наговаривайте на гугл-фонтс. Он отдает нормальный код. Речь об указании семейства.

[Андрей Федоров]

Сергей delphinpro, не надо эмоций. вот что отдает GF в первом попавшемся под руку проекте.

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/robotocondensed/v19/ieVi2ZhZI2eCN5jzbjEETS9weq8-33mZGCAYag.ttf) format('truetype');
}

Как говориться найди 10 отличий.

Что по вашему не так с семейством? Названия семейства может содержать пробелы, никто не запрещает. Так же никто не запрещает вам для подгружать другие шрифты в семейство для отображения с разной жирностью.

[Сергей delphinpro]

Андрей Федоров, Вы не поняли. Показанное вами - норма.
А вот если найдете примерно такое

@font-face {
  font-family: 'Roboto Condensed Light';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/robotocondensed/v19/ieVi2ZhZI2eCN5jzbjEETS9weq8-33mZGCAYag.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Bold';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/robotocondensed/v19/ieVi2ZhZI2eCN5jzbjEETS9weq8-33mZGCAYag.ttf) format('truetype');
}

Тогда пишите. Посыплю голову пеплом.

[Lynn «Кофеман»]

Андрей Федоров, только у всех весов должно быть одно название и в GF так и есть, а в топике лютый п.

[Андрей Федоров]

Сергей delphinpro, действительно, это странно.

[Lynn «Кофеман»]

Если бы там везде было бы написано "Noto Sans HK", то вопросов бы не было

[Zettabyte]

Сергей delphinpro,

А вот если найдете примерно такое

При относительно беглом просмотре неспециалистом ситуация выглядит как "смешались в кучу кегли, weight'ы":

• У автора вопроса есть "разные семейства-веса с разными файлами";
  
• У Андрей Федоров в примере только 300;
  
• У вас - разные веса, но с одинаковым УРЛом (одним и тем же файлом) в src.
  

Что именно должна была показать эта дискуссия?

[Rustam Bainazarov]

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

[lUser L]

Сергей delphinpro Рустам Байназаров, значит вот это, что я писал везде полный 3.15ец ?)

[Андрей Федоров]

Эмиль 🔥, а GF нельзя пользоваться что ли?

[lUser L]

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

[Rustam Bainazarov]

Эмиль 🔥, с чего бы это? Font family одинаковый, вариативность на уровне font-weight и font-style. Всё правильно.

[Lynn «Кофеман»]

Эмиль 🔥, тут только скорее всего вся эта толпа форматов не нужна. Ну откуда у вас в оффлайне возьмётся legacy ios или IE8, например.

[Ankhena]

Эмиль 🔥, у вас всё отлично.
Но для современных браузеров достаточно woff2 и woff (некоторые уже и woff откидывают). Но это не так много лишних строк на шрифт.

[Сергей delphinpro]

Zettabyte, вы тоже не поняли сути претензий к показзаному автором вопроса коду.

У автора вопроса есть "разные семейства-веса с разными файлами";
У Андрей Федоров в примере только 300;
У вас - разные веса, но с одинаковым УРЛом (одним и тем же файлом) в src.

Андрей Федоров меня недопонял
А я в своих примерах просто скопипастил куски, поправив только то, на что хотел указать (семейство).
Никаких противоречий.

значит вот это, что я писал везде полный 3.15ец ?)

У вас все хорошо.