1. Zuhause
  2. Frage und Antwort
  3. @ font-face-URLs mit Javascript/JQuery aufzählen

@ font-face-URLs mit Javascript/JQuery aufzählen

2012-04-20 4 views

Antwort

3

Ja, vorausgesetzt, Sie meinen, Sie möchten alle im Stylesheet angegebenen @ font-faces finden, anstatt sie im HTML-Dokument selbst zu verwenden.

ein ziemlich Standard-Stylesheet gegeben, die wie folgt aussieht:

@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'; 
}

Dann wurde die folgende HTML (mit inlined Javascript) wird mehr oder weniger den Trick:

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

Mit einigen Einschränkungen:

Erstens, eine der Hauptarten zum Angeben von @ font-face beruht auf der doppelten Angabe von src. Diese Technik wird nur die zweite Quelle aufnehmen.

Ich habe diesen Cross-Browser nicht getestet, aber es funktioniert in meinem Browser und öffnet eine Warnmeldung mit jeder Schriftart URL.

Die hartcodierte [0] sieht nur das erste Stylesheet vor (in diesem Beispiel gibt es nur eines). Es ist ziemlich trivial, eine weitere Schleife zu schreiben, die bei Bedarf über alle Stylesheets geführt wird, aber für dieses Beispiel zu übertrieben erscheint.

Quelle

2012-04-23 09:26:31 ADW

+2

Vielleicht ist es offensichtlich zu Ihnen, aber Ich möchte ein Problem dieser und Orwellophiles Lösung erwähnen (http://stackoverflow.com/a/19343013/2590616). Es funktioniert nur mit den gleichen Domain-Stylesheets. Wenn Sie versuchen, die Regeln eines Stylesheets in einer anderen Domäne zu lesen, z. Auf einer CDN-Datei stoßen Sie in Chrome auf eine Cross-Domain-Richtlinie und erhalten in Firefox einen Skriptfehler ("SecurityError: Der Vorgang ist unsicher"). – RiZKiT

0

Nein, nicht wirklich. Es scheint nur diese Technik zu sein: http://paulirish.com/2009/font-face-feature-detection/ zu erkennen, ob @font-face benutzt werden kann, aber nicht zu erkennen, welche Fonts sind wird verwendet. Kurz vor dem Analysieren aller CSS-Code Server-Seite (oder zumindest serverseitig unterstützt) gibt es keine Möglichkeit, was Sie wollen, nicht nur mit JS und jQuery. Das tut mir leid.

Quelle

2012-04-20 18:31:13

0

Dies ist etwas, das ich gerade für meinen eigenen Gebrauch geschrieben habe, funktioniert gut mit Chrome, habe nicht mit anderen Browsern getestet - aber scheint ziemlich Standard für mich.

Sie erfordert jquery und identifiziert alle verwendeten Schriftarten und deren Quellen (falls Webfonts).

Beachten Sie, dass es Variationen über eine Schriftart (andere 'fett' Version) nicht angemessen handhabt, und auch nicht mit Stilen mit mehreren Schriftarten umgehen kann (zB: 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()); });

Beispielausgabe (hier können Sie ein Beispiel sehen, was passiert, wenn man andere haben ‚fett‘, ‚kursiv‘ etc font-style definiert):

[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)]

Quelle

2013-10-13 07:56:28 Orwellophile

Verwandte Themen

 Verwandte Themen