【Web開発】CSSと文字エンコーディングに注意

根拠なき信頼というのが嫌いな私が、自分でも少しは勉強してみようよ、と言っています。ということで、久しぶりに開発ネタといきます。とはいえ失敗談なのですが。

昨今のWeb開発では、CSSで見た目をコントロールする、というのが標準になっていますが、案外とつまらないところで躓く、というお話です。

CSSというかスタイルにはテキストのフォントを指定するものとして、font-familyというのがあるのですが、自作のサイトで、あるときからこの指定がほとんど効いていないことに気付きました。たとえば、下記のようにWindows Vista/7用に「メイリオ」フォントを指定しても、なぜかMSゴシックなどのブラウザ標準のフォントで表示されるのです。

システムにメイリオがないのか？と思ったのですが、他のサイトでメイリオが指定されてれば、それを使って表示されます。指定の仕方は…これ以外に指定のしようはありません。あり得ない話ですが、「メイリオ」を間違えている？正しく書かれています。ではなぜ？

ここで、メイリオの英語表記である「Meiryo」を指定してみました。

すると、きちんとメイリオを使って表示されます。奇っ怪な、どういうこと？と、他のフォントを指定したりして試行錯誤していましたら、はたと気付きました。

日本語のフォントファミリ名には反応しない。

まぁ、「Meiryo」を指定して認識された時点で気付くべきだったのですが、結論から言えばそうです。ではなぜ日本語のフォントファミリ名に反応しないのでしょうか？

スタイルシートファイルがShift-JISエンコーディングにて保存されていた。

ASP.NETでは（というか最近のWebサイトでは）、文字エンコーディングをUTF-8で統一することが求められています。ところが、スタイルシートファイルだけはShift-JISになっており、これを取り込んだUTF-8ベースのページ内においてShift-JIS側の日本語が化けた、ということのようです。

こう言った振る舞いはブラウザに依存するのかな？とか思いましたが、FirefoxでもChromeでも同じ状況でした。

結論がわかってしまえば何てことないのですが、ASP.NETの開発を行うVisual Web Developerではエンコーディングがわかる部分がどこにもないので、発見が長引いてしまったのかも知れません。それ以前に、UTF-8でなさそうなファイルが来たら、勝手に別のエンコーディングで取り込まずに警告してくれよ、とも思いますが。