【PR】 良品社中:意外と儲かる代理店システム
【PR】 acer Aspire Timeline AS1410 11.6型ノートPC Windows7搭載 250GB ブラック AS1410-KK22
【PR】 Canon PIXUS インクジェットプリンタ iP4700
【PR】 転職必勝術: 職務履歴書の書き方などお役立ちサイト
 

・フォントを指定したら文字化けした。 → フォントの指定は一長一短

フォントを指定する方法は通常のHTMLタグで<font face="MS ゴシック, Osaka−等幅">としたり、CSS(スタイルシート)で指定する方法があります。これにより、デフォルトで設定されているフォントではなく、Webmasterやプログラマーである我々の意図するフォントで表示させることが基本的に可能です。(もちろん、ユーザーの設定によりサイトによるフォントの指定を無視するようにすることも多くのブラウザで可能です。)

ところが、このフォント指定にはブラウザのさまざまなバグがつきまといます。有名なのは左の画像のように、ネットスケープ4.X(Windows、Macとも)では日本語の混じったフォント名をスタイルシート内で指定すると、フォントが正しく反映されないばかりか、他のプロパティも全く反映されなくなります。例えば、

<font style="font-family:富士ポップ;font-size:32px;">あいうえお</font>

としても32pxの文字にはなりません。フォントも反映されません。ネットスケープ4.Xのデフォルトのフォント+デフォルトの文字サイズで表示されます。もちろん、この程度の問題であればスタイルシートで指定しなければ良いということになりますし(font face=で指定)、また、このホームページの文字化けの話とは関係ないようにも思えます。

しかし、文字化けに関係してくる場合もあります。例えば、Mac版のネットスケープ4.Xの問題です。Mac版ネットスケープ4.Xでも、Windows版のそれと同様、和文フォントをスタイルシートで指定している場合には、上述のようにフォントが反映されなかったり、他のCSSプロパティが反映されなくなるバグがあります。

ここまではWindows版もMac版も変わりません。ただ、Mac版ネットスケープ4.Xでは、Windows版とは違って、欧文フォントを指定すると文字化けが発生します。例えば、Windowsでは<font style="font-family:Arial">あいうえおabc123</font>と指定すれば、英数字はArialで表示しようとしますが、日本語の部分は(Arialが欧文フォントで、日本語に対応していないので)IEのデフォルトのフォントで表示しようとします(こちらの スクリーンキャプチャー を参照してください)。

ところが、Mac版ネットスケープ4.Xでは、こういう融通が利きません。そのまま、欧文フォントで日本語も表示しようとするため、右の画像のように文字化けします。(ちなみに、Windows版ネットスケープ4.Xでは、このような場合、英数字も日本語もデフォルトの和文フォントで表示します。したがって文字化けは発生しませんが、IEのように英数字だけでも欧文フォントが反映されるということはありません。)

(広告)

自動バックアップ・テスサーバー付きの新機能スマートリリース


では、回避策はといいますと、例えば、<font style="font-family:Arial,Osaka;font-size:32px;">あいうえお</font>としてみますと、やっぱり同じ文字化けが発生します。Macの代表的和文フォントである「Osaka」を指定しているのにです。試しに、<font style="font-family:Osaka,Arial;font-size:32px;">あいうえお</font>としてみます。順番を入れ替えただけです。何と、これで文字化けが解消します。どうなってんでしょう。「朝三暮四」という昔、国語で習った四字熟語が脳裏をよぎります。

この問題はAppleのサポートページにも掲載されています。このサポートページでは、一般ユーザーが文字化けに遭遇した際に、どのように設定すれば文字化けを(一時的に)解消できるかが解説されていますが、もちろん私たちウェブマスター・プログラマーの方で対処しておくのが本来的なのです。

(参照)▼ Netscape Navigator/Communicator で、日本語が文字化けする
http://til.info.apple.co.jp/cgi-bin/WebObjects/TechInfo.woa/wa/showTIL?id=100331

このようなフォント指定による文字化けの問題は、ネットスケープだけではありません。実はIEでも起こります。例えば、マイクロソフトのサポートページには下記のような文書が掲載されています。

(参照)▼ [IE5]sans-serif を指定した HTML ファイルを表示すると文字化け
http://support.microsoft.com/default.aspx?scid=http://www.microsoft.com/japan/support/kb/articles/417/0/57.asp
特定の条件下で文字化けが発生するようです。これはWindows版IEのお話。なお、この現象は Windows 2000/XP では発生しないとマイクロソフトは報告しています。

フォントは本当に?あなどれない話
「フォントを指定したら文字化けした」とは全く逆のバージョンもあります。「フォントを指定しないと文字化けする」パターンです。例えば、バックスラッシュ「\」を表現したい場合は、「\(円マーク)」と単独で表示するのではなく、「<font face="Arial">\</font>」のように欧文フォント指定で表記しなければなりません。逆に、円マークを表示させたいのに、バックスラッシュが表示されているならば(例えば、UTF-8の文書内で「\」単独を入力し、それをそのままブラウザに表示させると、Windows版Internet Explorerなどでは、「\」と表示されます。)、明示的に日本語フォントを指定してあげないといけないでしょう。これは、フォント依存文字ともいうべき現象です。

もう一つフォント依存文字というべき現象を紹介すると、中国語の「(シェシェ。ありがとうの意。)」をShift_JISのHTML文書の中で表記する際に、数値文字参照を用いて「&#35874;&#35874;」と表記するだけでは、Windows版Internet Explorerでは「??」と文字化けします。Unicodeに対応したフォントである「Arial Unicode MS」などを明示的に指定してあげ、「<font face="Arial Unicode MS">&#35874;&#35874;</font> = 谢谢」と入力することではじめて、Windows版IEでも正しく表示されます。詳しくは、別稿の「榨菜(ざーさい)の「榨」をホームページ上に表示するには?」をご参照ください。

上記はWindows版IEのお話でしたが、Mac版IE4.5及び5.0では、Mac版ネットスケープ4.Xの欧文フォント問題と同種の問題をやはり持っています。<font style=〜では再現されませんでしたが、textareaやinput type=textで欧文フォントを指定している場合、やはり文字化けします。<font style=〜の文字化けであれば、<font face=〜で代用することも可能ですが、textareaのフォント指定となると別です。スタイルシートを使わざるを得ません。

このMac版IEのtextareaでの文字化けを回避するためには、「Osaka」などの和文フォントをfont-familyの先頭で指定することが一番確実だと思われます。Windowsユーザーがホームページを作成する場合、どうしてもWindows版フォントから指定しがちですが、これですと文字化けが発生することになります。

JavascriptでUA(=ユーザーエージェント。ブラウザ)を判断して読み込ませるスタイルシートを変えるというのも手ですが、こちらの方が面倒ですし、またJavascriptをoffにしているユーザーもいますから、避けた方が無難だと思います。

次のページでは、htaccessによる認証の後に表示されるページが文字化けする問題について考えます。