如何提取系统字体并以下拉方式实现以更改网页上文本的字体？

Question

我是Vue js的新手。是否有方法将系统字体(您可以在“C：\Windows\ fonts”中找到)提取为字体系列的列表/数组？在Vue js中，用户单击以更改网页上文本的字体，我如何使用该列表作为下拉列表？

Answer 1

显然，出于安全原因，您无法从网页访问系统字体目录，但您可以使用巧妙的技巧来测试特定字体是否可用。

Detect whether a particular font is installed

然后实现这个下拉菜单解决方案。

How can I make a dropdown menu for font families using vue js?

检查组件“挂载”时找到了哪些字体

new Vue({
   el: '#app',
   data: {
      focused_font:'',
      available_fonts: ["Pacifico", "Dancing Script", "Shadows Into Light", "Lobster", "Anton", "Indie Flower", "Charmonman", "Kodchasan", "Notable", "Mali", "Srisakdi", "Slabo"]
   },
   mounted: function () {
      for (let a = 0; a < this.available_fonts.length; a++) {
         if (!isFontAvailable(this.available_fonts[a])) {
            this.available_fonts.splice(a, 1);
            a--;
         }
      }
   }
});