Home > コンピュータ > FirefoxでPRE要素の中身が等幅フォントで表示されない件について

FirefoxでPRE要素の中身が等幅フォントで表示されない件について

根本的に見てる所が違うのかもしれないけど、やや強引に解決しています。

問題

Firefoxで、[ツール]→[オプション]→[コンテンツ]→[フォントと配色]の[詳細設定]→“Web ページが指定したフォントを優先する”のチェックを外した状態だと、PRE要素の中身が [ツール]→中略→[詳細設定]→“等幅(Monospace)”で指定したフォントで表示されず、プロポーショナルフォントで表示されてしまう。気持ち悪い。

“Web ページが指定したフォントを優先する”にチェックを入れていれば問題ないのだが、それだとメイリオでアンチエイリアスな気分に浸っているところを、Webページ作成者が指定する、古式ゆかしいＭＳ Ｐゴシックや胸糞悪いＭＳ Ｐ明朝、あるいは存在の抹消を願う MS UI Gothic でぶち壊されてしまい、こちらの方がストレスが大きい(ＭＳ ゴシックとFixedSys はかつての友)。

まとめると、

  • 俺はお前の思う通りのフォントでWebサイトを閲覧するぜ! → 不愉快だわ
  • 俺は俺の思う通りのフォントでWebサイトを閲覧したい! → PRE要素の中身だけが思い通りにならない!

となる。この問題を解決し、全てのウェブページをアンチエイリアスなフォントで、等幅でいて欲しいところは等幅で、プロポーショナルでいて欲しいところはプロポーショナルで優雅に楽しみたいのだ。

実例をあげるとすれば、RBOのチーム運営画面。秋データなどがプロポーショナルフォントで表示されてしまうのだ(RBOサイトに問題があるわけではない)。

解決法

  1. ツール→オプション→コンテンツ→フォントと配色の詳細設定→“Web ページが指定したフォントを優先する”のチェックを外す
  2. Firefoxのユーザースタイルシート(デフォルトでは、C:\Documents and Settings\ユーザ名\Application Data\Mozilla\Firefox\Profiles\プロファイル名\chrome\userContent.css)に、以下の記述を追加し、Firefoxを再起動する。
    1. * {
    2. font-family : sans-serif !important;
    3. }
    4. pre, pre * {
    5. font-family : monospace !important;
    6. }

ただし、これだとWebサイト製作者が「ここは等幅」と意図していても、PRE要素の中身以外は全部プロポーショナルフォントになってしまいます。また、PRE要素以外にも等幅で表示して欲しいような要素…例えば上記でも使用しているCODE要素やフォーム入力欄の中など、何もかもがプロポーショナルになってしまいます。それが気になる人は、CODE要素などの等幅で表示されて欲しい要素を全てfont-family : monospace !important;としておく必要があります。

近ごろは、XPでもメイリオが使えるようです。ただし、ありとあらゆる個所に適用しようとするとダイアログボックスに設定項目が入りきらず、操作しづらくなったりします(見えないだけで項目は存在しているので、何があるか分かっていればTabキーやカーソルキーで何とかならないこともないが、それは何とかなるとは言わない)。全てをアンチエイリアスにしたければ別のフォントを使用するか、ブラウザだけメイリオにするとかした方がいいでしょう。

Macのフォントや有料のフォントはキレイですよね。だから、メイリオごときでキレイとか何をほざくか…と思う方もいらっしゃるかもしれません。でも俺にはメイリオしかないんだ。だからメイリオが一番いいんだ。

いちおう、MeiryoKeとかMS-GothicExPlusの名前を出さずに本文を構成してみた。

コメント:4

ろばQ 08-03-31 (月) 21:52

Fatal error: Uncaught Error: Call to undefined function split() in /home/kyouso/www/kyouso/wp/wp-content/themes/wp.vicuna.exc/functions.php:516 Stack trace: #0 /home/kyouso/www/kyouso/wp/wp-includes/class-wp-hook.php(326): indent_comment_body('<p>\xE3\x80\x80Firefox3....') #1 /home/kyouso/www/kyouso/wp/wp-includes/plugin.php(205): WP_Hook->apply_filters('<p>\xE3\x80\x80Firefox3....', Array) #2 /home/kyouso/www/kyouso/wp/wp-includes/comment-template.php(1082): apply_filters('comment_text', '\xE3\x80\x80Firefox3.0b4...', Object(WP_Comment), Array) #3 /home/kyouso/www/kyouso/wp/wp-content/themes/wp.vicuna.exc/comments.php(54): comment_text() #4 /home/kyouso/www/kyouso/wp/wp-includes/comment-template.php(1617): require('/home/kyouso/ww...') #5 /home/kyouso/www/kyouso/wp/wp-content/themes/wp.vicuna.exc/single.php(62): comments_template() #6 /home/kyouso/www/kyouso/wp/wp-includes/template-loader.php(106): include('/home/kyouso/ww...') #7 /home/kyouso/www/kyouso/wp/wp-blog-header.php(19): require_once('/home/kyouso/ww...') #8 /h in /home/kyouso/www/kyouso/wp/wp-content/themes/wp.vicuna.exc/functions.php on line 516