Как работает FontFace?

Question

[SuperProshka]

Добрый день!
Я разбираюсь с тем, как устроены шрифты, чтобы дать возможность выбирать их в своем web редакторе.
Я взял гарнитуру Roboto https://fonts.googleapis.com/css2?family=Roboto:it...
В ней много шрифтов (в моем понимании woff2 файлов).
Далее я с помощью FontFace (doc) добавляю только один шрифт из гарнитуры Roboto:

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Добавляю так:

loadFontToDocument(fontFamily: string, src: string) {
        return new Promise<FontFace>(function(resolve, reject) {
            const font = new FontFace(fontFamily, "url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2)");
            font.load().then(function(loadedFont) {
                document.fonts.add(loadedFont);
                resolve(font);
            }).catch(function(_error) {
                reject("document font loading error. Source " + src);
            })

            setTimeout(() => {
                reject("document font loading timed out. Source " + src);
            }, 10000);
        });
    }

После этого на web страничке я могу выставить font-family Roboto для какого-нибудь текста.
НО: я также могу выставить font-style italic, хотя в гарнитуре Roboto (по первой ссылке) для него есть отдельный woff2
Вопрос: зачем тогда нужен отдельный отдельный FontFace блок если и без него все работает?
И как понять какой font-weight и font-style можно позволять выставлять для выбранного шрифта.

Comments

[Ankhena]

зачем тогда нужен отдельный отдельный FontFace блок если и без него все работает?

А возьмите какой-нибудь шрифт поинтереснее.

Если вы попросите браузер сделать текст жирным (700) или италиком, то он сам сгенерирует это начертание путем банальной прибавки жирности или наклона. Но дизайнерские шрифты могут выглядеть совсем не так.
В этом и разница.

font-weight: 100 900;

Для разной жирности нужно подключать разные файлы шрифтов. Иначе текст будет выглядеть одинаково.

[SuperProshka]

При формировании строки font в css есть набор параметров
Я хочу давать возможность выбирать щрифт + задавать жирность и выставлять italic/normal если это поддерживается шрифтом.
Допустим я беру семейтво Roboto. У него есть разные шрифты (файлы woff2).
Правильно ли я понимаю, что, не учитывая самодеятельность браузера, шрифт, заданный woff2, поддерживает только те font-weight, font-style, которые указаны в его FontFace?
И еще такой вопрос:
Сам файл шрифта, судя по всему, не однозначно задает очертания глифов, а условно принимает параметры (weight например), так? Как понять что задает файл шрифта и какое множество параметров он поддерживает?

[Ankhena]

Правильно ли я понимаю, что, не учитывая самодеятельность браузера, шрифт, заданный woff2, поддерживает только те font-weight, font-style, которые указаны в его FontFace?

Нет.
font-face задает соответствие этих параметров в css и файла шрифта.
Т.е. в font-face можно указать жирность 900 и указать файл 400.woff2
Тогда параграф, котором задали font-weight 900 будет выглядеть как текст обычной жирности (400). Потому что мы сказали браузеру взять именно этот файл, если нужна жирность 900.

Как понять что задает файл шрифта и какое множество параметров он поддерживает?

Думаю, что нужно загуглить тему создания шрифтов. Тема интересная и обширная, перепечатывать сюда не имеет смысла.
Сначала про те, которые состоят из семейства файлов, потом вариативные, состоящие из одного файла. У Roboto как раз есть вариативный вариант Roboto Flex.