制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングCSSメイリオフォントがイタリック体や斜体にならない

メイリオフォントがイタリック体や斜体にならない

2014年01月21日CSS 
メイリオフォントがイタリック体や斜体にならない記事のアイキャッチ画像

メイリオフォントの日本語はイタリック体や斜体にできません。それはメイリオというフォントが非常にこだわって作られたフォントだからだと思います。その辺のことを書きました。

まえがき

みなさん。いきなりですがHTML上で文字をイタリック体や斜体にしたい時、どのようにしますか?

恐らく普通はCSSに

font-style:italic; //イタリック体

font-style:oblique; //斜体

を指定するかと思います。

しかし何故かfont-familyで「メイリオ」を指定していると日本語部分はイタリック体、または斜体になりません。
その辺のことを書いていきたいと思います。

以後この記事ではイタリック体と斜体を総じて「イタリック体」と表現します。
二つ書くの面倒なので。

何故メイリオフォントの日本語はイタリック体にできないのか

結論から書きます。
メイリオフォントの日本語をイタリック体で表示できない原因は

メイリオのイタリック体は日本語部分が正体(標準のスタイル)で設定されているから

です。

イタリック体として正体(標準のスタイル)が設定されているのだから、いくら「font-family:italic;」でイタリック体にしようとしても正体(標準のスタイル)で表示されるのです!

イタリック体の日本語部分に正体(標準のスタイル)を設定している理由

一昔前のwindow標準フォント「MS ゴシック」はどうでしょう。
「MS ゴシック」系統は用意されているスタイルが「レギュラー」1種類だけです。イタリック体とかはそもそも用意されていません。それ故に「font-style:italic;」を指定するとブラウザ側で勝手に文字を斜めにしてくれていたのです。

対して「メイリオ」はご丁寧に「レギュラー」「ボールド」「イタリック」「ボールドイタリック」の4種類のスタイルが用意されています。
しかも「ボールド」に関してはただ「レギュラー」の文字を太くしているというだけではなく、フォント自体の造型に手を加えているそうです。
「イタリック」も一緒です。
イタリック体が用意されている欧文部分に関してはただ「レギュラー」の文字を斜めにしているだけでなく「イタリック」用にフォント自体の造型に手を加えています。

日本語にはそもそも「イタリック体」という概念がありません。

ここからはあくまでもKoToRiの予想ですが、
メイリオというフォントはMicrosoftがひたすらこだわり抜いたフォントのため、「ボールド」「イタリック」はそれぞれ「レギュラー」とは少し違った造型でフォントが用意されている。
しかし「イタリック体」は欧文のみで日本語には「イタリック体」という概念自体が無いので穴埋めのため「イタリック体」の日本語部分に正体(標準のスタイル)が登録されたのだと思います。

まぁKoToRiはフォントなんか作ったことがないので穴埋めのために、何かしらのフォントを登録する必要があるのかどうかは分かりませんが。

メイリオでイタリック体が表示できないのは、こだわり抜いたフォント故の不都合ですね。

メイリオフォントで日本語をイタリック体を表示する方法

これも結論から書きます。

不可能です(笑)

なのでさっさと諦めてイタリック体にしたい部分だけ「font-family」で「MS ゴシック」系統のフォント自体にイタリック体が用意されていないフォントを指定してあげましょう。

まとめ

メイリオは非常に素晴らしいフォントだと思います。
Microsoftの本気が体現されたようなフォントですよね。
日本語も見やすくて美しいです。

日本語の斜体が表示できないのもこだわり抜いた結果です。(多分)

そもそも本当に日本語をイタリックで表示する必要があるのか。

このKoToRi Blogも引用部分等は斜体で表示しています。
こんな感じで

Windows Vista 以降のマイクロソフト製 OS に標準で搭載されており Windows XP、Windows Server 2003 までの Microsoft Windows において利用されてきた MS UI Gothic に代わる、日本語版の新しいシステム用フォントとして提供されている。

wikiからの引用です。

でもこうやって見てみると確かに日本語の斜体って見にくいですね。
みんなが当たり前に「引用は斜体」で表現していたので、自分で思考することを放棄していましたが、これは表示の仕方を考える必要がありそうです。
2014年2月20日追記 引用のスタイルを変更しました。

何事も自分で思考するということは非常に大切だ、ということを今回は学びました。
みんながやっているから。当たりまえだから。これではみんなと同じになってしまいますよね。危険です。

オンリーワン目指して頑張っていきたいと思います。

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント