Web 版 Outlook で表示フォントを変更する
2019/07/24からWeb版Outlookは、新しいUIに強制的に変更された。
UI変更に伴い画面に表示されるフォントも変わってしまった。
個人的に新しいフォントが気に入らないので、旧UIのフォントであったメイリオに変更してみた。
なお、ここで紹介する手順は、下記ブラウザを対象としている。
- Google Chrome
- Chromium ベースの「新しい Microsoft Edge」
※Firefox での表示フォント変更手順を追加
■ Mozilla Firefox での表示フォント変更手順
contents :
- ■ 表示フォント変更手順
- ■ font-family に auto を指定すると、ブラウザ標準フォントで表示されるようになる
- ■ メイリオ以外のお勧めフォント
- ■ Mozilla Firefox での表示フォント変更手順
■ 表示フォント変更手順
- メニュー (Alt + F) → その他のツール → デベロッパー ツール (Edge では "開発者ツール")
- デベロッパーツールの Elements (Edge では "要素") に表示されている下記行をクリック
<!DOCTYPE html> の次の行(2行目から)
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="ja" style="--black:#000000; ... 長い ... --fallback-searchBoxBackground:rgba(255,255,255,0.7);">
- デベロッパーツールの Styles (Edge では "スタイル") に表示されている下記 Style を探す
a, body, button, div, form, html, img, label, span, textarea { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;
- 上記 Style に下記要素を追加する
※【font: inherit;】より下の行に記述しないと反映されない
font-family: meiryo;
- font-family を追加後は下記のように表示される
a, body, button, div, form, html, img, label, span, textarea { margin: 0; padding: 0; border: 0; font: inherit; font-family: meiryo; vertical-align: baseline; }
※※注意※※
ページをリロードすると元のフォントに戻ってしまう
予定表などを表示する場合、別タブにて表示する
■ font-family に auto を指定すると、ブラウザ標準フォントで表示されるようになる
- font-family: meiryo の代わりに font-family: auto と入力する
a, body, button, div, form, html, img, label, span, textarea { margin: 0; padding: 0; border: 0; font: inherit; font-family: auto; vertical-align: baseline; }
- ブラウザの標準フォントを変更するには、
メニュー (Alt + F) → 設定(S) → デザイン → フォントをカスタマイズ → 標準フォント
(Edge では、メニュー (Alt + F) → 設定(S) → 外観 → フォントのカスタマイズ → 標準フォント)
ドロップダウンリスト から任意のフォントを選択する
■ メイリオ以外のお勧めフォント
Windows10標準フォントの中で、下記フォントも見やすくて良いと思う。
- BIZ UDPゴシック(プロポーショナルフォント)
font-family: BIZ UDPGothic;
- BIZ UDゴシック(等幅フォント)
font-family: BIZ UDGothic;
- BIZ UDP明朝(プロポーショナルフォント)
font-family: BIZ UDPMincho
- BIZ UD明朝(等幅フォント)
font-family: BIZ UDMincho
- UD デジタル 教科書体 NK-R(プロポーショナルフォント)
font-family: UD Digi Kyokasho NK-R
■ Mozilla Firefox での表示フォント変更手順
- ツールバー右端にある
≡
アイコンをクリック →オプション
をクリック
もしくは、メニューバーのツール(T)
(Alt + T) →オプション(O)
(O) をクリック - 「オプション」タブが表示されたら、
一般
→言語と外観
→フォントと配色
→詳細設定…(A)
をクリック
もしくは、オプションを検索
ダイアログにフォントと配色
と入力 →詳細設定…(A)
をクリック - 「フォント」ダイアログが表示されたら、
ウェブページが指定したフォントを優先する(A)
のチェックを外す
上記対応にてフォントと配色
の既定のフォント(D)
で表示されるようになる。
ただし、表示フォントの変更は、Firefox にある全てのタブに適用されてしまう。
下記は古い変更方法。非推奨。
メニュー → その他のツール → デベロッパー ツール
デベロッパーツールの Elements に表示されている下記行の
root-38root-40 を削除
19/08/19 付近から root-40 へ変更された
<div class="ms-Fabric _2XXXXXXXXXXXXXXXXX root-40"> ~~~~~~~ 削除
- デベロッパーツールの Elements に表示されている下記行を検索
<body class="ms-font-s disableTextSelection">
右ペイン Styles に表示されている下記チェックボックスを外す
body { font-family: "Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; ↑チェックボックスを外す }