有没有办法使用 JavaScript 或 JQuery 枚举给定 HTML 页面的所有 @font-face URL（网络字体 URL）？
问问题
3755 次
4 回答
4
是的，假设您的意思是要查找样式表中指定的所有 @font-faces，而不是 HTML 文档本身中实际使用的。
给定一个合理的标准样式表，如下所示：
@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>
有一些警告：
首先，指定@font-face 的主要方法之一依赖于指定src 两次，这种技术只会选择第二个src。
我没有测试过这个跨浏览器，但它可以在我的浏览器上运行，并且会弹出一个带有每个字体 url 的警告框。
硬编码的 [0] 使其仅查看第一个样式表（在此示例中只有一个）。如果需要，编写另一个循环来遍历所有样式表是相当简单的，但对于这个例子来说似乎有点过分了。
于 2012-04-23T09:26:31.833 回答
0
不，不是。似乎只有这种技术： http: //paulirish.com/2009/font-face-feature-detection/来检测是否@font-face可以使用，但不能检测正在使用的字体。没有解析所有的 CSS 代码服务器端（或至少服务器端协助）没有办法做你想做的事，而不仅仅是 JS 和 jQuery。对于那个很抱歉。
于 2012-04-20T18:31:13.810 回答
0
这是我刚刚写的供自己使用的东西，在 Chrome 上运行良好，尚未在其他浏览器上测试过——但对我来说似乎相当标准。
它需要 jquery，并将识别所有正在使用的字体及其来源（如果是 webfonts）。
请注意，它不能充分处理字体的变化（不同的“粗体”版本），也不能处理定义了多种字体的样式（例如：font-family: fonta、fontb、fontc）。
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)]
于 2013-10-13T07:56:28.633 回答
0
您还可以获得带有变体和 URL 的字体系列。
以下是jQuery中的代码
var fontArray = [];
$.get("https://www.googleapis.com/webfonts/v1/webfonts?key={your key}&sort=popularity", {}, function (data) {
var count = 0;
$.each(data.items, function (index, value) {
count++
fontArray.push(value);
});
});
于 2020-02-18T20:07:00.147 回答