JavaScript code to detect available availability of a particular font in a browser using JavaScript and CSS.
我写了一个JavaScript代码,可以用来猜测如果一个特定的字体是在一台机器中。这可能是类似桌面的Web应用程序开发时,要提供不同的皮肤或字体的喜好自己的用户的帮助。这也可能是博客的皮肤设计者可以提供有关他们的机器上的字体列表的不同用户的不同字体的帮助。设计师不必依赖像宋体,Verdana或宋体最常见的字体。由于越来越多的用户数量有新的作业系统/应用现代化的电脑,他们很可能有一个在他们的机器等多种常见的字体。
How does it work?
此代码在简单的原则,即每个字符出现不同的方式在不同的字体。因此,将采取不同的字体相同的字体大小相同的字符的字符串不同的宽度和高度。
我们努力创建一个指定的字体面对面的字符串。如果字体,面对的是不可用,它占用了父元素的字体面。然后,我们比较字符串以指定的字体面和与字体父元素的字符串宽度宽脸,如果它们是不同的,然后字体存在,否则不是。
该字符串,我们将使用产生的宽度可以是任何东西。但我想我们用'米'或'w',因为这两个汉字占用的最大宽度。我们用一个结尾的'升',这样的宽度相同的字体,可以得到分离面的基础上,升字符的宽度。
我已经测试在Firefox2,3,3.5的IE6中,IE浏览器7,Opera 9中,歌剧10。
立即更新工程对戏曲9.10。它要求执行该脚本后,其完全加载。我想,Opera不能计算偏移的宽度,直到所有的家长完全加载。
更新(7月10日- 09)修正了在Firefox3测试失败的问题。改为无衬线字体比较衬线在FF3.0字体的子元素的脸,没有后援到字体,如果面对的父元素的字体的子元素的脸不见了。
您可以测试任何字体的位置:
// Usage var detective = new Detector(); alert(detective.test('font name'));
Fonts on your computer
Font Name | Width | Height | Detected? |
---|---|---|---|
cursive | 580 | 101 | true |
monospace | 473 | 77 | true |
serif | 570 | 81 | true |
sans-serif | 606 | 81 | true |
fantasy | 570 | 81 | false |
default | 570 | 81 | false |
Arial | 606 | 81 | true |
Arial Black | 744 | 101 | true |
Arial Narrow | 503 | 83 | true |
Arial Rounded MT Bold | 570 | 81 | false |
Bookman Old Style | 702 | 84 | true |
Bradley Hand ITC | 570 | 81 | false |
Century | 663 | 87 | true |
Century Gothic | 570 | 81 | false |
Comic Sans MS | 580 | 101 | true |
Courier | 440 | 65 | true |
Courier New | 473 | 77 | true |
Georgia | 651 | 82 | true |
Gentium | 570 | 81 | false |
Impact | 580 | 87 | true |
King | 570 | 81 | false |
Lucida Console | 473 | 72 | true |
Lalit | 570 | 81 | false |
Modena | 570 | 81 | false |
Monotype Corsiva | 467 | 85 | true |
Papyrus | 570 | 81 | false |
Tahoma | 616 | 87 | true |
TeX | 570 | 81 | false |
Times | 570 | 81 | false |
Times New Roman | 570 | 81 | false |
Trebuchet MS | 621 | 90 | true |
Verdana | 721 | 86 | true |
Verona | 570 | 81 | false |