1

Fontdeck には、自分でファイルをホストするオプションはありません。残念ながら、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て、使用するフォントをブラウザに判断させることはできますか?

4

1 に答える 1

1

Fontdeck はwebfontloaderを使用してフォントをロードすることを提案しているため、そのイベントをリッスンし、追加されたインライン<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);
})();
于 2014-11-17T15:31:49.290 に答える