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

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

1 个答案: