在选择语言时使用自定义字体。答案

【问题标题】：Use custom font upon language selection.在选择语言时使用自定义字体。
【发布时间】：2018-04-12 17:44:48
【问题描述】：

我有一个用于我正在构建的网站的语言切换器，它似乎可以按预期工作。但是，当用户选择特定语言时，我会尝试使用自定义字体。例如;当用户选择法语时——我希望字体切换到“Ubuntu 标题”字体。其他两种语言（英语和西班牙语）我希望他们使用默认的系统字体。字体存储在本地（现在）。这是字体的链接：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>

【问题讨论】：

如果您只是在body 上切换一个设置您想要的字体的类会更容易吗？

标签： javascript css fonts

【解决方案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';
}

【讨论】：