2

サイトでWebフォントを使用しています。特定の見出し（、、h1などh2）については、太字のバリアントを使用しています（そしてfont-weight通常に設定しています）。これは、通常のバリアントを使用してhタグをデフォルトの太字の太さのままにするよりもはるかに見栄えがよいためです。font-weight: normalそれ以外の場合は「太字は太字」であるため、指定する必要があります。これは本当にひどいように見えます。

私が抱えている問題は、標準のWebフォントをフォールバックフォントとして指定し、太字の設定を「復元」するにはどうすればよいですか？

たとえば、次のようなことをするかもしれません。

@font-face {
    font-family: "My bold webfont";
    src: url("url/of/webfont/bold/variant");
}

h1 {
    font-family: "My bold webfont", Arial, sans-serif;
    font-weight: normal; 
}

Webフォントが存在する限り問題はありませんが、Webフォントが失敗すると、太字ではないArialになります。

ので「ArialBold」を指定する方法はありますfont-familyかh1（それが機能しないことはわかっていますが、それが望ましい目標です）？または、おそらく@font-face定義では、「これは、割り当てられているものの太字バージョンにのみ適用されます」と言うことができます。したがって、スタイルfont-weight: normalからを省略できますか？h1

4

1 に答える 1

3

font-weight: bold両方の場所で指定してみてください。

@font-face {
    font-family: "My bold webfont";
    src: url("url/of/webfont/bold/variant");
    font-weight: bold;
}

h1 {
    font-family: "My bold webfont", Arial, sans-serif;
    font-weight: bold;
}

これがデモです。 p#one使用中のこの手法を示しています。WOFF Webフォントをサポートしていないブラウザで表示すると、デフォルトのフォントが太字で表示されます。

于 2012-08-28T21:52:07.920 に答える