« PDFとフォント(10) フォントの合成 | メイン | PDFとフォント(12) CSSのフォント選択仕様 »

2006年03月22日

PDFとフォント(11) CSSのフォント指定とブラウザの表示

さて、CSSでは、前に言いました(2006年03月12日PDFとフォント(2) フォントファミリー)が、フォントの指定には font-family, font-style, font-variant, font-weight, font-stretchおよびfont-sizeを使います。

では、WebサーバにあるHTML+CSSで指定されたフォントは端末のブラウザでどのように選択されるのでしょうか?

CSSの font-family, font-style, font-weightの指定の仕方をいろいろ変えたとき、Internet Explorer6 (IE6)とFirefoxで、どのように表示されるかを調べてみましょう。

ここでは、今までに調べてきましたArial平成角ゴシック StdというふたつのOpenTypeフォントファミリーで試しています。次のような結果になりました。

(1) IE6でもFirefoxでも、font-family="Arial"、font-style="italic"、font-weight="bold" の組み合わせで適切なフォントが選択される。欧文フォントはCSSの指定が機能しています

(2) IE6でもFirefoxでも、font-family="平成角ゴシック Std"はフォミリー名として認識できず、ブラウザのデフォルトのフォントになってしまう。つまりOpenTypeの優先フォントファミリー(ID16)の名前の指定は有効にならないということが言えます。

(3) 和文フォントに対してfont-style="italic"、font-weight="bold"を指定すると、IE6でもFirefoxでも文字を傾けたり、文字を太らせるというフォント合成を行ってそれらしく表示します。

(4) font-family="平成角ゴシック Std W3"~"平成角ゴシック Std W9"というフォントメニュー名(ID1)を指定すると、Firefoxでは、平成角ゴシック Std フォントファミリーから該当するフォントを選択して適用します。

(5) しかし、IE6は、漢字・カタカナがMSP明朝というブラウザのデフォルトフォントになってしまいます。ラテン文字にのみ、平成角ゴシック Std フォントファミリーの該当するフォントを選択して適用されます。
※結局、このテストデータをIE6で表示しますと、漢字カタカナを平成角ゴシックStdのファミリーを選択して表示するケースは皆無になっています。これはIE6のバグじゃないでしょうか?

(7) font-weightに数値(100から900)を指定したとき、Firefoxは;
a."平成角ゴシック Std W3"、"平成角ゴシック Std W5"では600以上をboldとして扱う。
b."平成角ゴシック Std W7"、"平成角ゴシック Std W9"ではもともと全てをboldとして扱っている。

(8) font-weightに数値(100から900)を指定したとき、IE6は;
a.MSP明朝についてはfont-weight="600"以上になると太らせている。
b."平成角ゴシック Std W3"では500以上をboldとして、"平成角ゴシック Std W5"では700以上をboldとして扱う。つまりそれ自身より2段階上の値が指定されると太らせている。
b."平成角ゴシック Std W7"、"平成角ゴシック Std W9"ではもともと全てをboldとして扱っている。

簡単なサンプルを作ってみただけですが、和文フォントについてはfont-familyで指定して指定したフォントが必ずしもうまく選択されないという問題があるのではないかと思います。

■テストデータ
欧文フォント、和文フォントへのfont-family、font-style、font-weight設定例

■上記のサンプルをブラウザ+アンテナハウスPDFドライバV3でPDF化した例
Firefox1.5+アンテナハウスPDFドライバV3でPDF化

InternetExplorer6+アンテナハウスPDFドライバV3でPDF化

【動作環境】
WindowsXP Service Pack2英語版OSを日本語モードで起動。
InternetExplorer Version 6.0.2900.2180
Firefox 1.5.0.1

投稿者 koba : 2006年03月22日 08:00

トラックバック

このエントリーのトラックバックURL:
http://blog.antenna.co.jp/PDFTool/mt-tbng2.cgi/221

コメント

コメントしてください




保存しますか?