web-dev-qa-db-ja.com

ttcファイルを使用したCSSフォントフェイス

フォントフェイスを使用するのはこれが初めてであり、特に*.ttcファイルに関しては、正確なフォントを実際にレンダリングするのが非常に困難です。

これが私がこれまでに行ったことです：

@font-face {
    font-family: 'FontName';
    src: url('../fonts/font.ttc') format('truetype');
    font-weight: normal;
}


.header {
    font-family: 'FontName;
}

Chromeのインペクターでネットワークタブを確認すると、フォントは正常に読み込まれていますが、結果のテキストはまだ別のフォントを使用しています。

何を間違えたのですか？この問題の修正を手伝ってください。よろしくお願いします。

更新

私が理解したもう一つのこと。インラインでスタイルを設定すると、フォントが正しくレンダリングされます。

    <p style="font-family:'FontName'">test 2</p>

読み込みなどに遅延はありますか？

cssfontsfont-facewebfonts
5
Tyler Bean

CSS @font-face宣言にフォントコレクションを使用することはできません。この構文の目的はnambiguiouslyであり、次のいずれかの組み合わせを指定するときにブラウザーで使用する必要がある単一のフォントリソースを指定します。実際のページCSSのfont- {family、weight、styleなど}。

フォントコレクションを指定すると、これが不可能になります。コレクション内に必要なフォントを指定する構文がないため、ttcは設計ではサポートされていません。必要な個々のフォントアセットを抽出し（合法的に許可されている場合！）、次に、単一の@font-face宣言に必要な単一のフォントを明示します。

そして、これが可能であることを覚えておいてください：

@font-face {
  font-family: myfont;
  font-weight: normal;
  src: url('that-font-I-like-Regular.woff') format('WOFF');
}

@font-face {
  font-family: myfont;
  font-weight: bold;
  src: url('that-font-I-like-Bold.woff') format('WOFF');
}

...

h1 {
  font-family: myfont;
  font-weight: bold;
  ...
}

p {
  font-family: myfont;
  font-weight: normal;
  ...
}
9
Mike 'Pomax' Kamermans

こちらをお読みください CSSインポートフォント 。

簡単に言うと、フォントを https://www.fontsquirrel.com/tools/webfont-generator のようなツールを使用してブラウザが理解できるタイプに変換する必要があります。

0
ramin