0

私はウェブサイトで非常に奇妙な問題を抱えています。

最近、PC で正常に動作するWeb サイトを立ち上げました。しかし、Mac に関して言えば、ブラウザーにはフォントがまったく表示されません。

特定のフォントを含めるために使用font-faceしていますが、画面の幅に応じて 2 つの異なるスタイルシートがあります。ここにあるいくつかのオプションを試しましたが、どれもうまくいかないようです。CSSで使用した最後の構文は次のようなものでした

@font-face {
    font-family:'ChollaSansGr';
    src: url('http://:/')format('IE-No-404'),url('./fonts/ChSaGrRg.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
}

だから私の質問は、誰かが解決策を手伝ってくれたり、問題の根本的な原因について提案したりできるかどうかです.

4

1 に答える 1

4

Safari を使用している場合は、ネットで次の解決策を見つけました。

少なくともこれまでのところ、Mac では解決できました。ここにあります：

Webkit を作成する font-squirrel および font registries は、URL の前後に " および ' を使用して CSS を生成します。これは問題を引き起こしているようです。また、すべてのウェイトとスタイルを通常に設定し、これも大混乱を引き起こしているようです。

以下は、Lato の 2 つの顔に対して font squirrel によって生成されたコードです。

@font-face {
    font-family: 'LatoBlackItalic';
    src: url('Lato-BlackItalic-webfont.eot');
    src: url('Lato-BlackItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lato-BlackItalic-webfont.woff') format('woff'),
         url('Lato-BlackItalic-webfont.ttf') format('truetype'),
         url('Lato-BlackItalic-webfont.svg#LatoBlackItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatoBlack';
    src: url('Lato-Black-webfont.eot');
    src: url('Lato-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lato-Black-webfont.woff') format('woff'),
         url('Lato-Black-webfont.ttf') format('truetype'),
         url('Lato-Black-webfont.svg#LatoBlack') format('svg');
    font-weight: normal;
    font-style: normal;
}

これは、Safari、Chrome、および Firefox で実際に動作するように変更したものです。

@font-face {
   font-family: Lato;
    src: url(../../fonts/Lato-BlackItalic-webfont.eot);
    src: url(../../fonts/Lato-BlackItalic-webfont.eot?#iefix) format(embedded-opentype),
         url(../../fonts/Lato-BlackItalic-webfont.woff) format(woff),
         url(../../fonts/Lato-BlackItalic-webfont.ttf) format(truetype),
         url(../../fonts/Lato-BlackItalic-webfont.svg#LatoBlackItalic) format(svg);
    font-weight: 900;
    font-style: italic;
}


@font-face {
    font-family: Lato;
    src: url(../../fonts/Lato-Black-webfont.eot);
    src: url(../../fonts/Lato-Black-webfont.eot?#iefix) format(embedded-opentype),
         url(../../fonts/Lato-Black-webfont.woff) format(woff),
         url(../../fonts/Lato-Black-webfont.ttf) format(truetype),
         url(../../fonts/Lato-Black-webfont.svg#LatoBlack) format(svg);
    font-weight: 900;
    font-style: normal;
}

リンクはこちら: http://css-tricks.com/forums/discussion/10797/font-face-not-working-in-only-safari-/p1

お役に立てれば。

于 2012-10-28T13:33:58.197 に答える