15

@ font-faceスタイルを定義するとき、このSOの質問で説明されているように、参照されるファイルがフォントの太字、斜体、または太字の斜体バージョンのいずれであるかを定義できます。

同じフォントに複数のフォントファイルを追加するにはどうすればよいですか？

例：

@font-face {
    font-family: 'FontinSans';
    src: local('☺'), url('fontin_sans_regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FontinSans';
    src: local('☺'), url('fontin_sans_bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

ただし、FontSquirrelはこの方法で@font-faceキットを生成しません。彼らは代わりにこのようなことをします：

@font-face {
    font-family: 'FontinSans';
    src: local('☺'), url('fontin_sans_regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FontinSansBold';
    src: local('☺'), url('fontin_sans_bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

つまり、CSSファイルでは、次のようなことを行う必要があります。

h2 {
    font-family: 'FontinSansBold', Verdana, sans-serif;
    font-weight: normal;
}

Font Squirrelがfont-weightおよびfont-style宣言を使用して、太字と斜体のバリアントを区別しないのはなぜですか？別のフォントファミリを使用するのはなぜですか？一部のブラウザでのこの機能のサポート（の欠如）について何か知っていますか？

4

4 に答える 4

17

デフォルトでは、Font-Squirrelは、仕様に従わないユーザーエージェント（およびを無視するエージェント）のサポートを強化するためにこれを行いfont-weightますfont-style。

これらの古いユーザーエージェントを気にしない場合は、@font-faceキットジェネレータのエキスパートセクションで利用できる「スタイルリンク」オプションを有効にすることができます。IE8以下では、番号付きの値は無視され、and （および対応する重み値）font-weightのみがサポートされることに注意してください。normalbold400700

于 2010-09-25T21:28:46.750 に答える
9

フォントが太字か斜体かを判断するために、フォントの内部をざっと見て回ることが含まれます。また、IEがスタイルリンクを取得するには、フォント内に特定のビットを設定する必要があります。ほとんどの太字/斜体フォントにはこれらのビットが設定されていますが、すべてではありません。これをより自動化する方法に取り組んでいます。

于 2011-04-14T00:34:39.650 に答える
3

Internet Explorer 8は、フォントの太さとフォントスタイルをサポートしていない「古い」ユーザーエージェントの1つである可能性があります。

@ font-faceとfont-familyを使用して、太字/斜体/太字を自動化しようとしています。

これまでの私の試みは何ももたらさなかった。これが問題を示すページです。

http://clearimageonline.com/apps/playground/fonts/test_IE.html

ここで誰かがこれに遭遇し、IE8で動作するソリューションを持っていますか？

私はこれに対する答えを今週のほとんどを検索し、いじりました。IE8は私にこれをさせないようです。

これが提案された回避策です（非常に醜い回避策）...

http://clearimageonline.com/apps/playground/fonts/proposed_IE.html

これらのテストページは、InternetExplorer専用に設計されています。このテストはIEに限定されています。クロスブラウザ機能は、明らかに最終的なソリューションの一部になります。

于 2011-03-25T19:05:11.930 に答える
0

デフォルトのFontSquirrelのアプローチを使用する場合の問題は、フォールバックフォントが読み込まれると、すべてが通常に設定されているため、すべての重みが失われることです。スタイルリンクが最善のアプローチだと思います。

IE8ユーザーが心配な場合は、条件付きcssを使用できます。

于 2015-01-24T13:58:53.090 に答える