私のウェブサイトでは、見出しとサブタイトルに 2 つの特別なフォントを使用しています。IE、Firefox、および Chrome の PC で正常に動作しています。ただし、Safari および Chrome の Mac では、フォントが太字になり、わずかにぼやけて表示されます。私が使用している特定のフォントは、Utopia と Helvetica Neue Condensed Bold です。otf ファイルに基づいて font squirrel を使用してフォント キットを生成しました。font squirrel によって生成された CSS を使用しています。ウェブサイトはhttp://shapecast.benmango.co.ukで見ることができます。Mac と PC のさまざまなブラウザーでの結果を比較するスクリーンショットも次の場所にあります。
CSSに使用しているコードは次のとおりです。
@font-face {
font-family: 'Utopia';
src: url('/fonts/utopiastd-regular-webfont.eot');
src: url('/fonts/utopiastd-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/utopiastd-regular-webfont.woff') format('woff'),
url('/fonts/utopiastd-regular-webfont.ttf') format('truetype'),
url('/fonts/utopiastd-regular-webfont.svg#Utopia') format('svg');
font-weight: normal;
font-style: normal;
font-variant:normal;
}
@font-face {
font-family: 'HelveticaNeueLTStdCnBold';
src: url('/fonts/helveticaneueltstd-bdcn-fs.eot');
}
@font-face {
font-family: 'HelveticaNeueLTStdCnBold';
src: url('/fonts/helveticaneueltstd-bdcn-fs.ttf') format('truetype'),
url('/fonts/helveticaneueltstd-bdcn-fs.svg#HelveticaNeueLTStdCnBold') format('svg');
font-weight: bold;
font-style: normal;
font-variant:normal;
}
私はこの問題に数日間取り組んできましたが、どこにも到達していないようです。Helvetica Neue 太字書体のフォントの太さを通常から太字に変更したところ、改善が見られました。また、SVG の行を一番上に移動しようとしましたが、それは役に立ちません。
不思議なことに、Mac 上の Chrome では、3 つのメイン パネルの 1 つ (メイン ヘッダーの下) にカーソルを合わせると、フォントがより鮮明になり、本来の見た目になります。ただし、Safariでは違いはありません。
どなたかアドバイスいただけると助かります。