BETA

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

投稿日:2019-07-25
最終更新:2020-05-11

19/07/24から新しいUIに強制的に変更された。
UI変更に伴いフォントも変わってしまった。
個人的に気に入らないので、旧UIのフォントであったメイリオに変更してみた。
なお、Chrome での手順のみ。

  • メニュー → その他のツール → デベロッパー ツール
  • デベロッパーツールの Elements に表示されている下記行をクリック

    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="ja" style="--black:#000000;  
     ... 長い ...  
    --fallback-searchBoxBackground:rgba(255,255,255,0.7);">  
  • デベロッパーツールの Styles に表示されている下記 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;  

※※注意※※
ページをリロードすると元のフォントに戻ってしまう
予定表などを表示する場合、別タブにて表示する


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

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

  • デベロッパーツールの 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;  
     ↑チェックボックスを外す  
     }  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@tsuyoshinの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう