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");
      }
   });

Answer 2

请检查您在代码中添加正确的jQuery CDN： -

3.0.x-dev

如果CDN是正确的，那么只需将我发布的脚本替换为： -

脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

剩下的整个代码是正确的。

如何更改输入的字体？

2 个答案: