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 для выбора между ними, вместо того, чтобы называть всех разных членов семейства шрифтов разными именами.». Там также есть ссылка на статью Роджера Джонсона, в которой описывается проблема вашего решения. Кстати, в своих примерах он использует второй вариант. 12 ноя 2021 в 17:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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