• JavaScript / CSS字体探测器


    JavaScript code to detect available availability of a particular font in a browser using JavaScript and CSS.

    我写了一个JavaScript代码,可以用来猜测如果一个特定的字体是在一台机器中。这可能是类似桌面的Web应用程序开发时,要提供不同的皮肤或字体的喜好自己的用户的帮助。这也可能是博客的皮肤设计者可以提供有关他们的机器的字体列表的不同用户的不同字体的帮助。设计师不必依赖像宋体,Verdana或宋体常见的字体由于越来越多的用户数量新的作业系统/应用现代化的电脑,他们很可能有一个他们的机器多种常见的字体

    How does it work?

     

    代码在简单的原则,即每个字符出现不同的方式在不同的字体。因此,将采取不同的字体相同字体大小相同的字符的字符串不同的宽度和高度。


    Widths of same text in different fonts

    我们努力创建一个指定的字体面对面的字符串。如果字体面对的是不可用,它占用了父元素的字体然后,我们比较字符串以指定的字体字体父元素的字符串宽度,如果它们是不同的然后字体存在,否则不是。

    该字符串,我们将使用产生的宽度可以是任何东西。但我想我们用''或'w',因为这两个汉字占用的最大宽度。我们用一个结尾的'',这样的宽度相同的字体可以得到分离的基础上,字符的宽度。

    我已经测试在Firefox2,3,3.5的IE6中,IE浏览器7,Opera 9中,歌剧10。

    立即更新工程对戏曲9.10。它要求执行该脚本后,其完全加载。我想,Opera不能计算偏移的宽度,直到所有的家长完全加载。

    更新(7月10日- 09)修正了在Firefox3测试失败的问题改为无衬线字体比较衬线FF3.0字体子元素的脸,没有后援到字体如果面对父元素的字体子元素的脸不见了。


    可以测试任何字体的位置:

    1. // Usage
    2. var detective = new Detector();
    3. 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
  • 相关阅读:
    Vue.js
    Vue.js
    Vue.js
    Vue.js
    webpack(1)
    webpack(2)
    babel-loader7和babel8版本的问题
    [JZOJ4274] 终章-剑之魂
    [JZOJ427] 圣章-精灵使的魔法语
    BZOJ题表(红色表示已完成)
  • 原文地址:https://www.cnblogs.com/gredswsh/p/1930857.html
Copyright © 2020-2023  润新知