使用javascript检查浏览器对字体的支持

Check Browser support for a Font using javascript

本文关键字：字体 支持 浏览器 javascript 检查 使用      更新时间：2023-09-26

我有一个要求，用户需要使用Javascript从指定字体列表中选择一个字体。我这里有两个选项：

1-在下拉列表中提供字体列表。但这里的问题是如何获得特定浏览器的列表。

2-允许用户在文本框中输入字体名称。这里的问题是如何验证浏览器是否支持输入的字体名称。

我需要帮助检查是否有任何API可以用来检查浏览器支持的字体。

从Google font下载您想要保存在列表中的字体文件，并使用js加载该字体。使用Jquery

$("head")
.prepend("<style type='"text/css'" id='"selected_font'">" +
    "@font-face {'n" +
    "'tfont-family: '"myFont'";'n" +
    "'tsrc: url('location/To/Your/Font.otf') ;'n" +
    "}'n" +
    "'tp.myClass {'n" +
    "'tfont-family: myFont !important;'n" +
    "}'n" +
    "</style>");

当用户从下拉列表中更改字体时，删除此样式元素

$('#selected_font').remove();

并再次附加具有所选字体名称和路径的样式标签

 $("head")
    .prepend("<style type='"text/css'" id='"selected_font'">" +
        "@font-face {'n" +
        "'tfont-family: '"myNewFont'";'n" +
        "'tsrc: url('location/To/Your/newFont.otf') ;'n" +
        "}'n" +
        "'tp.myClass {'n" +
        "'tfont-family: myNewFont !important;'n" +
        "}'n" +
        "</style>");
相关文章：