В объявлении @font-face
шрифтов многие веб-дизайнеры используют разные сегменты unicode-range
для одного и того же семейства шрифтов.
Назначение этого дескриптора [unicode-range
] позволяет сегментировать ресурсы шрифта так, чтобы браузеру нужно было загружать только ресурсы шрифта, необходимые для текстового содержимого конкретной страницы.
Они делают что-то подобное
/* vietnamese */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: local('Nunito Regular'), local('Nunito-Regular'), url("fonts/XRXV3I6Li01BKofIOuaBXso.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
font-display: fallback;
}
/* latin */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: local('Nunito Regular'), local('Nunito-Regular'), url("fonts/XRXV3I6Li01BKofINeaB.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
font-display: fallback;
}
И действительно, это работает, поскольку браузер загружает только то, что нужно (я тестировал с консолью Google Dev на вкладке network
).
Хотя валидатор CSS W3C выдает это предупреждение:
Redefinition of “font-family”
Есть ли способ избежать предупреждения?