javascript - 选择语言时使用自定义字体。

Question

我有一个用于我正在构建的网站的语言切换器，它似乎按预期工作。但是，当用户选择特定语言时，我正在尝试使用自定义字体。例如;当用户选择法语时——我希望字体切换为“Ubuntu title”字体。其他两种语言(英语和西类牙语)我希望它们使用默认的系统字体。字体存储在本地(目前)。这是字体的链接:http://www.cufonfonts.com/en/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';
}