1

fontsquirrelを使用して、フォント「formata」の font-face ファイルを生成しました。私の Mac では、フォントは Chrome と Safari の両方で見栄えがします (どちらも Webkit を使用しているため、これは理にかなっているようです)。Android (Chrome) や iPad (Safari) でも問題なく表示されます。

ただし、Windows では、フォントが非常に奇妙にレンダリングされます。一部の文字は、1px のパディング ボトムがあるように見えます。一部の文字は、高さが 1 ピクセルから小さいようにも見えます。

ClearType をオフにしようとしましたが、それでも同じです。ブラウザは関係ないようです。

以下は、私がどのように見えるかのスクリーンショットです。 Windows でのフォント レンダリングの例

4

1 に答える 1

2

フォントサイズを調整してみてください。Windowsの一部のカスタムフォントは、特定のフォントサイズではうまく機能しません。いくつかの異なるサイズを試してください。

私のために働く例：

@font-face {
    font-family: 'PaddingtonSCPlainSmallCapsRom';
    src: url('/assets/fonts/paddingtonsc-webfont.eot');  /* IE9 Compat Modes */
    src: url('/assets/fonts/paddingtonsc-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/assets/fonts/paddingtonsc-webfont.woff') format('woff'),  /* Modern Browsers */
         url('/assets/fonts/paddingtonsc-webfont.ttf') format('truetype'),  /* Safari, Android, iOS */
     url('/assets/fonts/paddingtonsc-webfont.svg#webfontCykG2Qou') format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
  /* font-variant: normal; don't include this since webkit will ignore the whole rule: https://bugs.webkit.org/show_bug.cgi?id=25000 */
}

body {
  font: normal 75%/1.5em PaddingtonSCPlainSmallCapsRom, Arial, sans-serif;
}
于 2013-01-14T03:46:49.760 に答える