あれっ、ちっちゃくなっちゃった!!
こんにちは、マークアップのmikaです。
みなさん、箇条書きなどの文頭に記号を入れたら、その記号がほかの文字よりも小さく表示されて「な!ちっちゃっ!」ってなった経験、ありませんか?(´・ω・`)
今日は、何でそんなことになるのか?とその対処法をチャチャっと手短にお話ししたいと思います。
1.こんなときに起こります
- HTMLの文字コードが「UTF8」のとき かつ
- CSSでfont-familyを指定して、最初に欧文フォントをしていしているとき
すべての欧文フォントっていうわけではないですし、WindowsとMacでも違うようです。
2.実際に見てみよう
Verdana、Arial、Times New Roman で試してみます。
Verdanaは大丈夫っぽいけど、ArialとTimesはけっこうちっちゃいですね~
3.ほんじゃ、直してみよう
単純にfont-familyから欧文フォントを取ってしまえばよいのですが、それでは芸がないし、1行で終わってしまうので、1文字目限定でfirst-letter疑似要素を使いましょう!
.bullet { font-family: "Times New Roman", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } .bullet:first-letter { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
[実際の表示]
■1つ目に「Times New Roman」、first-letterの指定なし
■1つ目に「Times New Roman」、first-letterの指定あり
ほーらなおった。
たったこれだけで、気持ち悪さが解消です\(^o^)/
気になったら是非やってみてくださいね。