Использование переменных шрифтов с локальными шрифтами в качестве приоритета ⇐ Html

[Anonymous]

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

Код: Выделить всё

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300 800;
font-stretch: 100%;
font-display: swap;
src: url('../fonts/Open_Sans-variable.woff2') format('woff2') tech(variations);
}
< /code>
Но файл шрифта с цельной переменной довольно большой (например, Open Sans, например, +270 киб), поэтому такие инструменты, как, например, шрифты Google или Fontsource разделили шрифт на несколько подмножества для определенных языков: < /p>
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300 800;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300 800;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.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;
}

Но в обоих этих решениях нет параметра Local () . Я думал, как мы могли бы это сделать, и у меня есть какая-то идея, но я не знаю, хорошая ли это идея./* Local fonts */
@font-face {
font-family: 'Open Sans local';
src:local("Open Sans Light"),
local("OpenSans-Light"),
font-weight: 300;
font-display: swap;
}

@font-face {
font-family: 'Open Sans local';
src:local("Open Sans Regular"),
local("OpenSans-Regular"),
local("Open Sans"),
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: 'Open Sans local';
src:local("Open Sans SemiBold"),
local("OpenSans-SemiBold"),
font-weight: 600;
font-display: swap;
}
/* ... */

/* External fonts */

/* latin-ext */
@font-face {
font-family: 'Open Sans variable';
font-style: normal;
font-weight: 300 800;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v4 ... u1aB.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
font-family: 'Open Sans variable';
font-style: normal;
font-weight: 300 800;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v4 ... -muw.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;
}
< /code>
Тогда мы бы использовали их как: < /p>
body {
font-family: 'Open Sans local', 'Open Sans variable', serif;
}
< /code>
Браузер сначала искал локальные шрифты (которые не являются переменными, но включают каждый язык), тогда, если они не существуют, он попытался бы получить переменные версии для текущего языка. Имеет ли это смысл?


Подробнее здесь: https://stackoverflow.com/questions/796 ... a-priority