9

私はRoboto自分のサイトで名前が付けられた Google のフォントを実装しています。

boldとの 2 種類が必要regularです。

ここに画像の説明を入力

だから私は両方のタイプをチェックし、ダウンロードボタンを押しました:

ここに画像の説明を入力

しかし、ダウンロードしたrarファイルでは、すべてのフォントスタイルを取得しました（選択しなかったものも）：

ここに画像の説明を入力

とにかく、通常のフォントをテストしたかったのです:(フォントは現在私のサイトにあり、Googleからロードされていません)。

（フォントコンバーター（ http://www.font2web.com/ ）を使用して、他の拡張子タイプ（eot、woff、svg）を取得しました）

だから私はした：

 <style type="text/css">

    @font-face {
    font-family: 'Roboto';
    src: url('/font-face/Regular/Roboto-Regular.eot'); /* IE9 Compat Modes */
    src: url('/font-face/Regular/Roboto-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/font-face/Regular/Roboto-Regular.woff') format('woff'), /* Modern Browsers */
         url('/font-face/Regular/Roboto-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/font-face/Regular/Roboto-Regularo.svg#svgFontName') format('svg'); /* Legacy iOS */
    }


   body  { font-family: 'Roboto', sans-serif; }

    </style>

質問 ：

Roboto boldにスタイルを適用したいとしましょうdiv。

私はこのようにする必要があります：

 div  { 
       font-family: 'Roboto', sans-serif;
       font-weight:bold
      }

または、これを行う必要があります（最初からやり直してください...）

@font-face {
    font-family: 'Roboto-bold';
    src: url('/font-face/Regular/Roboto-bold.eot'); /* IE9 Compat Modes */
    ...
    }

その後

 div  { font-family: 'Roboto-bold', sans-serif; }
4

4 に答える 4

9

これはあなたがしなければならないことです：

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: /* links to the Regular files */;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: /* links to the Bold files */;
}

@font-face両方のルールで同じフォント名が使用されていることに注意してください。これで、ブラウザはフォント「Roboto」に 2 つのバリアントが存在することを認識します。ブラウザーは、CSS に基づいて最適なバリアントを自動的に選択します。たとえば、次のようになります。

div {
    font-family: Roboto, sans-serif;
    font-weight: bold;
}

ここで、ブラウザは Bold フォント ファイルを選択します。それはすべて自動です。@font-faceルールを正しく設定していることを確認する必要があります。

于 2013-06-18T17:13:55.550 に答える
1

font-faceあなたの質問から、Roboto フォントの通常バージョンに関連する1 つのルールのみを宣言しているように見えます。

質問の CSS を使用する:

div {
    font-family: Roboto, sans-serif;
    font-weight: bold;
}

ブラウザがフォントを偽の太字にします。その理由は、太字バージョンのフォントに font-face ルールが含まれていないためです。ここを参照してください: http://alistapart.com/article/say-no-to-faux-bold

他の人 (@yotam など) が言及しているように (フォントの提供方法に関係なく)、フォントの重みごとに font-face ルールを宣言する必要があります。

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: /* links to the Regular files */;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: /* links to the Bold files */;
}

次に、そのフォントの太さを次のように使用します。

body {
    font-family: Roboto, sans-serif;
    font-weight: 400;
}
h1 {
    font-family: Roboto, sans-serif;
    font-weight: 700;
}

ではなく、実際のフォントの太さの値を使用することを強調しますfont-weight: bold。前述のように、使用font-weight: boldすると決定はブラウザに委ねられます。

ある時点で、ウェイトが のフォントを使用することがあります700, 900。大胆700に、より900大胆に。重みの宣言font-weight: boldが900使用される場合、これは必要な効果ではありません。

于 2013-06-18T18:43:19.953 に答える
0

最初からやり直す必要はありません..@font-face自分のスタイルになったら、追加する必要があるのは、あなたが言ったようにfont-familyだけです。

div  { 
       font-family: 'Roboto', sans-serif;
       font-weight:bold
      }

そして、明確にするために、このように body 要素で彼を使用することにより、フォントをデフォルトとして作成できます

body  { 
       font-family: 'Roboto', sans-serif;
       font-weight:bold
      }

編集：

フォントを Web サイトのフォルダーにダウンロードすることを検討している場合は、代わりに Web サイトの読み込み時間をかけて、次のコードを に追加する必要があります@font-face。

@font-face {
    font-family: 'Roboto';
    src: url('fonts/font.ttf'); /* IE9 Compat Modes */
    /*....*/
    }

フォントはfontsフォルダー内にある必要があり、彼はfontという名前を付けました。

于 2013-06-18T10:09:03.147 に答える