tsuyoshin’s Tech Blog

https://qrunch.net/@tsuyoshin から移転してきました。

Web 版 Outlook で表示フォントを変更する

2019/07/24からWeb版Outlookは、新しいUIに強制的に変更された。
UI変更に伴い画面に表示されるフォントも変わってしまった。
個人的に新しいフォントが気に入らないので、旧UIのフォントであったメイリオに変更してみた。
なお、ここで紹介する手順は、下記ブラウザを対象としている。

Firefox での表示フォント変更手順を追加
■ Mozilla Firefox での表示フォント変更手順

contents :

■ 表示フォント変更手順

  • メニュー (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標準フォントの中で、下記フォントも見やすくて良いと思う。

    font-family: BIZ UDPGothic;
    font-family: BIZ UDGothic;
    font-family: BIZ UDPMincho
    font-family: BIZ UDMincho
    font-family: UD Digi Kyokasho NK-R

Mozilla Firefox での表示フォント変更手順

  • ツールバー右端にあるアイコンをクリック → オプションをクリック
    もしくは、メニューバーのツール(T)(Alt + T) → オプション(O)(O) をクリック
  • 「オプション」タブが表示されたら、一般言語と外観フォントと配色詳細設定…(A) をクリック
    もしくは、オプションを検索ダイアログに フォントと配色 と入力 → 詳細設定…(A) をクリック
  • 「フォント」ダイアログが表示されたら、ウェブページが指定したフォントを優先する(A) のチェックを外す

上記対応にてフォントと配色既定のフォント(D)で表示されるようになる。
ただし、表示フォントの変更は、Firefox にある全てのタブに適用されてしまう。



下記は古い変更方法。非推奨。

  • メニュー → その他のツール → デベロッパー ツール

  • デベロッパーツールの Elements に表示されている下記行の root-38 root-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;
   ↑チェックボックスを外す
 }