javascript - 如何更改输入的字体？

Question

我需要使用复选框切换输入标记的字体，我尝试使用 javascript 和 @font-face 来实现此目的。

html:

<form action="#" method="post">

<input id="comment-input" type="text" class="form-control input-sm" placeholder="Press enter to post comment">                  

<span class="input-group-addon sinhala">
Sinhala 
<input type="checkbox" aria-label="..." value="si" id="sinhala-toggle-checkbox">
</span>


<button type="button" class="btn btn-sm" data-toggle="tooltip" title="" data-original-title="Mark as read">Post</button>

</form>

<script>
$("#sinhala-toggle-checkbox").click(function(){
$("#comment-input").toggleClass("sinhala");
});
</script>

CSS:

@font-face {font-family: sinhala;
  src: url("malithi_web.ttf") format("truetype");
}

.sinhala[type='text']{
    font-family: "Malithi web" !important;
    font-size:16px;
    font-style:normal;
}

Answer 1

您可以将新字体放在不同的类别中。然后切换这个类。

    .newFontClass{
      font-family: "Some-New-Font" !important;
    }

    $("#sinhala-toggle-checkbox").click(function(){    
       if( $(this).is(':checked') ) {
          $("#comment-input").addClass("newFontClass");
       }else{
         $("#comment-input").removeClass("newFontClass");
      }
   });