思源黑体有多少普及度了?

Question

挺不错的字体, 好像不是 Mac 系统上都装的, 有什么地方可以查一下有多少电脑使用了吗?
https://typekit.com/fonts/source-han-sans-simplified-chinese?utm_sourc...

Answer 1

1. 思源黑体不是Mac的预装字体；

2. 思源黑体是google和adobe一起立项做的适合安卓屏显并补全CJK字符集问题的一款字体，都这样了你觉得apple愿意用吗；

3. 苹果有一款“苹方”将跟随OS X El Capitan一起面世，其实你可以在苹果官网的webfont声明里看出端倪。下面是苹果官网的图：
   

4. 没有数据，只是凭经验说，非windows、非office、非adobe预装的字体命中率很低的。大众没有清晰的字体排印需求，就算是程序员圈子，这个状况也没有好到哪去

再回答这个问题跟技术最接近的一点：如何判定字体命中？
特征值区别。
前端有安全沙盒机制嘛，我们很多东西都拿不到的，只能把前端当作一个黑盒，构造一些用例，找到正常情况和异常情况的指标区别，来做判断。
这其实是前端指纹技术的一个子集。

具体到这个命题而言，我们拿不到系统的安装字体列表，不能像flash一样来直接筛选。所以现有的探测技术，一般是探测mmmmmmmmmmll这个字符排版下来的高和宽是否符合预期，如这个地址所介绍的。

/**
 * 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;
};

再具体到思源黑体：

• 它的英文部分即Source Sans，它与其它中文字体的英文部分有很明显的kerning区别（想想等宽的宋体英文部分你就明白），宽度差别十分明显

• 思源黑体的中文部分默认行高非常高，这一点能微软雅黑也压下去

所以个人觉得这属于比较好探测的字体。有空补一个测试，这类测试的构建比较麻烦，需要卸了装装了卸。