あれこれ備忘録@はてなブログ

勉強したことやニュースや出来事を備忘録として書いていきます

FirefoxのUIのフォントを変更する

arekorebibouroku.hateblo.jp

前回、絵文字を表示するためにDejaVu Sansフォントを無効にしました。

そうしたところ、ページ内は別のゴシック体フォントが表示されているのに、FirefoxのUI、アドレスバーのURLやタブの表示、設定画面などで欧文(アルファベット)がセリフ体(ひげ付き)フォントになってしまいました。

f:id:t_massann:20160607103257p:plain

f:id:t_massann:20160607103318p:plain

タイトルバーのアルファベット文字がゴシックなのはLinuxのウィンドウマネージャの設定だからですね。

そこでUIを変更してみることにしました。

調べてみると以下のページが見つかりました。

http://utaukitune.ldblog.jp/archives/65738286.htmlutaukitune.ldblog.jp

ここではTheme Font & Size Changerを使うと簡単に変更できるとありました。

addons.mozilla.org

しかし、インストールしてみたところ、メニューにもツールバーにもアイコンが現れず操作できませんでした。

もう一つの方法にuserChrome.cssを編集するという方法がありました。

しかし、気軽に編集したり反映させたりするのが面倒なのでStylishというアドオンを使うことにしました。

addons.mozilla.org

使い方は以下のサイトに詳しく載っています。

といっても簡単です。

メニューのアイコンや設定(オプション)のアドオンの項目から「新しいスタイルを書く」を選ぶだけです。

mozilla-remix.seesaa.net

フォントを変えるUI部品は細かく指定できるようです。

@charset "utf-8";

menubar,
menubutton,
menulist,
menu,
menuitem,
textbox,
toolbar,
.tab-text,
tree,
tooltip,
sidebarheader,
statusbar,
window {
  font-size: 10pt !important;
}

menubar,
menubutton,
menulist,
menu,
menuitem,
textbox,
toolbar,
.tab-text,
tree,
tooltip,
sidebarheader,
statusbar,
windows,
label {
  font-family: "Bitstream Vera Sans" !important;
}

上の3つのページを参考にこんな感じにしてみました。

重複していて変な書き方になっているのは、フォントサイズの方には"label"が指定されていないせいです。

これをフォントサイズに指定してしまうと設定画面の文字サイズまで小さくなってしまいます。

この結果、アドオンマネージャの設定画面は次のようになりました。

f:id:t_massann:20160607104629p:plain

大分見やすくなりました。

Stylishを使うと、前回の絵文字を表示させるためにLinuxの方の指定をしなくてもDejaVu Sansを使わないようにできるのですが、それをするとWebフォントが使えなくなることがあります。

最近のサイトはアイコンや記号などをWebフォントとしてダウンロードさせて表示させるところが多くなっているのでこれだと困るのですね。

とりあえず、大分、見やすくなりました。

あとは、このはてなブログの編集画面ですね。

編集画面のタイトルの表示だけ、欧文がセリフ体です。

公開されたページでは問題ありません。

本文編集ページもちゃんとゴシック体になっています。

カテゴリの入力欄もセリフ体で、決定した後に表示されるものはゴシック体です。

不統一感があってちょっと気になります。

追記

font-familyを指定しているところに"input"を追加すると気になっていたところもゴシック体になりました。

textboxとかlabelとかinputとかいうあたりまで指定してしまうとなんだかUIではなくページ表示の変更になってしまうのであまり良い方法ではない気がするのですが・・・。

本当はLinuxのfonts.confの指定できちんと設定しなくてはいけないんでしょうね。

あと、Flashプラグインをブロックしているときに実行を許可するかどうかを尋ねる警告表示がアドレスバーのすぐ下に出るのですが、それもセリフ体。

あれは何と言う項目なのかな。

広告を非表示にする