한 글꼴에 대해 다른 글꼴 그룹을 제공하는 Fontdeck을 해결하는 방법은 무엇입니까?

Question

Fontdeck 파일을 직접 호스트 할 수있는 옵션을 제공하지 않으며, 불행히도 반환하는 CSS는 글꼴의 다른 유사 다른 폰트 패밀리가 : 이것은 특히 이미 알고 가능성이 매우 불편 주어진다

@font-face { 
    font-family: 'Apercu Pro Light'; 
    src: ...; 
    font-weight: 200; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Apercu Pro Bold Italic'; 
    src:...; 
    font-weight: bold; 
    font-style: italic; 
} 

@font-face { 
    font-family: 'Apercu Pro Regular'; 
    src: null; 
    font-weight: normal; 
    font-style: normal; 
} 

을 올바른 무게와 스타일. 이 문제를 해결하고 내 CSS에서 Apercu을 font-family으로 사용하고 브라우저에서 사용할 글꼴을 찾아야합니까? Fontdeck 글꼴을로드 webfontloader를 사용하는 제안 이후, 우리는

Answer 1

의 이벤트를 수신하고 즉시 사용할 수있게되면 추가 인라인 <style> 태그를 다시 작성할 수 있습니다 :

(function() { 
    'use strict'; 

    var hasRewrittenRules = false; 

    /** 
    * Fontdeck returns different font-family for each font variation. 
    * We will rewrite inline <style> it creates to have one font-family. 
    */ 
    function rewriteFontFaceRules() { 
    if (hasRewrittenRules) { 
     return; 
    } 

    var key, 
     sheet, 
     index, 
     rule, 
     fontFamily; 

    for (key in document.styleSheets) { 
     sheet = document.styleSheets[key]; 
     if (!sheet.ownerNode || sheet.ownerNode.tagName !== 'STYLE') { 
     continue; 
     } 

     for (index in sheet.rules) { 
     rule = sheet.rules[index]; 
     if (!(rule instanceof window.CSSFontFaceRule)) { 
      continue; 
     } 

     fontFamily = rule.style.fontFamily; 

     // CHANGE REWRITING RULES HERE: 

     if (fontFamily && fontFamily.indexOf('Apercu') > -1 && fontFamily !== 'Apercu') { 
      rule.style.fontFamily = 'Apercu'; 
      hasRewrittenRules = true; 
     } 
     } 
    } 
    } 

    window.WebFontConfig = { 
    fontdeck: { id: /* YOUR FONT ID */ }, 
    fontactive: rewriteFontFaceRules, 
    active: rewriteFontFaceRules 
    }; 

    var wf = document.createElement('script'); 
    wf.src = ('https:' === document.location.protocol ? 'https' : 'http') + 
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 
    wf.type = 'text/javascript'; 
    wf.async = 'true'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(wf, s); 
})();