包含@ 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類不起作用

回答

相關問題