web-dev-qa-db-ja.com

インラインCSSを介した外部フォントの読み込み

インラインCSSを介して外部フォントをロードすることは可能ですか？

注：私はnot@font-face定義を持つ外部CSSファイルの使用について話しているが、むしろ次のようなものだ。

<h1 style="font-family:myfont;
    src:('http://example.com/font/myfont.tff')">test</h1>
htmlcssfontsinlinefont-face
42
Randomize

インラインCSSで外部フォントをロードすることは可能ですか？外部CSSファイル[....]を使用しないでください。

はい。StephenScaffの この記事 に示すように、1つまたは複数のフォントをbase64でエンコードし、ページ内のstyleブロックにドロップして、外部リクエストを回避できます。

使用しているブラウザがサポートしている場合は、この方法を説明する方法で使用することもできます。

<style>
  @font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: normal;
    src: local('PT Sans'), local('PTSans-Regular'),
      url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAHowABMAAAAA+OAA) format('woff2');
  }
  @font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: normal;
    src: local('PT Serif'), local('PTSerif-Regular'),
      url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAIQYABMAAAAA/MAA) format('woff2');
  }
</style>

最新のブラウザはすべて WOFF2をサポート ですので、おそらくとそれだけを近い将来使用する必要があります。また、この手法はページの速度スコアを改善しますが、base64エンコードのみである場合を除き、全体のパフォーマンスを低下させます（最初のページの読み込みでも）重要なページアセット（例：スクロールせずに見えるフォントのグリフ）および 非同期ロード 残り。

パフォーマンスに関しては、今のところ最善の方法は Brotli圧縮 を使用し、 HTTP/2サーバープッシュ でwebfontスタイルシートをパイプすることです。

18
Josh Habdas

@font-faceルールをstyle属性に含めることはできません（最も狭い意味で「インラインCSS」です）。 HTML 4.01仕様では、body要素内にこのようなルールを含めることはできません（より広い意味での「インラインCSS」。これには style要素） 。しかし、実際には可能です。

実際には、style内にbody要素を含めると、ブラウザは構文的に正しい場所、つまりhead要素内にあるかのように処理されます。それは「後方」でも機能し、その前に現れる要素に影響します。

このアプローチを行うこともできます-headを変更できない場合にのみ使用する必要があります-HTML5 CRに従って正式に正しい。 It allows コンテンツモデルとしてフローコンテンツを含む要素の先頭にあるstyle要素。現在のブラウザはscoped属性を無視します。

Update：バリデーターのバグが修正されたため、以下は関係ありません。

ただし、W3C Markup Validatorおよびvalidator.nuには bug があります。これらは、styleの先頭でbodyを許可しません。このバグを克服し、有効であることに加えてドキュメントを検証するには、追加のdiv要素を使用できます。

<body>
<div>
<style scoped>
/* your @font-face and other CSS rules go here */
</style>
<!-- your document body proper goes here -->
</div>
</body>
10
Jukka K. Korpela

いいえ、私が知っていることではありません。 <style>ブロックまたは外部CSSファイルでこの種のことを宣言する必要があります。

ただし、このようなものが必要な場合は、間違っている可能性が非常に高くなります。

3
Madara Uchiha