Question

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

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

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

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

Answer 1

从Google字体中下载您希望保留在列表中的字体文件，并使用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>");

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

1 个答案: