Question

如何检测是否仅使用javascript安装特定字体。（无论是否启用）。

由于

Answer 1

最后一个答案是 11 年前提供的。与此同时，还有一些新的解决方案可供仍在寻找解决方案的人使用：

您可以使用浏览器提供的 FontFaceSet API。它目前仍是一项实验性技术，但已在大多数浏览器（IE 除外）中可用。

From MDN Web Docs

<块引用>

FontFaceSet 的 check() 方法返回给定字体列表中的所有字体是否已加载并可用。

示例：

const fontAvailable = document.fonts.check("16px Arial");

使用 check() 方法时，请确保使用 ready 属性检查字体加载操作是否已完成，加载完成后返回 Promise：

let fontAvailable;
document.fonts.ready.then(() => {
    fontAvailable = document.fonts.check("16px Arial");
});

Answer 2

@Matchu建议你正确但这里是你正在寻找的：

http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/

Answer 3

这里是一种检查字体的设备中是否安装了html页面的解决方案。这个想法是：创建一个极窄的字体，并在CSS中使用数据对象的url定义它，然后使用该字体检查目标字体的宽度。

这里是示例：

<html>
<head>
    <style type="text/css">
        @font-face {
            font-family: '______NONE______';
            src: url('data:application/font-woff;base64,d09GRgABAAAAAAM0AAsAAAAABCQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAABVPUy8yAAABcAAAADwAAABgNVxaOmNtYXAAAAG0AAAAKQAAADQADACUZ2FzcAAAAywAAAAIAAAACP//AANnbHlmAAAB6AAAACQAAAAwK9MKuGhlYWQAAAEIAAAAMwAAADYLo1XbaGhlYQAAATwAAAAcAAAAJP2RAdRobXR4AAABrAAAAAgAAAAIAMn9LGxvY2EAAAHgAAAABgAAAAYAGAAMbWF4cAAAAVgAAAAXAAAAIAAEAAVuYW1lAAACDAAAAQsAAAHwJKxCKHBvc3QAAAMYAAAAEwAAACD/KgCWeNpjYGRgYABi+QdqV+P5bb4ycHMwgMD1GraPEJqz/d80BoZ/PxgygFw2kFoGBgA++AvVAHjaY2BkYGBgBMOUf9MYc/79YACJIAMmAF7xBGN42mNgZGBgYGJgYQDRDFASCQAAAQEACgB42mNgZkhhnMDAysDAOovVmIGBURpCM19kSGMSYmBgAklhBR4+CgoMDgyOQMgIhhlgYUYoCaEZAIdLBiEAZP6WAGT+lnjaY2BgYGJgYGAGYhEgyQimWRgUgDQLEIL4jv//Q8j/B8B8BgBSlwadAAAAAAAADAAYAAB42mNg/DeNgeHfD4YMBmYGBkVTY9F/05IyMhgYcIgDAGnPDrV42oWQzU7CUBCFvwISZcEz3LjSBBoQ/yIrYzTEGEmIYY9QiglS01YMOx/DV+AtPXeophtjmumdOffMmXMH2GdOlaB2ACwUuzwQvi7yCk3d7PIqh794rcTZI+WryOslvMFn0OCJDW9EmjRhqtOxVRwJTXhXpxOa8CrOhJXQY0JhJ3Tocmn5NUt9jhEvxHKTk1kV6YyksNZ/ZnUsxaV0Uh4ZKm65YmycTL2J9J1UQ2l3/sT73JvKxlz0aJXc9Lkzds6NeiNNylWn1u37z0wjFP9UcSH8XFmbZ03JtYmFTu99Xqg4PqSR2Q5+9PxbnBx4Zyu9yP070+ultkPHoNhRmwchsaqpOLbhb0h9RfYAeNpjYGYAg//qDNMYsAAAKDQBwAAAAAAB//8AAg==');
        }
    </style>
    <script type="text/javascript">

        function checkFontAvailable(font) {
            if (!font || font == "______NONE______") {
                return false;
            }
            var context = document.createElement("canvas").getContext("2d");
            context.font = `200px ______NONE______`;
            var originalWidth = context.measureText("A").width;
            context.font = `200px ${font.replace(/^\s*['"]|['"]\s*$/g, "")},______NONE______`;
            return context.measureText("A").width != originalWidth;
        }
    </script>
</head>
</html>

这是测试结果：

checkFontAvailable("微软雅黑333")
false
checkFontAvailable("微软雅黑")
true
checkFontAvailable("arial")
true
checkFontAvailable("arial black")
true

Answer 4

将此代码放在您的javascript文件中的任意位置。

(function (document) {
    var width;
    var body = document.body;
  
    var container = document.createElement('span');
    container.innerHTML = Array(100).join('wi');
    container.style.cssText = [
      'position:absolute',
      'width:auto',
      'font-size:128px',
      'left:-99999px'
    ].join(' !important;');
  
    var getWidth = function (fontFamily) {
      container.style.fontFamily = fontFamily;
  
      body.appendChild(container);
      width = container.clientWidth;
      body.removeChild(container);
  
      return width;
    };
  
    // Pre compute the widths of monospace, serif & sans-serif
    // to improve performance.
    var monoWidth  = getWidth('monospace');
    var serifWidth = getWidth('serif');
    var sansWidth  = getWidth('sans-serif');
  
    window.isFontAvailable = function (font) {
      return monoWidth !== getWidth(font + ',monospace') ||
        sansWidth !== getWidth(font + ',sans-serif') ||
        serifWidth !== getWidth(font + ',serif');
    };
  })(document);

用法

console.log(isFontAvailable('Arial Black'))
// Evaluates true

console.log(isFontAvailable('thisdoesntexists'))
// Evaluates false

来源

https://www.samclarke.com/javascript-is-font-available

Answer 5

你如何做其他人做的事情：用CSS指定字体，并提供回退？没有应用程序应该需要知道可用的字体，也没有可靠的方法。（您可能需要使用字体打印隐藏的div并测量它以查看尺寸是否符合您的预期，但这将非常脆弱。）

请选择：

body { font-family: MyFont, Helvetica, Arial, sans-serif }

如果您希望使用字体做任何事情而不是在其中显示内容，请考虑替代解决方案。

Answer 6

如果您要使用的字体不存在，字体系列声明应足以提供后备。

但是如果您确实需要在您的网站中使用特殊字体，虽然它使用JavaScript，我建议使用Cufon，因为它是最常见的跨浏览器解决方案 - 有一个CSS3修复（字体 - 面部声明），但它在所有浏览器中都不起作用。

Answer 7

如果您绝对需要特定字体，则所有访问者都必须拥有当前浏览器。然后，您可以使用webfonts。

如果这不是一个选项，则必须在服务器上呈现字体并提供图像。

检测是否安装了特定字体

7 个答案: