3

私がこのコードを単独で持っていたとき、それは（FireFoxで）機能していたので、私はここで何が起こっているのか理解していません：

@font-face {
    font-family: 'mmfont';
    src: url('/scripts/mmfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

次に、まったく同じ方法で2番目のフォントを追加しましたが、最初のフォントだけが機能していました。

@font-face {
    font-family: 'mmfont2';
    src: url('/scripts/mmfont2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

次に、フォントジェネレーターを使用してIE9のEOTファイルを取得し、@ font-faceコードを生成しましたが、どちらのフォントもどのブラウザーでも機能しません（IE9、FF12、Chrome、Safari5を試しました）。

次に、@ font-faceCSSを独自の'/scripts/fonts.css'ファイルに入れて、フォントとCSSが同じフォルダーにあるようにし、URLを直接（'mmfont.ttf'）とwebrootフォルダー（'/scripts/mmfont.ttf'）によって作成されますが、どちらの方法もまったく機能しません。

私は何が間違っているのですか？

修正：

最初のフォント「mmfont」を呼び出すときにタイプミスがありました。これを行いました。font-family: mm_fontタイプミスを修正したので、もう一度1番目のフォントのみが以下のコードで機能し、2番目のフォントmmfont2は機能しません。順序を並べ替えようとしましたが（最初に2番目のフォントを定義します）、それでも機能しません。フォントファイルに問題があると思うので、別のコピーを取得して、それがどのように行われるかを確認します。

アップデート：

コードに問題はないようです。FireBugを使用してfonts.cssファイルのソース編集を行い、「mmfont2」のURLの名前を「mmfont.ttf」（最初のフォントのURL）に変更すると、ページとロードされたフォントが更新されました。名前を「mmfont2.ttf」に戻し、ブラウザのデフォルトフォントに戻しました。したがって、コードではなくフォントファイルに問題があると確信しています。

私が使用しているこの2番目のフォントは、Web互換フォントではないようです。おかしなことに、同じフォントに沿って別のエイリアス「Century Gothic」があります。これは、Webセーフフォントであり、ファイルをリンクしなくてもすべてのブラウザで機能します。

（この質問を閉じるか削除するかはわかりません）

/scripts/fonts.css

@CHARSET "ISO-8859-1";
@font-face {
    font-family: 'mmfont';
    src: url('/scripts/mmfont.eot');
    src: url('/scripts/mmfont.eot?#iefix') format('embedded-opentype'),
         url('/scripts/mmfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'mmfont2';
    src: url('/scripts/mmfont2.eot');
    src: url('/scripts/mmfont2.eot?#iefix') format('embedded-opentype'),
         url('/scripts/mmfont2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/index.html

<link rel="StyleSheet" href="/scripts/fonts.css" type="text/css">

ディレクトリ

/  
/index.html  
/scripts/  
/scripts/mmfont.ttf  
/scripts/mmfont.eot  
/scripts/mmfont2.ttf  
/scripts/mmfont2.eot
/scripts/fonts.css
4

3 に答える 3

1

これで、cssのフォントURLが次のように修正されます。

url('mmfont.eot');

私はあなたのフォントとcssファイルがスクリプトの1つのフォルダにあると思います

于 2012-07-05T11:42:08.480 に答える
1

Amazonのすべての設定が正常であるように見えたため、別の方法を見つけることができませんでした。代わりに、以下に示すように、フォント定義自体をdata-uri呼び出しに埋め込んだだけです。StackOverflowの回答のサイズの制約のために、フォント定義の多くが省略されていますが、これにより、私たちのアプローチについての良いアイデアが得られるはずです。

@font-face {
    font-family: "PFDinTextPro-Light";
    src: url("233cd7_2_0-webfont.eot");
}
@font-face {
    font-family: "PFDinTextPro-Light";
    font-style: normal;
    font-weight: normal;
    src: url("233cd7_2_0-webfont.eot?#iefix") format("embedded-opentype"), url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAFq4ABEAAAAAmrQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABgAAAABwAAAAcYqvy...dRcDMyMXA5M2mM+m4LqJvRPKYQVy2CKhHBYgh9USyuGAaJOCaeMESnLMgHAYN3BBDecFinIdZ9LeyOxWBuTyALm8+XAuN5DLEwjn8oGM5Kr/zwAX4Qcq4HsC5woAufy1MG7kBhFtANGLRQMAAVB7j+oAAA==") format("woff"), url("233cd7_2_0-webfont.ttf") format("truetype");
}
于 2013-02-25T23:34:30.140 に答える
1

1年以上経っていますが、誰かが探しに来た場合に備えて、質問者がAWSでウェブサイトをホストしていたに違いありません。AWSに@ font-faceキットを読み取らせるには、CORSルールを作成する必要があります。ここで説明されているように、この修正を試してください：http: //blog.blenderbox.com/2012/10/12/serving-font-face-fonts-to-firefox-from-an-s3-bucket/

于 2013-05-25T17:58:16.210 に答える