javascript / css字体检测

Question

这是用于通过javascript检测浏览器可用字体的代码。

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

如果我们在此代码中输入任何字体名称

      d = new Detector();
     d.detect('font name');

它将返回true或false。

但我找到了一种方法来输出所有可用字体的列表而不是布尔值。