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

我有一个使用i18n的双语网站。 i18n在渲染时将类附加到网站的标签上。例如，我有：包含@ font-faces的语言特定的LESS类不起作用

<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'); 
    } 
}

注意，我打电话“哈麦丹-Regular.woff”使用同一个变量名“DIN-交替bold.ttf”，从而使在网站上更换DinAlternateBold的所有实例都是自动的。

但是，它不工作。不管身体类如何，在LESS文件后面声明的任何字体都会加载到页面中。在上面的例子中，网站的阿拉伯语和英语版都加载了Harmattan-Regular.woff。

是否有一些基本的关于字体在CSS/LESS中的表现如何行事？如果是这样，什么才能达到我期待的效果？

需要注意的是，每个字体的确在单独使用时正确加载 - 只有组合时我遇到了问题。

来源

2017-08-14 JBeck

尽管我无法提供解决方案，但这在技术上并非字体问题。它与声明“颜色：红色”和后来在同一选择器的“颜色：蓝色”文件中相同。文件后面的那个是使用的那个。然而，字体的独特之处在于，在这种情况下，src字体文件不是'body.i18n-ar'的属性，而是字体系列“DinAlternateBold”的属性，这就是它被覆盖的原因。 – sn3ll

感谢您的洞察力。 – JBeck

，您可以尝试这样的：

@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更容易和更快的方式。

来源

2017-08-14 15:45:20 boang3000

像这样的方法奏效。谢谢。 – JBeck

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

回答

相关问题