0

Safari 5 での引用符とアクセントの表示に奇妙な問題があります。次のコードで font-face フォントを使用しています。

@font-face {
    font-family: 'MendozaRomanStd-Book';
    src: url('fonts/mendozaromanstd-book.eot');
    src: url('fonts/mendozaromanstd-book.svg#mendozaromanstd-book') format('svg'),
             url('fonts/mendozaromanstd-book.eot?#iefix') format('embedded-opentype'),
             url('fonts/mendozaromanstd-book.woff') format('woff'),
             url('fonts/mendozaromanstd-book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Firefox、Chrome、Safari 6、iOS6、および IE では、フォントが正しく表示されます。

サファリ6

ただし、Safari 5 では次のように表示されます。

サファリ5

同じ文字セット、同じ html。Safari 5 での font-face の表示に関する報告された問題をあらゆる場所で検索しましたが、何か他のことが起こっているのではないかと思わせるような報告はありません。ここで何が起こっているのか誰にも分かりますか？

4

1 に答える 1

0

Safari 5 では、SVG フォントにアクセントや記号が表示されないことがわかりました。

TTF または WOFF フォントを使用すると表示されますが、SVG では表示されません。

Chrome または Safari 6 にはこの問題はないようです。

@font-face で別のフォントを定義し、ブラウザー固有の CSS で Safari 5 をターゲットにすることで、最終的に修正しました。そう：

/* Font-face for all browsers */
@font-face {
    font-family: 'MendozaRomanStd-Book';
    src: url('fonts/mendozaromanstd-book.eot');
    src: url('fonts/mendozaromanstd-book.svg#mendozaromanstd-book') format('svg'),
         url('fonts/mendozaromanstd-book.eot?#iefix') format('embedded-opentype'),
         url('fonts/mendozaromanstd-book.woff') format('woff'),
         url('fonts/mendozaromanstd-book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

    /* Safari5 fix */
@font-face {
    font-family: 'MendozaRomanStd-Book2';
    src: url('fonts/mendozaromanstd-book.ttf') format('truetype') !important;
    font-weight: normal;
    font-style: normal;
}

.safari5 body {
font-family: 'MendozaRomanStd-Book2', Times new roman, serif;
-webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;
-webkit-text-stroke: rgba(255,255,255,0.01) 0.1px;
}

このコードには、PC の Chrome で Web フォントを正しくレンダリングできるようにするための修正が既に含まれていることに注意してください。標準の fontsquirrel 生成コードでは、これにより恐ろしいジャギーが発生し、フォントのエイリアスは発生しません。Google が対応できるようになるまでは、修正として SVG ファイルを一番上に上げる必要があります。

于 2013-03-24T16:11:38.897 に答える