ちょっと前ですが、、右上の親知らずを抜きました。
以前に左上を抜いた時は途中で歯が砕けてしまい、口腔外科で手術するはめになり非常にトラウマだったのですが、今回は無事に抜けてくれました。
神はいるんや…！
さて、先日Webの授業資料をまとめていて、ちょっと気になることがあったので検証してみました。
CSSの「font-style」ってプロパティ。文字を斜体にしたりするプロパティです。
値には「normal（標準）」「italic（イタリック体）」「oblique（斜体）」なんかが指定できます。
「italic（イタリック体）」と「oblique（斜体）」の違い
そもそもイタリックって斜体のことじゃないの？なんで別れてんの？
って方もいらっしゃると思います。
officeのソフトなんかだと斜体が「 I 」のアイコンになっているので、
「Italic」＝「斜体」のイメージが強いんですよね。
日本語に関して言えば、間違っているわけではないんですが、
「イタリック体 ＝ 斜体」は厳密に言うと実はちょっと違うのです。
本来「イタリック体」というのはアルファベット書体の一つで、筆記体に似た装飾が特徴。特に小文字で影響が顕著です。
元々は15世紀のイタリア・ヴェネツィアで聖書の紙面スペースを節約するために考案されたのが由来…なのだそうです。
対して「斜体」は文字にシアーの変形をかけて、強引に傾けた形状です。
まずは下の図を見てみてください。
共に斜めの形にはなりますが、文字の形がそもそも違っていますね。
共に斜めの形にはなりますが、文字の形がそもそも違っていますね。
フォントにもよりますが、イタリック体にはそれ用にデザインされたグリフ（形状）があるわけです。
 |
| フォントは英字用フォントの「Georgia」 |
ちなみに日本語ではどうなるかというと、日本語フォントにはアルファベットのイタリック体のように
筆記体のような形状の情報がありませんので、単純に文字を変形して傾けた状態になります。
日本語ではイタリック体と斜体がほぼ同義になってしまうのはこのためです。
 |
| ですがもちろんフルパワーであなたと闘う気はありませんからご心配なく･･･ |
つまり、イタリック体が使えるフォントであればイタリック体を適用し、
そうでなければ斜体に変形しますよ、みたいな感じですね。
CSSによるfont-styleプロパティの検証
ということで、イタリック体と斜体の違いはご理解いただけたかと思います。
ではこれをCSSのfont-styleプロパティで再現するとどうなるのか、検証してみましょう。
まずは日本語から。ソースはこんな感じです。
それぞれの段落にclassを付けて、font-styleのかかり方を見てみます。
[html]
<body>
<p class="a">私の戦闘力は530000です。</p>
<p class="b">私の戦闘力は530000です。</p>
<p class="c">私の戦闘力は530000です。</p>
</body>
[css]
body{font-family: "ＭＳ Ｐゴシック"}
.a {font-style:normal;}
.b {font-style:italic;}
.c {font-style:oblique;}
Internet Explorerで表示してみると…
上段が標準、中段がイタリック体、下段が斜体です。
…やはり日本語の場合イタリック体と斜体は同じですね。
…やはり日本語の場合イタリック体と斜体は同じですね。
さてさて、お次は半角英数字。ソースはこんな感じでhtmlのテキストは英字に。
CSSでフォントを「Times New Roman」に指定しました。
[html]
[css]
これをInternet Explorerで表示してみます。
英字であればitalicとobliqueで表示が変わるはずなので
中段がイタリック体、下段が斜体の表示になってい…ま……せん…
CSSでフォントを「Times New Roman」に指定しました。
[html]
<body>
<p class="a">abcdefg</p>
<p class="b"> abcdefg </p>
<p class="c"> abcdefg </p>
</body>
[css]
body{ font-family:" Times New Roman "}
.a { font-style:normal;}
.b { font-style:italic;}
.c { font-style:oblique;}
これをInternet Explorerで表示してみます。
英字であればitalicとobliqueで表示が変わるはずなので
中段がイタリック体、下段が斜体の表示になってい…ま……せん…
「あれれ～おかしいぞー？」
本来であれば中段がイタリック体、下段が斜体の表示になる予定だったのですが…同じですね。
両方ともイタリック体になってしまいました…
これが今回、私が「ホワイ？なぜ？」となったポイントです。
調べてみたところ、CSSの仕様によると以下のようになるようです。
normal
標準のフォントで表示。初期値。
italic
イタリック体として用意されたフォントで表示。
それがない場合は斜体として用意されたフォントで表示。
oblique
斜体として用意されたフォントで表示。
それがない場合はイタリック体として用意されたフォントで表示。
なお、イタリック体も斜体も用意されていないフォントの場合は、通常のフォントを斜めに倒す処理をして表示。
[参考URL]
- https://www.w3.org/TR/css-fonts-3/#font-style-prop
- http://www.htmq.com/style/font-style.shtml
- http://www.osaka-kyoiku.ac.jp/~joho/html5_ref/css/font-style_css.php
今回のサンプルの場合、「Times New Roman」というフォントを適用しましたが
このフォントにはイタリック体のグリフがあり、斜体のグリフはないため、
共にイタリック体が適用された…ということでしょう。
ということで、「イタリック体」と「斜体」のそれぞれが個別に用意されているフォント以外の場合、
「italic」「oblique」ともに同じ表示になる、ということのようですね。
この仕様だと大体italicとobliqueは同じになってしまいます。）
ちなみにWordの欧文で標準となっている「century」で試したところ両方「斜体」になりました。
centuryは「イタリック体」のグリフを持っていないのです。
 |
| - century - |
※理系の論文などでは数式の表現するときに、「イタリック体」を使用することになるため、
「Times New Roman」などのイタリック体が利用できるフォントがよく利用されるようです。
メイリオには斜体が効かないってばよ
このフォントは従来の「MS Pゴシック」なんかよりもテキストが滑らかに表示されるため、Webサイトの表示用でもよく指定されます。
ただ、このメイリオを指定している場合、日本語部分に斜体のスタイルは反映されなくなります。
「イタリック体のスタイルがない」のではなく、「イタリック体の日本語部分が標準のスタイルで設定されている」フォントなのです。
 |
| - メイリオ - 英数字のところには斜体がかかります。 |
メイリオを表示フォントに指定している場合は、斜体のスタイルが適用できないということは
覚えておいた方がよさそうです。
どうしても斜体を使わなくてはいけないテキストには、CSSで別のフォントを充てるとか
別途の対応が必要になりそうですね。
ブラウザ間での表示の違い
その他のブラウザでは表示はどうなのでしょうか？
「Google chrome」と「Mozilla firefox」、新ブラウザ「Microsoft Edge」でも確認してみました。
[CSS]
body { font-family: "Times New Roman";}
.a { font-style:normal;}
.b { font-style:italic;}
.c { font-style:oblique;}
[HTML]
<body>
<p class="a">abcdefg</p>
<p class="b">abcdefg</p>
<p class="c">abcdefg</p>
</body>
まずはInternet Explorerでの表示をもう一度確認しておきます。
 |
| Internet Explorer 11 |
続いてEdge。
 |
| Microsoft Edge |
firefox
 |
| Mozilla Firefox |
どれも一緒ですね。
最後にChrome。
 |
| Google Chrome |
Google Chromeはitalicとobliqueの表示分けができてますね。
ちなみに前述の「メイリオ」を指定した場合の表示結果がこれです。
メイリオでも斜体になってますね。すごーい！
 |
| Chrome with メイリオ |
Google Chromeでは「italic」では英数字の部分のみを、「oblique」では全体を斜体にします。
おそらくChromeのレンダリングエンジンは「italic」でイタリック体のグリフデータを表示、
obliqueは標準のフォントを斜体に変形する、って感じの処理をしてるんじゃないでしょうか。
まとめ
- 「italic」と「oblique」はイタリック体と斜体で厳密には別モノ。
日本語のフォントではイタリック体がないため、ともに斜体として表示される。 - CSSの「font-style」では「イタリック体」と「斜体」の
それぞれが個別に用意されているフォント以外の場合、「italic」「oblique」ともに同じ表示になる。 - メイリオの日本語部分には斜体が効かない。
- Google chromeは「italic」と「oblique」の表示分けをしてくれる模様。
斜体のスタイル自体、それほど使うものではないかもしれませんが、
独特の挙動があるようですので、使う際には注意が必要です。
CSSでは特に理由がなければ、「font-style： italic;」にしておけば無難そうです。
いやはや、ちょっとした疑問から検証を行った結果、思った以上に記事が長くなってしまいました。
とりあえず最後までまとまって良かったです。
最後までお付き合いくださり、ありがとうございました(´ω｀)
0 件のコメント:
コメントを投稿