0

Есть ли какие-то преимущества второго варианта над первым? В чём отличие? Какой вариант использовать?

Первый вариант:

@font-face { /* Обычное начертание */
  font-family: "Exo";
  src: url("path/to/file.woff2") format("woff2"),
  url("path/to/file.woff") format("woff");
}
@font-face { /* Курсивное начертание */
  font-family: "Exo";
  src: url("path/to/file.woff2") format("woff2"),
  url("path/to/file.woff") format("woff");
  font-style: italic;
}
@font-face { /* Полужирное курсивное начертание */
  font-family: "Exo";
  src: url("path/to/file.woff2") format("woff2"),
  url("path/to/file.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}

Второй вариант:

@font-face { /* Обычное начертание */
  font-family: "Exo";
  src: url("path/to/file.woff2") format("woff2"),
  url("path/to/file.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face { /* Курсивное начертание */
  font-family: "Exo";
  src: url("path/to/file.woff2") format("woff2"),
  url("path/to/file.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face { /* Полужирное курсивное начертание */
  font-family: "Exo";
  src: url("path/to/file.woff2") format("woff2"),
  url("path/to/file.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}

1 ответ 1

0

Лучше загрузите ttf на https://www.fontsquirrel.com/tools/webfont-generator или другой генератор и работайте со сгенерированным кодом.

Подробное введение по работе со шрифтами: https://developer.mozilla.org/ru/docs/Learn/CSS/Styling_text/Web_fonts

1
  • Вы не написали, почему ваше решение лучше, и вообще не ответили на вопрос. Я ознакомился со статьёй, на которую вы оставили ссылку, и вот цитата оттуда: «Если вы импортируете несколько значений толщины одного и того же шрифта вы можете указать какая у них толщина/стиль и затем использовать разные значения font-weight/font-style для выбора между ними, вместо того, чтобы называть всех разных членов семейства шрифтов разными именами.». Там также есть ссылка на статью Роджера Джонсона, в которой описывается проблема вашего решения. Кстати, в своих примерах он использует второй вариант. Commented 12 нояб. 2021 в 17:54

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.