如何提取系统字体并实现为下拉菜单来更改网页上文本的字体

Question

我是Vue js的新手。有没有一种方法可以将系统字体(可以在"C:\Windows\fonts"中找到的字体(提取为字体家族的列表/数组？我如何在Vue js中使用此列表作为下拉列表，用户可以在其中单击以更改网页上文本的字体？

Answer 1

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

检测是否安装了特定字体

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

如何使用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--;
}
}
}
});