在 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 定义的字体并可在当前页面上使用。如果页面不使用此范围内的任何字符，则不会下载字体；如果至少使用一个，则下载整个字体。

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

Load different font for different languages in SCSS

css

sass

lang