CSS :: font-size, letter-spacing, line-height 継承テスト
モジラで懺悔の続きかも（笑）。ていうか、こんなところに、昔のトラウマが。。（笑）。これ、こっちに移してこようかなあ。
まあ、それはさておき。今回は、fontまわりの継承テストです。検証対象は、Firefox2, IE6, IE7です。Operaは時間があったら、見てみよう。。
基本のフォント・テキストまわりの定義
html {font-size:small}
html {font-size:medium}
body {
font-size:1.14em;
line-height:1.5em;
letter-spacing:0.17em;
}
font-size:small だと、マメ文字になって、読めないんですよね。。うちのモニタで。。そんなわけで、ちょっと大きめにしている。じゃ、midiumにしたら？とも思うのだが、主流は「small」らしいし、文字がでかいとイヤな人もいるそうな。。でも年寄りは、大きい文字の方が嬉しいんだよ（笑）。
---*---*---*---*---*---
※mediumにしたわ～（笑）。
---*---*---*---*---*---
ま、うちは、Fxで普段見てるので、Fxは、最小フォントサイズというのを好きな文字サイズに出来て、マメ文字サイトに出逢っても苦労はしない。苦労はしないが、デザインが乱れて、リンクをクリックできなかったりすることも多いけど（笑）。
次に、IE6用のフォント・テキストまわりの定義
* html {font-size:small}
* html body {
font-size:0.94em;
line-height:1.4em;
letter-spacing:0.09em;
}
それから、IE7用のフォント・テキストまわりの定義
*+html body {
letter-spacing:0.09em;
line-height:1.4em;
}
IE7は、font-sizeの解釈がFxと同じ様なので、あとは、letter-spacingと、line-heightを調整してみた。
table 関係のフォント・テキストまわり
さて、この状態で、tableを書いてみる。すると、IE6 では、font-sizeもline-heightもletter-spacing もbodyの定義を継承しない。ということで、IE6用にこんなのを追加してみた。IE6用のフォント・テキストまわりの追加定義
* html table {
font-size:inherit;
line-height:inherit;
letter-spacing:inherit;
}
しかし、これは、見事に無視されてしまった。ということで、以下のようにしてみた。
* html table { /* IE6はinherit しないし */
font-size:1em;
line-height:1.4em;
letter-spacing:0.09em;
}
---*---*---*---*---*---
[[閑話休題]]
夕飯の支度してました（笑）。
---*---*---*---*---*---
さて。次は、form関連のフォント・テキストまわりについてだ。
form関連は、input と textarea がミソ
input はどうか
まずFxはfont-family、font-size、letter-spacingが継承されない。ということで、まず、以下を追加する。
input{
font-family:inherit;
font-size:inherit;
letter-spacing:inherit;
}
でも、不思議なことに、font-familyを指定すれば、font-sizeも継承されるのだ。逆に、font-sizeを定義してもfont-familyは、継承されない。
つうことで、こんなんがいいんですかね。
input{
font:inherit;
letter-spacing:inherit;
}
次に、IE6だが。同様に、font-family、font-size、letter-spacing は継承されない。しかも、inheritを無視してくれるので、こんな感じ。
* html form input {
font-family:"Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W4", Osaka, "MS PGothic",sans-serif;
letter-spacing:0.09em;
}
IE7もIE6と同じ（やはり、inherit を無視してるね）。
textareaは、どうか
まずFxはfont-family、font-size、line-height、letter-spacing: が継承されない。ということで、まず、以下を追加する。
textarea {
font:inherit;
line-height:inherit;
letter-spacing:inherit;
}
IE6は、こんな感じ。
* html textarea {
font-family:"Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W4", Osaka, "MS PGothic",sans-serif;
letter-spacing:0.09em;
line-height:1.4em;
}
IE7も同様だ。
※けど、textareaは、line-height:1emの方が見やすいかもね。※
フォント・テキストまわりのまとめ
こんな感じ。
@charset "UTF-8";
/* ++++++ BASIC STRUCTURE ++++++ */
body {
color:#000;
background-color:#fff;
font-family:"Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W4", Osaka, "MS PGothic",sans-serif;
}
/* ++++++ inherit test ++++++ */
html {font-size:medium}
body {
line-height:1.5em;
letter-spacing:0.17em;
}
input {
font:inherit;
letter-spacing:inherit;
}
textarea {
font:inherit;
line-height:inherit;
letter-spacing:inherit;
}
/* \*/
* html {font-size:small}
* html body {
font-size:0.94em;
line-height:1.4em;
letter-spacing:0.09em;
}
* html table {
font-size:1em;
line-height:1.4em;
letter-spacing:0.09em;
}
* html input {
font-family:"Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W4", Osaka, "MS PGothic",sans-serif;
letter-spacing:0.09em;
}
* html textarea {
font-family:"Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W4", Osaka, "MS PGothic",sans-serif;
letter-spacing:0.09em;
line-height:1.4em;
}
*+html body {
letter-spacing:0.09em;
line-height:1.4em;
}
*+html input {
font-family:"Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W4", Osaka, "MS PGothic",sans-serif;
letter-spacing:0.09em;
}
*+html textarea {
font-family:"Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W4", Osaka, "MS PGothic",sans-serif;
letter-spacing:0.09em;
line-height:1.4em;
}
/* */サンプルを作ってみた。
ところで、昔こんなものを作っていた。これが結構今でも自分に役立っている（笑）。
・CSS2 List of property
・List of Elements
これ、MODxで作り直そうかな。。何年かかるんだろうか（笑）。
余談ですが、うちは、XML宣言を入れているので、IE6は、後方互換モードでレンダされています。
---*---*---*---*---*---
追記 IEまわりを見直しました。
@charset "UTF-8";
/* ++++++ BASIC STRUCTURE ++++++ */
body {
color:#000;
background-color:#fff;
font-family:"Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W4", Osaka, "MS PGothic",sans-serif;
}
/* ++++++ inherit test ++++++ */
html {font-size:medium}
body {
line-height:1.5em;
letter-spacing:0.17em;
}
input {
font:inherit;
letter-spacing:inherit;
}
textarea {
font:inherit;
line-height:inherit;
letter-spacing:inherit;
}
/* \*/
* html {font-size:small}
* html body {
font-size:0.94em;
line-height:1.4em;
letter-spacing:0.09em;
}
* html table {
font-size:1em;
line-height:1.4em;
letter-spacing:0.09em;
}
* html input {
font-family:"Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W4", Osaka, "MS PGothic",sans-serif;
letter-spacing:0.09em;
}
* html textarea {
font-family:"Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W4", Osaka, "MS PGothic",sans-serif;
letter-spacing:0.09em;
line-height:1.4em;
}
*+html {font-size:medium}
*+html body {
font-size:0.94em;
letter-spacing:0.09em;
line-height:1.4em;
}
*+html input {
font-family:"Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W4", Osaka, "MS PGothic",sans-serif;
letter-spacing:0.09em;
}
*+html textarea {
font-family:"Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W4", Osaka, "MS PGothic",sans-serif;
letter-spacing:0.09em;
line-height:1.4em;
}
/* */
