＞ ＞ CSSでbold指定した文字の幅を狭くする方法

CSSでbold指定した文字の幅を狭くする方法

Posted at September 17,2013 1:11 AM
Tag：[CSS, Font]

CSSでbold指定した文字の幅を狭くする方法を紹介します。

bold指定した文字の幅を狭くする

このエントリーはCSSのビギナーの方向けの内容です。

１．問題点

フォントをstrong要素やCSSなどを使ってbold（太字）を指定すると、通常の文字より幅が若干広くなります。

通常の文字

abcdefgあいうえお

bold指定の文字

abcdefgあいうえお

bold指定の文字を通常の文字と同じ幅にしたいのですが、方法が分かりません。

２．bold指定した文字の幅を狭くする

bold指定した文字の幅を狭くするには、letter-spacingプロパティを利用し、値にマイナスを設定します。

単位はpx指定、em指定が可能です。

strong {
    letter-spacing: -1px;
}

上記のletter-spacingプロパティを適用したときの文字幅の比較を以下に示します。Firefoxであれば同じ幅に見えると思います。

通常の文字

abcdefgあいうえお

bold指定の文字

abcdefgあいうえお

３．注意事項

letter-spacing適用後の見栄えは、ブラウザや適用しているフォントおよびフォントサイズなどに依存します。

よって、bold指定の文字幅は通常の文字の幅と同じにならない場合があります。

また当然のことですが、文字幅を狭くすると読みにくくなる場合があります。

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


コメントする
greeting

*必須

*必須（非表示）


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）