如何使用jQuery加载目标div的自定义字体

Question

问题：我有一个文本字段（带有类＆＃34; textTochange＆＃34;），我可以在其中输入一些文本然后我有一个选择字段（类＃34; fontCustom＆＃34;）包含自定义字体列表。（.ttf格式的所有字体文件都存储在名为＆＃34; myFonts＆＃34;的目录中）并且有一个div（带有类＆＃34; textToDisplay＆ ＃34;）将通过加载所选的自定义字体系列来显示输入的文本。

加价：

    <input type="text" class="textToChange" />

    <select class="fontCustom">
      <option value="customfontfilename.ttf">Custom Font File Name</option>
      <option value="customfontfilename.ttf">Custom Font File Name</option>
      <option value="customfontfilename.ttf">Custom Font File Name</option>
     </select>

    <div class="textToDisplay">
    </div>

预期解决方案：

我期待一个解决方案，在jQuery的帮助下，使用我的目录中的自定义字体文件（而不是谷歌字体）显示输入的文本。

Answer 1

这就是我接近这个的方法：

1. 将所有网络字体包含在自己的css文件中。 （例如font_1.css，font_2.css ...）
2. 为每个webfont创建一个类
3. 收听选择字段上的更改事件以获取所选字体 $('select').on('change', function() { var fontToLoad = $(this).val(); });
4. 加载所需的css文件$('head').append(pathToCSS);
5. 添加css类$('.textToDisplay').addClass('myFontClass');