包含@font-faces 的特定语言 LESS 类不起作用

Question

我有一个使用 i18n 的双语网站。呈现时，i18n 将 classes 附加到网站的和标签。例如，我有：

<html class="en">
  <body class="i18n-en">
  </body>
</html>

并且当用户切换语言时，呈现如下：

<html class="ar>
  <body class="i18n-ar">
  </body>
</html>

我创建了一个 LESS 文件，它以编程方式加载不同的字体以在加载阿拉伯语版本的站点时替换英语默认字体，如下所示：

body.i18n-en {
    @font-face {
        font-family: 'DinAlternateBold';
        src: url('../fonts/din-alternate-bold.ttf') format('truetype');
    }
}

body.i18n-ar {
    @font-face {
        font-family: 'DinAlternateBold';
        src: url('../fonts/Harmattan-Regular.woff') format('woff');
    }
}

请注意，我使用与 "din-alternate-bold.ttf" 相同的变量名称调用 "Harmattan-Regular.woff"，以便自动替换站点上所有 DinAlternateBold 实例。

但是，它不起作用。无论正文的 class 是什么，无论稍后在 LESS 文件中声明哪种字体都会加载到页面中。在我上面介绍的案例中，网站的阿拉伯语和英语版本都在加载 Harmattan-Regular.woff.

关于 CSS/LESS 中字体的行为方式是否有我遗漏的基本内容？如果是这样，什么是实现我正在寻找的效果的正确方法？

需要注意的是，每种字体 在单独使用时 都能正确加载——只有组合使用时我才运行遇到问题。

Answer 1

你可以这样试试：

@font-face {
    font-family: 'din-alternate-bold';
    src: url("../fonts/din-alternate-bold.eot?-gqzqge");
    src: url("../fonts/din-alternate-bold.eot?#iefix-gqzqge") format("embedded-opentype"), 
         url("../fonts/din-alternate-bold.ttf?-gqzqge") format("woff"), 
         url("../fonts/din-alternate-bold.ttf?-gqzqge") format("truetype"), 
         url("../fonts/din-alternate-bold.svg?-gqzqge#din-alternate-bold") format("svg");
    font-weight: normal;
    font-style: normal
}

body.i18n-ar {
    font-family: 'din-alternate-bold';
}

您可以尝试生成您的字体 here 以更简单快捷。

包含@font-faces 的特定语言 LESS 类不起作用

Language-specific LESS classes which contain @font-faces not working

css

multilingual

fonts

internationalization

less

包含@font-faces 的特定语言 LESS 类 不起作用

Language-specific LESS classes which contain @font-faces not working

css

multilingual

fonts

internationalization

less

包含@font-faces 的特定语言 LESS 类不起作用