4

アイコン フォント (FontAwesome/Octicons など) を Shadow DOM に流し込むための推奨される方法はありますか?

現時点では、カスタム要素の Shadow DOM でアイコンを使用したい場合、ociticons.cssファイルの一部をインラインで Shadow DOMに含める必要があります。

#shadowroot
<style>
    .octicon, .mega-octicon {
      font: normal normal normal 16px/1 octicons;
      display: inline-block;
      text-decoration: none;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .mega-octicon { font-size: 32px; }
    .octicon-search:before { content: '\f02e'} /*  */
</style>
<button>
  <span class="mega-octicon octicon-search"></span>
</button>

(明らか@font-faceに、Shadow DOM にブリードします。)

4

1 に答える 1

6

いいえ、アイコン フォントは単なる CSS のバンドルであり、Shadow DOM はライト CSS を非表示にすることを目的としているという理由だけで、アイコン フォントを使用する「推奨される方法」はありません。したがって、あなたの要求はシャドーイングの目的と矛盾しています。

一般的なアプローチは、フォント関連のアイコンを表示するためのコンポーネントを構築することです。実際、すべてのカスタム コンポーネント ライブラリには、フォント アイコンを表示するための独自のコンポーネントがあります。ちょうどグーグルのためにfont-awesome polymerまたは好きです。ランダムな例。

補足: 影に染み込まない@font-face。これは、ブラウザにまだ認識されていないフォントについて、フォント名とこのフォントを取得するファイルとの関係を設定するディレクティブです。そうは言っても、宣言しようとするかどうか：

@font-face {
    font-family: my-octicons;
    src: url('octicons.otf');
}

そしてそれを次のように使用します：

font: normal normal normal 16px/1 my-octicons;

影では解決されません。あなたのケースで解決された理由は、ブラウザがフォントをどこに表示するかを知っているからです。一般に、次のように宣言する場合と同じです。

font: Helvetica;

前になし@font-faceで。

お役に立てれば。

于 2015-03-01T14:00:16.140 に答える