web-dev-qa-db-ja.com

CSSで複数の@ font-faceルールを使用する

CSSで@font-face以上のルールを使用するにはどうすればよいですか？

これをスタイルシートに挿入しました：

body {
    background: #fff url(../images/body-bg-corporate.gif) repeat-x;
    padding-bottom: 10px;
    font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}

@font-face {
    font-family: 'GestaReFogular';
    src: url('gestareg-webfont.eot');
    src: local('☺'),
         url('gestareg-webfont.woff') format('woff'),
         url('gestareg-webfont.ttf') format('truetype'),
         url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}

これは現在、サイト上のテキスト全体にのみ適用されます。しかし、h1を指定して別のフォントを使用したいと思います。これどうやってするの？

htmlcssfontsfont-facewebfonts
64
Tim

以下に興味があるかもしれないことに注意してください。

IE9で動作しないカスタムWebフォント

これには、以下に表示されるCSSのより詳細な内訳が含まれています（IE6-9で動作するようにする調整について説明しています）。

@font-face {
  font-family: 'Bumble Bee';
  src: url('bumblebee-webfont.eot');
  src: local('☺'), 
       url('bumblebee-webfont.woff') format('woff'), 
       url('bumblebee-webfont.ttf') format('truetype'), 
       url('bumblebee-webfont.svg#webfontg8dbVmxj') format('svg');
}

@font-face {
  font-family: 'GestaReFogular';
  src: url('gestareg-webfont.eot');
  src: local('☺'), 
       url('gestareg-webfont.woff') format('woff'), 
       url('gestareg-webfont.ttf') format('truetype'), 
       url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}

body {
  background: #fff url(../images/body-bg-corporate.gif) repeat-x;
  padding-bottom: 10px;
  font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}

h1 {
  font-family: "Bumble Bee", "Times New Roman", Georgia, Serif;
}

あなたのフォローアップの質問：

Q。たとえば、「Bumble bee」などのフォントを使用したいと思います。 @font-faceを使用して、そのフォントをユーザーのコンピューターで使用可能にするにはどうすればよいですか？

Bumble Beeのフォントまたはファイルの名前がわからないので、それに応じて調整し、上記で示したように、フォントフェース宣言を使用する前に（前に来るように）することに注意してください。

Q。他の@font-face書体「GestaRegular」も使用できますか？同じスタイルシートで両方を使用できますか？

私の例で示したように、それらを一緒にリストしてください。両方を宣言できない理由はありません。 @font-faceが行うことは、ブラウザにダウンロードしてフォントファミリを利用可能にするよう指示することだけです。参照： http://iliadraznin.com/2009/07/css3-font-face-multiple-weights

85
Jared Farrish
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Thin.otf);
    font-weight: 200;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Light.otf);
    font-weight: 300;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Regular.otf);
    font-weight: normal;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Bold.otf);
    font-weight: bold;
}
h3, h4, h5, h6 {
    font-size:2em;
    margin:0;
    padding:0;
    font-family:Kaffeesatz;
    font-weight:normal;
}
h6 { font-weight:200; }
h5 { font-weight:300; }
h4 { font-weight:normal; }
h3 { font-weight:bold; }
8
Surya R Praveen