選擇語言時使用自定義字體。

Question

我有一個正在建立的網站的語言切換器，它似乎按預期工作。 但是，當用戶選擇特定語言時，我正在嘗試使用自定義字體。 例如; 當用戶選擇法語時，我希望字體切換為“ Ubuntu title”字體。 我希望其他兩種語言（英語和西班牙語）使用默認的系統字體。 字體存儲在本地（暫時）。 這是字體的鏈接： http : //www.cufonfonts.com/zh-CN/font/448/ubuntu-titling這是到目前為止的內容：

 $('[lang="fr"]').hide(); $('[lang="sp"]').hide(); //retrieve value from localstorage let savedLang = localStorage.getItem('lang') //we check if the value is present if(savedLang){ let element = document.querySelector(`option[value='${savedLang}']`); element.selected = true selectText(savedLang); } $('#lang-switch').change(function () { var lang = $(this).val(); localStorage.setItem('lang', lang); selectText(lang); }) function selectText(lang){ switch (lang) { case 'en': $('[lang]').hide(); $('[lang="en"]').show(); break; case 'fr': $('[lang]').hide(); $('[lang="fr"]').show(); break; case 'sp': $('[lang]').hide(); $('[lang="sp"]').show(); break; default: $('[lang]').hide(); $('[lang="en"]').show(); } } 

 [lang="fr"],[lang="sp"]{display:none;} @font-face { font-family: 'UbuntuTitling-Bold'; font-style: normal; font-weight: normal; src: local('UbuntuTitling-Bold'), url('UbuntuTitling-Bold.woff') format('woff'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Change language</p> <select id="lang-switch"> <option value="en">English</option> <option value="fr">French</option> <option value="sp">Spanish</option> </select> <p lang="en">Hello!</p> <p lang="fr">Bojour!</p> <p lang="sp">Hola!</p> 

Answer 1

CSS中的[lang =“ fr”]選擇器覆蓋字體屬性是否足夠？

[lang="fr"],[lang="sp"]{display:none;} 
@font-face {
font-family: 'UbuntuTitling-Bold';
font-style: normal;
font-weight: normal;
src: local('UbuntuTitling-Bold'), url('UbuntuTitling-Bold.woff') format('woff');
}

[lang="fr"] {
    font-family:'UbuntuTitling-Bold';
}