2

複数のウェイトとスタイル (レギュラー、ボールド、イタリック、ボールド イタリック) を持つ単一のフォント ファイルにフォント ファミリがあり、@font-face タグを使用してフォント フェイスを定義したいと考えています。どうやってやるの？

私がこれを行う場合：

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

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

... 通常の書体で、Regular と Bold の両方が表示されます。

h1、h2、h3 などに font-weight: bold を設定すると、これらの要素が電子太字として表示されます。1 つのフォント ファイルから複数の書体を抽出するにはどうすればよいですか?

4

2 に答える 2

2

実際にすべてのウェイトとスタイルを単一のフォント ファイルに埋め込んでいる場合、唯一の解決策は、それらの定義を複数のファイルに分割することだと思います (すべてがそれに関係するかどうかはわかりません)。私の知る@font-face限り、別々のファイルとして扱います。

通常、Web 上で使用できるように公開されているフォント ファミリは、1つのファイルに含まれるのではなく、ウェイトとスタイルが個別のファイルに分割されています。フォントが別のファイルとしてまだ利用可能でないことを確認するために検索する場合があります。私が知っているすべての例では、常にそれらが別々のファイルになっています。そうすれば、さまざまなウェイト/スタイルに別のファイルを使用できますが、次のように同じ名前を使用できます。font-family

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

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

@font-face {
    font-family: 'myFont';
    src: url('font-ITALIC.eot');
    src: url('font-ITALIC.eot?#iefix') format('embedded-opentype'),
       url('font-ITALIC.woff') format('woff'),
       url('font-ITALIC.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'myFont';
    src: url('font-BOLDITALIC.eot');
    src: url('font-BOLDITALIC.eot?#iefix') format('embedded-opentype'),
        url('font-BOLDITALIC.woff') format('woff'),
        url('font-BOLDITALIC.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}
于 2012-11-06T17:37:23.770 に答える
0

このシンプルなツールを使用すると、1 つのフォント ファイルを複数のファイルに分割できます。Mac と Windows の両方で動作します。

http://peter.upfold.org.uk/projects/dfontsplitter

それが役立つことを願っています

于 2015-02-24T13:54:22.547 に答える