Question

我有一个功能，允许用户更改div内部文本的字体系列，它有点工作。我会尝试解释有什么问题，希望你会理解。

用户点击字体并选择“Arial Black”
点击div，字体更改。
用户点击“Times New Roman”点击div，字体更改。
用户点击谷歌字体“Lato”点击div，字体更改。
用户点击字体“Arial Black”点击div，没有任何反应（我做了此时，console.log以及font和font2都是未定义的。

有当用户选择“Arial”并单击div时，才会再次开始工作。

var originalFont = $('#fonts1').data('font');
var originalgFont = $('#googlefonts1').data('font');
var originalsFont = $('#fontsizes1').data('fontsize');
var originalColor = $('#colorChoice').css('background', 'white');
var textColor =$('#textColor').css('color', 'black');
var font;
    $("#fonts1").on("change", function() {
            font = $(this).val();
    });
    $("#content-link2").on("click", "*", function() {
            $(this).css('font-family', font);
            console.log(font);
            font = originalFont;
    });
    var font2;
        $("#googlefonts1").on("change", function() {
            font2 = $(this).val();
    });
    $("#content-link2").on("click", "*", function() {
            $(this).css('font-family', font2);
            console.log(font2);
            font2 = originalgFont;
    });

加载字体隐藏字体

    <button style="display: none" onclick="$('#googlefonts1').bfhgooglefonts({font: 'Lato'})" id="googleShow" class="btn btn-primary form-control margin hide_all">Google fonts</button>
    <button style="display: none" class="btn btn-primary form-control margin hide_all" id="googleHide">Hide Google</button>
    <select title="Choose a font and then click on any box" style="display: none" id="googlefonts1" class="form-control margin hide_all"></select>

在页面上更改font-family

0 个答案: