Javascript/JQueryを使用して@ font-face URLを列挙する

3

はい、HTML文書自体の中で実際にUSEDではなく、スタイルシートで指定された@ font-facesをすべて見つけたいとします。

次のようになり、合理的に標準スタイルシートを考える：いくつかの注意点と

<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>

：次に（インラインJavaScriptを使用して）次の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'; 
}

を

まず、@ font-faceを指定する主な方法の1つは、srcを2回指定することに依存します。このテクニックは2番目のsrcだけを取り上げます。

私はこのクロスブラウザをテストしていませんが、ブラウザ上で動作し、アラートボックスに各フォントのURLが表示されます。

ハードコードされた[0]は、最初のスタイルシートのみを表示します（この例では1つだけです）。必要に応じてすべてのスタイルシートをループするもう1つのループを書くのはかなり簡単ですが、この例では過剰なようです。

出典

2012-04-23 09:26:31 ADW

+2

たぶんそれは、あなたには明らかだが、私はこれと[@ Orwellophileの解決策]（http://stackoverflow.com/a/19343013/2590616）の問題について言及したいと思います。同じドメインスタイルシートでのみ動作します。異なるドメインのスタイルシートのルールを読み込もうとすると、たとえば次のようになります。 cdnでは、Chromeでクロスドメインポリシーを実行し、Firefoxでスクリプトエラー（「SecurityError：操作が安全ではありません。」）を取得します。 – RiZKiT

0

いいえ、実際はありません。 http://paulirish.com/2009/font-face-feature-detection/は、@font-faceが使用できるかどうかを検出しますが、がどのフォントを使用しているかを検出するのではなく、です。 CSSコードのすべてを解析するだけでは、JSやjQueryだけでなく、あなたが望むことをする方法がありません。申し訳ありません。

出典

2012-04-20 18:31:13

0

これは私が自分の使い方で書いたもので、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)]

出典

2013-10-13 07:56:28 Orwellophile

Javascript/JQueryを使用して@ font-face URLを列挙する

答えて

関連する問題