下記のテキストに適用されるスタイル宣言は、つぎのとおりです。
BODY {font-size: 12px;}
.one {font: italic small-caps 13pt Helvetica;}
.two {font: 150%/150% serif;}
.three {font: 150%/150% sans-serif;}
.four {font: small/200% cursive;}
.five {font: italic small-caps 900 150%/150% sans-serif;}
.six {font: italic small-caps 100 150%/300% sans-serif;}
.seven {font: italic small-caps 900 150%/2em monospace;}
.eight {font: italic small-caps 500 150%/1in sans-serif;}
.nine {font: oblique normal 700 18px/200% sans-serif;}
.ten {font: normal 400 80%/2.5 sans-serif;}
SPAN.color {background-color: silver;}
この要素にはスタイルがついていませんから、BODY 要素から 12px の font-size を継承するはずです。 以下のテストでは、これを「ベースフォントサイズ」といいます。
この要素は13ptで小大文字でイタリックの Helvetica のはずです。
この要素は serif フォントのはずです。 そのフォントサイズはベースフォントサイズの150%のはずで、また行の高さはその値の150%(それぞれ18px, 27px)のはずです。 これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。
この要素は sans-serif フォントのはずです。 そのフォントサイズはベースフォントサイズの150%のはずで、また行の高さはその値の150%(それぞれ18px, 27px)のはずです。 これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。
この要素は cursive フォントで、サイズは 'small', 行の高さはテキストの実際のサイズの高さの200%のはずです。
たとえば、small というフォントサイズ値が10pxと計算されたならば、行の高さは20pxのはずです。
フォントサイズの実際値はユーザエージェントに依存します。
これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。
この要素は sans-serif フォントで、イタリックにされており、小大文字で、ウエイトは900のはずです。 そのフォントサイズはベースフォントサイズの150%のはずで、また行の高さはその値の150%(それぞれ18px, 27px)のはずです。 これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。
この要素は sans-serif フォントで、イタリックにされており、小大文字で、ウエイトは100のはずです。 そのフォントサイズはベースフォントサイズの150%のはずで、また行の高さはその値の300%(それぞれ18px, 54px)のはずです。 これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。
この要素は monospace フォントで、イタリックにされており、小大文字で、ウエイトは900のはずです。 そのフォントサイズはベースフォントサイズの150%のはずで、また行の高さは2em、またはその要素のフォントサイズの2倍(それぞれ18px, 36px)のはずです。 これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。
この要素は sans-serif フォントで、イタリックにされており、小大文字で、ウエイトは500のはずです。 そのフォントサイズはベースフォントサイズの150%、または18pxのはずで、また行の高さは1inのはずです。 これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。
この要素は sans-serif フォントで、oblique にされており、小大文字ではなく、ウエイトは700のはずです。 そのフォントサイズは18pxのはずで、また行の高さは36px(この要素のフォントサイズの200%)のはずです。 これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。
この要素は sans-serif フォントで、ウエイトは400のはずです。 そのフォントサイズは12pxの80%あるいは9.6pxのはずで、また行の高さはその2.5倍あるいは24pxのはずです。 これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。
この要素は sans-serif フォントで、イタリックにされており、小大文字で、ウエイトは100のはずです。 そのフォントサイズはベースフォントサイズの150%のはずで、また行の高さはその値の300%(それぞれ18px, 54px)のはずです。 テキストには銀色の背景がついているはずです。 背景色はインライン要素に設定されていますから、テキストだけをカバーしており、行間のスペースはカバーしていないはずです。
| TABLEテストコーナー | |
この要素にはスタイルがついていませんから、BODY 要素から 12px の font-size を継承するはずです。 以下のテストでは、これを「ベースフォントサイズ」といいます。 この要素は13ptで小大文字でイタリックの Helvetica のはずです。 この要素は serif フォントのはずです。 そのフォントサイズはベースフォントサイズの150%のはずで、また行の高さはその値の150%(それぞれ18px, 27px)のはずです。 これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。 この要素は sans-serif フォントのはずです。 そのフォントサイズはベースフォントサイズの150%のはずで、また行の高さはその値の150%(それぞれ18px, 27px)のはずです。 これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。
この要素は cursive フォントで、サイズは 'small', 行の高さはテキストの実際のサイズの高さの200%のはずです。
たとえば、 この要素は sans-serif フォントで、イタリックにされており、小大文字で、ウエイトは900のはずです。 そのフォントサイズはベースフォントサイズの150%のはずで、また行の高さはその値の150%(それぞれ18px, 27px)のはずです。 これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。 この要素は sans-serif フォントで、イタリックにされており、小大文字で、ウエイトは100のはずです。 そのフォントサイズはベースフォントサイズの150%のはずで、また行の高さはその値の300%(それぞれ18px, 54px)のはずです。 これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。 この要素は monospace フォントで、イタリックにされており、小大文字で、ウエイトは900のはずです。 そのフォントサイズはベースフォントサイズの150%のはずで、また行の高さは2em、またはその要素のフォントサイズの2倍(それぞれ18px, 36px)のはずです。 これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。 この要素は sans-serif フォントで、イタリックにされており、小大文字で、ウエイトは500のはずです。 そのフォントサイズはベースフォントサイズの150%、または18pxのはずで、また行の高さは1inのはずです。 これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。 この要素は sans-serif フォントで、oblique にされており、小大文字ではなく、ウエイトは700のはずです。 そのフォントサイズは18pxのはずで、また行の高さは36px(この要素のフォントサイズの200%)のはずです。 これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。 この要素は sans-serif フォントで、ウエイトは400のはずです。 そのフォントサイズは12pxの80%あるいは9.6pxのはずで、また行の高さはその2.5倍あるいは24pxのはずです。 これをもっと効果的にテストするという目的で、余分なテキストが組み込まれています。 この要素は sans-serif フォントで、イタリックにされており、小大文字で、ウエイトは100のはずです。 そのフォントサイズはベースフォントサイズの150%のはずで、また行の高さはその値の300%(それぞれ18px, 54px)のはずです。 テキストには銀色の背景がついているはずです。 背景色はインライン要素に設定されていますから、テキストだけをカバーしており、行間のスペースはカバーしていないはずです。 | |