JavaScript または JQuery を使用して、特定の HTML ページのすべての @font-face URL (Web フォント URL) を列挙する方法はありますか?
4 に答える
はい、HTML ドキュメント自体で実際に使用されるのではなく、スタイルシートで指定されたすべての @font-faces を検索することを意味すると仮定します。
次のようなかなり標準的なスタイルシートがあるとします。
@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 を指定する主な方法の 1 つは、src を 2 回指定することに依存しています。この手法では、2 番目の src のみが取得されます。
このクロスブラウザはテストしていませんが、私のブラウザでは動作し、フォントの URL ごとに警告ボックスが表示されます。
[0] をハードコーディングすると、最初のスタイルシートのみが表示されます (この例では 1 つしかありません)。必要に応じて、すべてのスタイルシートをループするさらに別のループを作成するのはかなり簡単ですが、この例ではやり過ぎのように思えます。
いいえ、そうではありません。この手法があるようです:http://paulirish.com/2009/font-face-feature-detection/@font-face
使用できるかどうかを検出しますが、使用されているフォントは検出しません。すべてのCSSコードをサーバー側(または少なくともサーバー側で支援)で解析する以外に、JSとjQueryだけでなく、必要なことを実行する方法はありません。申し訳ありません。
これは私が自分で使用するために書いたもので、Chrome で問題なく動作し、他のブラウザーではテストしていませんが、私にはかなり標準的なようです。
jquery が必要で、使用中のすべてのフォントとそのソース (Web フォントの場合) を識別します。
フォントのバリエーション (異なる「太字」バージョン) を適切に処理できず、複数のフォントが定義されたスタイル (例: 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)]