Question

如何利用SCSS功能在css中使用＆amp;：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范围的CSS描述符根据@font-face定义的字体设置要使用的特定字符范围，并可以在当前页面上使用。如果页面在此范围内未使用任何字符，则不会下载字体；如果至少使用一种字体，则会下载整个字体。

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

1 个答案: