All geek questions in one place

Determine if a specific font is installed

How to determine if a particular font is installed using only javascript. (Do not pay attention to whether it is turned on or not).

thanks

+7
source share
5 answers

@Matchu suggested you right, but here is what you are looking for:

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

+2
source

Here is a solution to check if the font is installed on your device in an HTML page. The idea is to create a very narrow font and define it in CSS using the URL of the data object, check the width of the target font using this font.

Here is an example:

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> (function () { const context = document.createElement("canvas").getContext("2d"); context.font = "200px SANS-SERIF" const TEXT_TO_MEASURE = "A"; var FONT_WIDTH = context.measureText(TEXT_TO_MEASURE).width; (function () { var style = document.createElement("style"); style.setAttribute("type", "text/css"); style.textContent = '@font-face{font-family:'__DEFAULT_FONT__';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==');}'; document.documentElement.appendChild(style); var handleId = null; (function initailizeDefaultFont() { context.font = "200px __DEFAULT_FONT__"; var width = context.measureText(TEXT_TO_MEASURE).width; if (width != FONT_WIDTH) { FONT_WIDTH = width; cancelAnimationFrame(handleId); } else if (handleId == null) { handleId = requestAnimationFrame(initailizeDefaultFont); } })(); })(); function checkFontAvailable(font) { if (/^\s*SANS-SERIF\s*$/i.test(font)) { return true; } if (!font || font == '__DEFAULT_FONT__') { return false; } context.font = '200px ${font.replace(/^\s*['"]|['"]\s*$/g, "")}, __DEFAULT_FONT__'; var width = context.measureText(TEXT_TO_MEASURE).width; return width != FONT_WIDTH; } this.checkFontAvailable = checkFontAvailable; }).apply(this); console.log([checkFontAvailable("arial black b"), checkFontAvailable("arial black")]); </script> </head> <body> </body> </html>

Here is the test result:

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

The font family declaration should be sufficient to provide a backup if the font you want to use is missing.

But if you really need to use a special font on your site, although it uses JavaScript, I would recommend Cufon , since this is the most cross-browser solution out there - there is a CSS3 fix (font declarations), but it does not work in all browsers yet.

0
source

If you absolutely need a specific font, all your visitors must have current browsers. Then you can use webfonts .

If this is not an option, you should visualize the font on your server and display the image.

0
source

How about you doing what the rest of the world does: specify the font using CSS and suggest backups? No application should ever know which fonts are available, and there is no reliable way to do this. (You may have to print the hidden div in font and measure it to see how much dimensions are expected, but it will be very fragile.)

Just go in:

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

If you want to do something with a font other than displaying things in it, if possible, consider an alternative solution.

-1
source

Source: https://habr.com/ru/post/1310488/

More articles:


All Articles