Использование @ font-family для указания пользовательского шрифта: нужно ли мне использовать их все?

Я экспериментирую с использованием шрифтов IBM Plex otf. Существует несколько шрифтов: Sans, Serif и т. Д. Для одного шрифта имеется 16 файлов (Sans указан здесь). Насколько мне известно, IBM не размещает свои шрифты публично (поэтому я не могу сделать @import или установить ссылку), вместо этого делая их доступными через скачать с github. Это означает, что если вы хотите использовать их на своем сайте, вы должны обслуживать их со своего сайта. (Верно?)

Теперь я могу установить около 80 @font-family ссылок для всех, например эти две для обычного и жирного шрифта:

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://...IBMPlexSans-Medium.otf) format('otf');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://...IBMPlexSans-Bold.otf) format('otf');
}

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


fonts css webfonts
person BobRodes    schedule 12.03.2018    source источник
comment
Я думаю, что более эффективное решение - объединить их в один файл шрифта со всеми вариантами семейства, но я не знаю, как это сделать.   -  person Jeremy    schedule 13.03.2018
comment
Я тоже, и я тоже. Может, кто-то знает. :)   -  person BobRodes    schedule 13.03.2018

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел решение. Плохая новость: да, похоже, что вам нужно сгенерировать весь CSS-шрифт font-face, а это составляет более 3000 строк кода для четырех разных гарнитур. Хорошие новости: на сайте Transfonter.org есть онлайн-инструмент, который сделает это за вас. Он также будет делать такие полезные вещи, как преобразование файлов .otf в файлы .woff, среди ряда других параметров преобразования. Просто загрузите нужные шрифты, нажмите «Конвертировать» и загрузите результат. Результат включает файл css, содержащий весь необходимый @font-family код.

person BobRodes    schedule 13.03.2018