1

私が構築しているワードプレスベースのサイトの CSS に次のフォント設定があり、フォントは FF では正常に表示されますが、IE(9) または Chrome(最新) ではまったく表示されません。

  /* =Typography
  -------------------------------------------------------------- */
  @font-face {
      font-family: 'Humanist';
      src: url('fonts/humanist521lightbt-webfont.eot');
      src: url('fonts/humanist521lightbt-webfont.eot?#iefix') format('embedded-opentype'),
           url('fonts/humanist521lightbt-webfont.woff') format('woff'),
           url('fonts/Humanist521LightBT.ttf') format('truetype'),
           url('fonts/humanist521lightbt-webfont.svg#webfontregular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

  @font-face {
      font-family: 'HumanistIT';
      src: url('fonts/humanist521lightitalicbt-webfont.eot');
      src: url('fonts/humanist521lightitalicbt-webfont.eot?#iefix') format('embedded-opentype'),
           url('fonts/humanist521lightitalicbt-webfont.woff') format('woff'),
           url('fonts/Humanist521LightItalicBT.ttf') format('truetype'),
           url('fonts/humanist521lightitalicbt-webfont.svg#webfontregular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

  @font-face {
     font-family: 'HumanistBo';
     src: url('fonts/humanist777blackbt-webfont.eot');
     src: url('fonts/humanist777blackbt-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/humanist777blackbt-webfont.woff') format('woff'),
     url('fonts/Humanist777BlackBT.ttf') format('truetype'),
     url('fonts/humanist777blackbt-webfont.svg#webfontregular') format('svg');
     font-weight: normal;
     font-style: normal;
  }

要素にフォントを使用する必要がある場合は、追加するだけですfont-family: 'Humanist', Arial, sans-serif;

フォントは、"fonts" というフォルダー内のテーマのディレクトリに保存されます。

他のブラウザで動作するために、何か間違っているか、何か不足していますか?

ありがとう

4

2 に答える 2

3

Internet Explorer 9 以前では、.TTFファイルの表示に問題があります。.svg最初にサポートされている形式 ( 、.ttf、.eotなど)に変換しないと、CSS3 スキームによる埋め込みフォントはサポートされません。ただし、@Font-Face 構文を微調整してこれをサポートできます。

Chrome で正しいフォントが表示されないのは、ブラウザによってニーズが異なるためです。詳細については、以下の詳細情報の 2 番目のリンクを参照してください。

補足: フォントがGoogle Fontsでホストされている場合は、自分でホストするのではなく、Web サイトにリンクを埋め込んでください。

TLDR; @font-face タイプの包括的なリストが必要

詳しくは：

SO 質問 - True Type フォント ファイルに関する IE の問題

SO 質問 - Chrome の Font-Face の問題

防弾構文のさらなる強化 - Fontspring。

防弾 @font-face 構文 - ポール・アイリッシュ

于 2013-05-15T01:34:06.087 に答える
0

HTML 要素にフォントを使用するには、多くの最新ブラウザーでサポートされている CSS3 の完全な機能の @font-face ルールを使用する必要があります。HTML の CSS プロパティ font-family は、埋め込みたいフォント名を定義するために使用され、src プロパティは、埋め込みたいフォントのパスを定義するために使用されます。

@font-face
{
    font-family: myfont;
    src: url('(fontfile.eot') format('embedded-opentype'),
            url('(fontfile.woff') format('woff'),
         url('(fontfile.ttf') format('truetype'),
         url('(fontfile.svg#(fontfile') format('svg');
}

div,h2
{
    font-family:myfont;
}
于 2013-12-30T13:44:48.730 に答える