Question

我需要通过@font-face声明（无论是外部样式表还是内联<style>元素）获取可在页面上使用的所有字体名称列表。这是一个脚本，将包含在我无法控制的页面中。

理想情况下，我想这样做，不用通过AJAX重新下载所有CSS文件，然后解析它们。

但是我无法使用新的document.fonts API，因为我需要合理地跨浏览器（如果可能的话，甚至是IE7）。

如果没有下载和解析CSS，有没有办法做到这一点？

Answer 1

我认为这样的事情将是一个开始：

var sheets = document.styleSheets,
    sheet,
    rule,
    i, j;

for (i = 0; i < sheets.length; i++) {
  sheet = sheets[i];
  for (j = 0; j < sheet.rules.length; j++) {
    rule = sheet.rules[j];
    if (typeof(rule.cssText) !== 'undefined' && rule.cssText.indexOf("font-face") !== -1) {
       console.log(rule.cssText); // you can parse the font name from rule.cssText here
    }
}

Answer 2

检查以下代码，可能有帮助

var ruleFontName = [];
$.each(document.styleSheets, function(sheetIndex, sheet) {
    $.each(sheet.cssRules || sheet.rules, function(ruleIndex, rule) {
        if (typeof(rule.cssText) !== 'undefined' && rule.cssText.indexOf("font-face") !== -1) {
        var fntSrc = (rule.cssText. match(/src: *url\(([^;]+)\);/i) || ["", ""])[1];
        var fntName = (rule.cssText.match(/font-family: *([^;]+);/i) || ["", ""])[1];
        add(ruleFontName,fntSrc,fntName )
       }
    });
});

//checking if array values are not repeated


     function add(arr, src, name) {
            var foundName = arr.some(function (el) {
              return el.fntName === name;
            });
            var foundSrc = arr.some(function (el) {
              return el.fntSrc === src;
            });
            if (!foundName && !foundSrc) {
                arr.push({ fntName: name, fntSrc: src });
                console.log(arr);
            }

        }

JSFIDDLE：http://jsfiddle.net/hiteshbhilai2010/dpfpLyq1/47/

如何找出页面中包含哪些字体？

2 个答案: