Загрузить другой шрифт для разных языков в SCSS

Как использовать функцию SCSS для загрузки другого шрифта на основе другого языка с помощью &:lang() в css? Я планирую использовать его таким образом в верхней файловой цепочке scss. Как вы думаете, это правильно?

//Default font-family it's not Japan language
    @font-face {
        font-family: "xxx";
        font-style: normal;
        font-weight: normal;
        src: url('xxx.eot');
        src: local(xxx), 
        url("xxx.eot?#iefix") format("embedded-opentype"), 
        url("xxx.woff") format("woff"), 
        url("xxx.ttf") format("truetype"), 
        url("xxx.otf") format("opentype"), 
        url("xxx.svg#xxx") format("svg");
    }

//If Japanese then
html:lang(ja) {
    @font-face {
        font-family: "Meiryo";
        font-style: normal;
        font-weight: normal;
        src: url('Meiryo.eot');
        src: local(Meiryo), 
        url("Meiryo.eot?#iefix") format("embedded-opentype"), 
        url("Meiryo.woff") format("woff"), 
        url("Meiryo.ttf") format("truetype"), 
        url("Meiryo.otf") format("opentype"), 
        url("Meiryo.svg#Meiryo") format("svg");
    }
}

РЕДАКТИРОВАТЬ: приведенный выше код распечатывается без ошибок. Это должно было быть ошибкой от scss

@font-face {
    html:lang(jp) {
        font-family: "Meiryo";
        ....
    }
}

РЕДАКТИРОВАТЬ: похоже, что диапазон юникода - это решение. Я хотел бы знать, если у вас есть лучшее решение. Спасибо https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range


css sass lang
person user2734550    schedule 11.11.2016    source источник
comment
Можете ли вы показать какие-либо попытки? Пока не работал с :lang(), но выглядит довольно просто: w3.org/International/questions/qa-css-lang.en   -  person lynx    schedule 11.11.2016
comment
Свойство AFAIK @font-face не будет работать таким образом, но вы можете включить все свои шрифты и выбрать, какой из них используется везде, где вы укажете font-family. Современные браузеры не будут загружать шрифт, если он не используется на странице.   -  person Denis Sheremet    schedule 11.11.2016
comment
Я надеялся, что у меня будет лучший способ обрабатывать разные шрифты, используя оператор IF с переменными. Вышеупомянутый метод работает, но он также загружает шрифт xxx по умолчанию для японского сайта, который не нужен. Однако шрифт xxx используется во многих других языках.   -  person user2734550    schedule 11.11.2016
comment
Вы можете получить предпочтительный язык из браузера и выбрать определенный файл css/scss. Не могли бы вы сказать мне, какой язык вы используете? (PHP, JS, ...)   -  person Patrick Mlr    schedule 11.11.2016
comment
Я использую пхп. Я не думаю, что JS - это решение.   -  person user2734550    schedule 11.11.2016

Ответы (1)


arrow_upward
1
arrow_downward 

//If Japanese then
@font-face {
   .......
   unicode-range: 3000-303f;
}

Дескриптор CSS unicode-range устанавливает определенный диапазон символов, которые будут использоваться из шрифта, определенного @font-face и доступного для использования на текущей странице. Если на странице не используется ни один символ из этого диапазона, шрифт не загружается; если он использует хотя бы один, загружается весь шрифт.

person Harutyun Harutyunyan    schedule 07.11.2020