使用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]使它只查看第一个样式表(在这个例子中只有一个).如果需要的话,编写另一个循环遍历所有样式表是相当简单的,但对于这个例子来说似乎有些过分.

原文地址：https://www.jb51.cc/jquery/428072.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。