css - 在 SCSS 中为不同的语言加载不同的字体

Question

我如何利用 SCSS 功能通过在 css 中使用 &:lang() 加载基于不同语言的不同字体？
我计划在顶部 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";
        ....
    }
}

编辑:看起来unicode范围是解决方案。我很想知道您是否有更好的解决方案。谢谢
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range

Answer 1

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

unicode-range CSS 描述符从 @font-face 定义的字体中设置要使用的特定字符范围。并可在当前页面上使用。如果页面没有使用此范围内的任何字符，则不会下载字体；如果它至少使用一种，则下载整个字体。