TopCSS > 2013年9月
2013年9月17日

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

September 17,2013 1:11 AM
Tag:[, ]
Permalink

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

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

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

1.問題点

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

通常の文字

abcdefgあいうえお

bold指定の文字

abcdefgあいうえお

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

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

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

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

strong {
    letter-spacing: -1px;
}

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

通常の文字

abcdefgあいうえお

bold指定の文字

abcdefgあいうえお

3.注意事項

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

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

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

Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3