JavaScript/CSS Font Detector

最新推荐文章于 2024-07-30 10:56:44 发布

envykok

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量175

点赞数

分类专栏： Javascript 文章标签： fonts javascript function string website browser

Javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

http://www.lalit.org/lab/javascript-css-font-detect

How does it work?

This code works on the simple principle that each character appears differently in different fonts. So different fonts will take different width and height for the same string of characters of same font-size.

We try to create a string with a specified font-face. If the font-face is not available, it takes up the font-face of the parent element. We then compare the width of the string with the specified font-face and width of the string with the font-face of the parent element,

if they are different, then the font exists,

otherwise not.

The string which we will use to generate the widths can be anything. But I guess we use ‘m’ or ‘w’ because these two characters take up the maximum width. And we use a trailing ‘l’ so that the same width fonts-faces can get separated based on the width of l character.

Javascript:

/** * JavaScript code to detect available availability of a * particular font in a browser using JavaScript and CSS. * * Author : Lalit Patel * Website: http://www.lalit.org/lab/jsoncookies * License: Creative Commons Attribution-ShareAlike 2.5 * http://creativecommons.org/licenses/by-sa/2.5/ * Version: 0.15 * changed comparision font to serif from sans-serif, * as in FF3.0 font of child element didn't fallback * to parent element if the font is missing. * Updated: 09 July 2009 10:52pm * */ /** * Actual function that does all the work. Returns an array with all the info. * This test will fail for the font set as the default serif font. * * Usage: d = new Detector(); * d.test('font_name'); */ var Detector = function(){ var h = document.getElementsByTagName("BODY")[0]; var d = document.createElement("DIV"); var s = document.createElement("SPAN"); d.appendChild(s); d.style.fontFamily = "sans"; //font for the parent element DIV. s.style.fontFamily = "sans"; //serif font used as a comparator. s.style.fontSize = "72px"; //we test using 72px font size, we may use any size. I guess larger the better. s.innerHTML = "mmmmmmmmmmlil"; //we use m or w because these two characters take up the maximum width. And we use a L so that the same matching fonts can get separated h.appendChild(d); var defaultWidth = s.offsetWidth; //now we have the defaultWidth var defaultHeight = s.offsetHeight; //and the defaultHeight, we compare other fonts with these. h.removeChild(d); /* test * params: * font - name of the font you wish to detect * return: * f[0] - Input font name. * f[1] - Computed width. * f[2] - Computed height. * f[3] - Detected? (true/false). */ function debug(font) { h.appendChild(d); var f = []; f[0] = s.style.fontFamily = font; // Name of the font f[1] = s.offsetWidth; // Width f[2] = s.offsetHeight; // Height h.removeChild(d); font = font.toLowerCase(); if (font == "serif") { f[3] = true; // to set arial and sans-serif true } else { f[3] = (f[1] != defaultWidth || f[2] != defaultHeight); // Detected? } return f; } function test(font){ f = debug(font); return f[3]; } this.detailedTest = debug; this.test = test; }

HTML:

This table below shows which fonts are present on envykok's system. (I have listed some of the most common and some uncommon fonts.)

Johan Sundström has presented this data in a more interesting and cool layout here. Thanks Johan!

Font Name	Width	Height	Detected?
cursive	558	74	true
monospace	473	77	true
serif	631	72	true
sans-serif	606	81	true
fantasy	383	82	true
default	631	72	false
Arial	606	81	true
Arial Black	744	101	true
Arial Narrow	503	83	true
Arial Rounded MT Bold	631	72	false
Bookman Old Style	702	84	true
Bradley Hand ITC	642	90	true
Century	663	87	true
Century Gothic	685	87	true
Comic Sans MS	580	101	true
Courier	440	65	true
Courier New	473	77	true
Georgia	651	82	true
Gentium	631	72	false
Impact	580	87	true
King	631	72	false
Lucida Console	473	72	true
Lalit	631	72	false
Modena	631	72	false
Monotype Corsiva	467	85	true
Papyrus	464	114	true
Tahoma	616	87	true
TeX	631	72	false
Times	570	81	true
Times New Roman	570	81	true
Trebuchet MS	621	90	true
Verdana	721	86	true
Verona	631	72	false

envykok

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript/CSS Font Detector

http://www.lalit.org/lab/javascript-css-font-detectHow does it work?This code works on the simple principle that each character appears differently in different fonts. So different fonts will take different width and height for the same string of character
复制链接

扫一扫

专栏目录