Classes LESS propres à la langue qui contiennent @ font-faces ne fonctionnent pas

J'ai un site bilingue utilisant i18n. i18n attache des classes aux balises et du site quand il rend. Par exemple, j'ai:Classes LESS propres à la langue qui contiennent @ font-faces ne fonctionnent pas

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

Et lorsque l'utilisateur passe langues, ce qui suit Renders:

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

J'ai créé un fichier MOINS qui charge par programme une police différente pour remplacer la police par défaut Anglais lorsque la version arabe des charges du site, comme suit:

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

Notez que j'appelle « -harmattan Regular.woff » avec le même nom de la variable « din-alternatif-bold.ttf », de sorte que la le remplacement de toutes les instances de DinAlternateBold sur le site est automatique.

Cependant, cela ne fonctionne pas. Quelle que soit la police déclarée plus tard dans le fichier LESS, elle est chargée sur la page, quelle que soit la classe du corps. Dans le cas que j'ai présenté ci-dessus, les deux versions arabe et anglaise du site sont en charge Harmattan-Regular.woff.

Y a-t-il quelque chose de fondamental sur le comportement des polices en CSS/LESS qui me manque? Si oui, quelle serait la bonne façon d'obtenir l'effet que je recherche?

Il est à noter que chaque police charge correctement lorsqu'il est utilisé seul - c'est seulement en combinaison que je rencontre des problèmes.

Source

2017-08-14 JBeck

Bien que je ne puisse pas offrir une solution, ce n'est pas techniquement un problème de police. C'est la même chose que de déclarer "color: red" et plus tard dans le fichier "color: blue" pour le même sélecteur. Celui plus tard dans le fichier est celui qui est utilisé. Ce qui est unique aux polices cependant, dans ce cas le fichier de police src n'est pas une propriété de 'body.i18n-ar', mais de la famille de polices" DinAlternateBold ", c'est pourquoi il est écrit. – sn3ll

Merci pour la perspicacité. – JBeck

Vous pouvez l'essayer comme ceci:

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

Vous pouvez essayer de générer votre police here pour la manière plus facile et plus rapide.

Source

2017-08-14 15:45:20 boang3000

Une telle approche a fonctionné. Je vous remercie. – JBeck

Classes LESS propres à la langue qui contiennent @ font-faces ne fonctionnent pas

Répondre

Questions connexes