Javascript 或CSS获取客户浏览器支持的字体

作者 FarLee 2016年7月22日 14:27:39   ‖浏览(4,175)

如何用JS或CSS获取用户系统的浏览器支持哪些字体呢? 比如下面的font, 最终显示了哪个, 有什么方法显示出一个支持列表?
因为如果判断用户系统不支持某个字体的话, 则提示用户去下载该字体;

<style>
    body {
        font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',Arial,sans-serif;
    }
</style>

最初尝试用javascript的 document.getElementById('isId').style.font 获取字体没有效果;

Lalit Patel 提到了一个比较好的方法, 可以判断系统中是否存在某种字体;

它的原理巧妙之处在于: 对于同一font-size大小的相同字符串, 使用不同字体该字符串的宽度和高度是不一样的;
如果某个字体不存在, 那么它就会使用上一级字体, 那么该字符串的宽度和高度就会和使用上一级字体的宽度一样;
如果某个字体存在, 那么它和使用上一级字体的同一字符串的宽度相比, 就会是不同的;

比如下面两个进行比较:

<span style="font-family: monospace; font-size: 72px;">http://h.farll.com</span>
<span style="font-family: 'Microsoft YaHei', monospace; font-size: 72px;">http://h.farll.com</span>

如果第二行的宽度和第一行不一样, 则微软雅黑字体Microsoft YaHei存在系统中.

下面是代码直接从拉过来的:
http://www.lalit.org/wordpress/wp-content/uploads/2008/05/fontdetect.js?ver=0.3

/**
 * 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/javascript-css-font-detect/
 * License: Apache Software License 2.0
 *          http://www.apache.org/licenses/LICENSE-2.0
 * Version: 0.15 (21 Sep 2009)
 *          Changed comparision font to default from sans-default-default,
 *          as in FF3.0 font of child element didn't fallback
 *          to parent element if the font is missing.
 * Version: 0.2 (04 Mar 2012)
 *          Comparing font against all the 3 generic font families ie,
 *          'monospace', 'sans-serif' and 'sans'. If it doesn't match all 3
 *          then that font is 100% not available in the system
 * Version: 0.3 (24 Mar 2012)
 *          Replaced sans with serif in the list of baseFonts
 */

/**
 * Usage: d = new Detector();
 *        d.detect('font name');
 */
var Detector = function() {
    // a font will be compared against all the three default fonts.
    // and if it doesn't match all 3 then that font is not available.
    var baseFonts = ['monospace', 'sans-serif', 'serif'];

    //we use m or w because these two characters take up the maximum width.
    // And we use a LLi so that the same matching fonts can get separated
    var testString = "mmmmmmmmmmlli";

    //we test using 72px font size, we may use any size. I guess larger the better.
    var testSize = '72px';

    var h = document.getElementsByTagName("body")[0];

    // create a SPAN in the document to get the width of the text we use to test
    var s = document.createElement("span");
    s.style.fontSize = testSize;
    s.innerHTML = testString;
    var defaultWidth = {};
    var defaultHeight = {};
    for (var index in baseFonts) {
        //get the default width for the three base fonts
        s.style.fontFamily = baseFonts[index];
        h.appendChild(s);
        defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font
        defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font
        h.removeChild(s);
    }

    function detect(font) {
        var detected = false;
        for (var index in baseFonts) {
            s.style.fontFamily = font + ',' + baseFonts[index]; // name of the font along with the base font for fallback.
            h.appendChild(s);
            var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
            h.removeChild(s);
            detected = detected || matched;
        }
        return detected;
    }

    this.detect = detect;
};

“Javascript 或CSS获取客户浏览器支持的字体”文章评论(1)

  1. I was wondering if you were inseertted in doing a guest article on my web site. I seriously enjoy reading through your blog and I know a lot of my visitors would, too. If little else, you will get some additional visitors for your website!

来说兩句