web-dev-qa-db-ja.com

WebアプリケーションでTrue Typeフォントを使用する

現在、多くのWebサイトでtrue type fontsが使用されています。アプリケーションでTrue Typeフォントを使用する方法を知りたいのですが、ページの読み込み時間に影響しますか？

htmlperformancebrowserfonts
48
Sudantha

ブラウザの互換性の問題により、フォントの埋め込みは少し複雑になる場合があります。たとえば、SafariはSVGフォントのみをサポートします。 IEは.eotのみをサポートし、最初に.ttfから変換する必要があります

カスタムフォントを使用する最も簡単な方法は、 Google Fonts から選択することです。

3
James Reategui

HTML5では、CSSで[〜＃〜] ttf [〜＃〜]フォントを使用できます。

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

使用するには：

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

html5rocksの詳細 を確認してください。

114
fguillen

Font Embedding を使用します。

フォントデータやその他のコンテンツ、スタイルなどをダウンロードする必要があるため、ページの全体的な読み込み時間に影響します。ただし、キャッシュされるため、ページの最初のビューにのみ影響します。

6
ChrisF

かなりの時間が経過したため、受け入れられた回答を更新したいと思います。以下は、推奨される「最適」設定で Font Squirrel が出力するものです。サポート.ttfこの時点では重要ではなくなったため、無視する必要があります。

font-family: 'Tagesschrift';
  src: url('tagesschrift.woff2') format('woff2'),
       url('tagesschrift.woff') format('woff');
  font-weight: normal;
  font-style: normal;

enter image description here

4
Andy Hoffman