Javascript/JQuery를 사용하여 @ font-face URL을 열거하십시오.

3

예, HTML 문서 자체에서 실제로 USED가 아닌 스타일 시트에 지정된 @ 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이 더 많거나 적은 트릭을 할 것입니다 : 몇 가지주의와

<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-23 09:26:31 ADW

+2

어쩌면 그것은 당신에게 분명하지만, 이 문제와 [@ Orwellophile의 해결책] (http://stackoverflow.com/a/19343013/2590616)에 대해 언급하고 싶습니다. 동일한 도메인 스타일 시트에서만 작동합니다. 다른 도메인에서 스타일 시트 규칙을 읽으려고하면 (예 : cdn에서 Chrome의 교차 도메인 정책을 실행하고 Firefox에서 스크립트 오류 ("SecurityError : The operation is insecure.")가 발생합니다. – RiZKiT

0

아니요. 이 기법은 http://paulirish.com/2009/font-face-feature-detection/인데, @font-face을 사용할 수 있는지 탐지 할 수 있지만 은 인 글꼴을 감지하지 못합니다. CSS 코드를 모두 서버 측 (또는 적어도 서버 측 지원)으로 파싱하지 않으면 JS 및 jQuery만으로는 원하는 것을 수행 할 수 없습니다. 미안합니다.

출처

2012-04-20 18:31:13

0

이것은 내가 방금 내 자신의 사용을 위해 쓴 것인데, Chrome에서 잘 작동하고, 다른 브라우저에서 테스트하지 못했지만, 나에게는 꽤 표준적인 것처럼 보입니다.

jquery가 필요하며 사용중인 모든 글꼴과 해당 소스 (웹 글꼴 인 경우)를 식별합니다.

글꼴의 변형 (다른 '굵은 글꼴'버전)을 적절히 처리하지 못하고 여러 글꼴이 정의 된 스타일 (예 : 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을 열거하십시오.

답변

관련 문제