8

  1. Safari でフォントを読み取るのに問題があります。OTF を TTF に変換しました - 太字と通常の 2 つのフォントです。どちらも Chrome と Firefox で問題ありません。しかし、Safari では太字フォントのみが機能し、通常のフォントは機能しません。

  2. Web サイトから変換した EOT フォントが IE で読み取れません。OTF を EOT に変換するより良い方法はありますか?

これが私のコードです：

<style type="text/css">
//Bariol_Bold
@font-face{
    font-family: Bariol_Bold;
    src:url("fonts/bariol_bold.eot"); /*For ie browser*/
}

@font-face{ 
    font-family: Bariol_Bold;
    src:url("fonts/bariol_bold.ttf"); /*For other browsers*/
}

//Bariol_Regular
@font-face{
    font-family:bariol_regular;
    src:url("fonts/bariol_regular.eot"); /*For ie browser*/
}

@font-face{ 
    font-family: bariol_regular;
    src:url("fonts/bariol_regular.ttf"); /*For other browsers*/  
</style>

<p style="font-family: Bariol_Bold; font-size: 20px;">hello world</p>
<p style="font-family: bariol_regular; font-size: 20px;">hello world</p>
4

1 に答える 1

9

複数のブラウザにサーバーを提供するには、 Paul Irish の Bulletproof @font-faceSyntaxまたはFontSpring の@font-faceSyntaxを確認してください。これには、異なるファイル タイプで同じフォントを複数宣言する必要があります。

基本的な宣言は次のようになります

@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
   url('myfont-webfont.woff') format('woff'), 
   url('myfont-webfont.ttf')  format('truetype'),
   url('myfont-webfont.svg#svgFontName') format('svg');
}

私はFontSquirrel の@font-faceジェネレーターも好みますが、他の代替案を Google で検索できます。FontSquirrel は変換するフォントを 1 つだけ必要とし、.zip必要なフォント タイプと生成されたフォントのサンプル デモを含む基本ファイルを提供します。

于 2013-02-15T06:10:40.953 に答える