Fatal编程技术网
  • javascript/
  • 使用Javascript/JQuery枚举@font-face URL

使用Javascript/JQuery枚举@font-face URL

javascript jquery

使用Javascript/JQuery枚举@font-face URL,javascript,jquery,font-face,Javascript,Jquery,Font Face,有没有一种方法可以使用JavaScript或JQuery枚举给定HTML页面的所有@font-face URL（web字体URL）？没有，没有。似乎只有这种技术：检测是否可以使用@font-face，而不是检测正在使用的字体。除了解析服务器端（或者至少是服务器端辅助）的所有CSS代码之外，没有任何方法可以做您想要做的事情，不仅仅是使用JS和jQuery。很抱歉。是的，假设您的意思是要查找样式表中指定的所有@font面，而不是HTML文档本身中实际使用的@font面 给出如下所示的合理标准样式表：

有没有一种方法可以使用JavaScript或JQuery枚举给定HTML页面的所有@font-face URL（web字体URL）？

没有，没有。似乎只有这种技术：检测是否可以使用
@font-face
，而不是检测正在使用的字体。除了解析服务器端（或者至少是服务器端辅助）的所有CSS代码之外，没有任何方法可以做您想要做的事情，不仅仅是使用JS和jQuery。很抱歉。

是的，假设您的意思是要查找样式表中指定的所有@font面，而不是HTML文档本身中实际使用的@font面

给出如下所示的合理标准样式表：

@font-face {
    font-family: 'Lobster12Regular';
    src: url('fonts/lobster_1.2-webfont.eot');
    src: url('fonts/lobster_1.2-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lobster_1.2-webfont.woff') format('woff'),
         url('fonts/lobster_1.2-webfont.ttf') format('truetype'),
         url('fonts/lobster_1.2-webfont.svg#Lobster12Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AllerRegular';
    src: url('fonts/aller_std_rg-webfont.eot');
    src: url('fonts/aller_std_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/aller_std_rg-webfont.woff') format('woff'),
         url('fonts/aller_std_rg-webfont.ttf') format('truetype'),
         url('fonts/aller_std_rg-webfont.svg#AllerRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AllerBold';
    src: url('fonts/aller_std_bd-webfont.eot');
    src: url('fonts/aller_std_bd-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/aller_std_bd-webfont.woff') format('woff'),
         url('fonts/aller_std_bd-webfont.ttf') format('truetype'),
         url('fonts/aller_std_bd-webfont.svg#AllerBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AllerLight';
    src: url('fonts/aller_std_lt-webfont.eot');
    src: url('fonts/aller_std_lt-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/aller_std_lt-webfont.woff') format('woff'),
         url('fonts/aller_std_lt-webfont.ttf') format('truetype'),
         url('fonts/aller_std_lt-webfont.svg#AllerLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1 {
    font-family: 'Lobster12Regular';
}

h2 {
    font-family: 'AllerRegular';
}
然后，以下HTML（带有内联Javascript）或多或少会起到作用：

<html>

<head>

<link rel="stylesheet" href="test.css">

</head>

<body>

<h1>Hello</h1>
<h2>Hello</h2>

<script type="text/javascript">

var pattern=/url\(.*?\)/g;
for (var i=0;i<document.styleSheets[0].cssRules.length;i++)
{
    var urls=document.styleSheets[0].cssRules[i].cssText.match(pattern);
    if (urls)
    {
        for (var j=0;j<urls.length;j++)
        {
            alert(urls[j]);
        }
    }
}

</script>

</body>

</html>


你好
你好
var模式=/url\（.*？\）/g；

对于（var i=0；i这是我刚刚编写的供自己使用的东西，在Chrome上运行良好，没有在其他浏览器上测试过，但对我来说似乎相当标准

它需要jquery，并将识别所有正在使用的字体及其来源（如果是webfonts）

注意，它不能充分处理字体的变化（不同的“粗体”版本），也不能处理定义了多种字体的样式（例如：字体系列：fonta、fontb、fontc）


您还可以获得带有变体和URL的字体系列。

以下是jQuery中的代码


var fontArray=[]；
$.get（”https://www.googleapis.com/webfonts/v1/webfonts?key={your key}&sort=popularity“，{}，函数（数据）{
var计数=0；
$.each（数据项、函数（索引、值）{
计数++
fontArray.push（值）；
});
});

也许这对你来说是显而易见的，但我想提一个问题。它只适用于相同的域样式表。如果你试图读取不同域（例如cdn）上的样式表规则，你会在Chrome中遇到跨域策略，并在Firefox中出现脚本错误（“SecurityError:操作不安全”）。

jQuery.fn.elementText = function() {
    return $(this)  
            .clone()
            .children()
            .remove()
            .end()
            .text()
            .replace(/^\s\s*/, '').replace(/\s\s*$/, '')
            ;
};

Font = function(family, src) {
    // In order to properly categorise complex font setups, weight and style need to be 
    // considered as part of a unique font. (TODO)
    this.family = family;
    this.src = src;
    this.weight = null;
    this.style = null;
};

Font.prototype.toString = function() {
    return '[Font ' + this.family + ': ' + this.src + ']';
};


var fontNames = {};
var fontObjects = [];

$(':visible').each(function (k, v) {
    var $v = $(v);
    var font;
    if ($v.elementText().length) {
        font = $v.css('font-family');
        // TODO: seperate by comma, remove quotes
        fontNames[font] = font;
    }
});

for (var sheet=0; sheet < document.styleSheets.length; sheet++)
for (var i=0; i<document.styleSheets[sheet].cssRules.length; i++)
{
    var rule = document.styleSheets[sheet].cssRules[i];
    if (rule instanceof CSSFontFaceRule) {
        if (fontNames[rule.style.fontFamily])
            fontObjects.push(
                    new Font(rule.style.fontFamily, rule.style.src) );
    }
}

fontObjects.forEach( function(v) { console.log(v.toString()); });



[Font 'ITC Legacy Sans Std': url(http://localhost/~admin/tmp/fonts/LegacySansStd-BookItalic.otf)]
[Font 'ITC Legacy Sans Std': url(http://localhost/~admin/tmp/fonts/LegacySansStd-Book.otf)]
[Font 'ITC Legacy Sans Std': url(http://localhost/~admin/tmp/fonts/LegacySansStd-MediumItalic.otf)]
[Font 'ITC Legacy Sans Std': url(http://localhost/~admin/tmp/fonts/LegacySansStd-Medium.otf)]
[Font 'ITC Legacy Sans Std': url(http://localhost/~admin/tmp/fonts/LegacySansStd-BoldItalic.otf)]
[Font 'ITC Legacy Sans Std': url(http://localhost/~admin/tmp/fonts/LegacySansStd-Bold.otf)]
[Font 'ITC Legacy Sans Std': url(http://localhost/~admin/tmp/fonts/LegacySansStd-Ultra.otf)]
[Font 'Ocean Sans Std': url(http://localhost/~admin/tmp/fonts/OceanSansStd-LightIta.otf)]
[Font 'Ocean Sans Std': url(http://localhost/~admin/tmp/fonts/OceanSansStd-Light.otf)]
[Font 'Ocean Sans Std': url(http://localhost/~admin/tmp/fonts/OceanSansStd-Book.otf)]
[Font 'Ocean Sans Std': url(http://localhost/~admin/tmp/fonts/OceanSansStd-SemiboldIta.otf)]
[Font 'Ocean Sans Std': url(http://localhost/~admin/tmp/fonts/OceanSansStd-Semibold.otf)]
[Font 'Ocean Sans Std': url(http://localhost/~admin/tmp/fonts/OceanSansStd-Bold.otf)]