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

有没有办法使用JavaScript或JQuery枚举给定HTML页面的所有@ font-face URL(Web字体URL)？

最佳答案

是的,假设您想要找到样式表中指定的所有@ font-faces而不是HTML文档本身中的实际USED.

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

@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)或多或少会起到作用：

sstext.match(pattern);
    if (urls)
    {
        for (var j=0;j

有一些警告：

首先,指定@ font-face的主要方法之一依赖于指定src两次,这种技术只会获取第二个src.

我没有测试过这种跨浏览器,但它可以在我的浏览器上运行并弹出一个包含每个字体网址的警告框.

硬编码[0]使它只查看第一个样式表(在这个例子中只有一个).如果需要的话,编写另一个循环遍历所有样式表是相当简单的,但对于这个例子来说似乎有些过分.