13

たくさんのフォントを持っていますが、

  • OpenSans-bold.ttf
  • OpenSans-boldItalic.ttf
  • OpenSans-extrabold.ttf
  • OpenSans-italic.ttf
  • OpenSans-light.ttf

このように多くの異なるファイルを作成するのとは対照的に、1 つのファイルだけを作成するにはどうすればよいでしょうか。そして、おそらく私が通常行うように CSS で使用しますか、それともフォトショップで使用するように使用しますか?

例えば

small{font-family:"OpenSans"; font-weight: normal;}
strong{font-family:"OpenSans"; font-weight: bold;}
h2 {font-family:"OpenSans"; font-weight: bolder;}

どんな助けでも感謝します。

4

2 に答える 2

11

異なる書体 (通常、イタリック、太字など) を使用する場合は、異なるフォント ファイルが必要です。これは、各書体が個別のフォント ファイルとして実装されているためです (実際には、異なるブラウザーをカバーするために、異なるフォント形式でも必要です)。 ）。

ただし、それらを単一のフォント ファミリとして使用することもできます。たとえば、Arial だけを使用し、CSS を直接または間接的に使用してイタリック体と太字を適用します (たとえば、h2要素はデフォルトで太字になります)。このためには、フォント ファミリを宣言する必要があります。

たとえば、FontSquirrel は、各書体をフォント ファミリとして定義する CSS コードを生成します。これは可能ですが、非論理的で不便です。たとえば、

@font-face {
    font-family: 'open_sansbold';
    src: url('opensans-bold-webfont.eot');
    src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-bold-webfont.woff') format('woff'),
         url('opensans-bold-webfont.ttf') format('truetype'),
         url('opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

物事をより論理的にするには、font-weight値を変更し、font-family名前を別@font-faceのルールで使用する名前に変更します (ファミリーの異なる書体用)。例えば、

@font-face {
    font-family: 'Open Sans';
    src: url('opensans-bold-webfont.eot');
    src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-bold-webfont.woff') format('woff'),
         url('opensans-bold-webfont.ttf') format('truetype'),
         url('opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: bold;
    font-style: normal;
}
于 2013-01-30T15:34:21.513 に答える
4

複数のフォントを 1 つのファイルに組み合わせる簡単な方法は、base64 でエンコードして CSS に埋め込むことです。それでもフォントは異なり、全体のサイズは大きくなります。アップロードするフォント ファイルの css を作成できるさまざまなオンライン ツールがあります。

于 2013-01-30T12:18:12.467 に答える