代码之家 › 专栏 › 技术社区 › Web Logic

检测是否安装了特定字体

fonts javascript

Web Logic · 技术社区 · 15 年前

如何仅使用javascript检测特定字体是否已安装。(不管是否启用)。

谢谢

5 回复 | 直到 6 年前

Sarfraz 15 年前

@Matchu向你提出了正确的建议,但你需要的是:

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

dexiang 6 年前

这里有一个解决方案来检查您的设备中是否安装了HTML页面中的字体。其思想是:创建一个非常窄的字体,并用数据对象URL在CSS中定义它,用这个字体检查目标字体的宽度。

示例如下:

<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

Matchu 15 年前

如果你只是做世界上其他地方做的事情:用css指定字体,并提供回退?任何应用程序都不应该需要要知道有什么字体可用,也没有可靠的方法。(您可能需要用字体打印隐藏的DIV,并测量它,以查看尺寸是否符合您的预期,但这将是非常脆弱的。)

去寻找:

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

如果您希望对字体进行任何操作,而不是尽可能在其中显示内容,请考虑另一种解决方案。

Seb 15 年前

字体系列声明应足以在不存在要使用的字体时提供回退。

但是如果你真的需要在你的站点中使用一种特殊的字体,尽管它使用的是JavaScript,我建议你 Cufon 因为它是最跨浏览器的解决方案——有一个CSS3修复程序(字体声明),但它还不能在所有浏览器中工作。

Aaron Digulla 15 年前

如果您绝对需要特定的字体,那么您的所有访问者都必须有当前的浏览器。然后你可以用 webfonts .

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