======フォント指定とブラウザ判別======

Wordpressに限らず、Webサイトを作るのにフォントをどう指定するかが悩みどころだ。\\

Apple系（Mac・iPhone・iPad）は、迷うことなく「ヒラギノ角ゴ」で決まり。なぜならiPhoneの日本語フォントがこれだからだ。

問題はWindowsで、最も期待できるのが「メイリオ（Meiryo）」なのだが、これは視認性優先のデザインなのかあまり美しくなく、ボールドの太さとのバランスが悪い。「游ゴシック（YuGothic）」は、細すぎてかすれてしまう。MSゴシックは論外だ。

じゃあMacから「ヒラギノ角ゴ」をWindowsに持ってきてしまえば・・・というアイデアもあるが、Windowsで見る「ヒラギノ角ゴ」は汚くなってしまうのだ。理由はよく分からないのだが、フォントのレンダリング技術の違いだろうか。最近の製品はWindowsでもきれいに見えるようだが・・・。そもそも、自分のPCにだけフォントが入っていても、解決にはならないし。

そこでWebフォントを使うという手がある。

=====TypeSquareでヒラギノ角ゴ=====

https://typesquare.com/ でユーザー登録し、サイトも登録し、フォントには「ヒラギノ角ゴ W3 JIS2004」を選ぶ。

ヘッダー（Luxeritasならadd-header.php）に
  <script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?HOGEHOGEHOGE" charset="utf-8"></script>

style.cssのbodyのfont-familyに、
  "Hiragino Kaku Gothic W3 JIS2004"

これでWindowsでも、最近のきれいな「ヒラギノ角ゴ」を使うことができた。

しかし、TypeSquareの無料のプランでは、一つのフォント、一つのサイトしか使えない。ウェイトも一つしか指定できないので、ボールドが際立ってくれないし、ローカルで編集してデプロイさせるのにも使えない。

そこで、Google Fontsを使うことにする。

=====Google Fonts=====

https://fonts.google.com/ で、英文字は Roboto、日本語は Noto Sans JPを指定し、さらにRobotoにイタリックとボールドを、加えてギリシャ文字を使いたい・・・。

CSSに、こんな感じの指定をする\\
''@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP|Roboto:400,400i,700&display=swap&subset=greek,japanese);''

  body {
    font-family: Roboto, 'Noto Sans JP', sans-self;
  }

これでWindowsでも、しっかりとしたフォントで表示できるようになった。だが、一つ欠点があり、Apple系でもGoogle Fontsを使うことになってしまう。

自分はWindows+Androidなので、気にしていなかったのだが、アクセスの一番多いのはiPhoneで、しかも細い回線を使っている人もいるので、その人たちにとってもれば、Google Fontsを使われるのは迷惑でしかないのだ。なぜなら、Noto Sans と「ヒラギノ角ゴ」の間には表示品質の差はそんなにないからだ（Apple製品で見た場合の話）。

そこで、各ブラウザごとにフォント指定をして、ChromeとFirefoxの場合にはGoogle Fonts、Safariの場合には「ヒラギノ角ゴ」にしたい。その選別がなかなか面倒だったのだ。

=====CSSでのブラウザ判別=====

一番役に立ったサイト、\\
**CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge**\\
https://www.ryadel.com/en/css3-media-query-target-only-ie-ie6-ie11-firefox-chrome-safari-edge/

====Chrome 28以降（Firefoxも）====

  @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
   ...
  }

この...のところに、先ほどの@importとかbodyのフォント指定を記述する。

これはChrome用とうたっているのだが、なぜかFirefox 70もこれにひっかかってしまった。

====Safari 6.1-10.0（Chrome・Firefoxも）====

  _::-webkit-full-page-media, _:future, :root body {
   ...
  }

この...のところに、先ほどの@importを書かなければ、Google Fontsはロードされない。bodyのフォント指定には「ヒラギノ角ゴ」を指定しておく。

これはSafari用とうたっているのだが、ChromeもFirefoxもこれにひっかかってしまった。

====Safari 10.1+====

  @media not all and (min-resolution:.001dpcm) { @media {
    _::-webkit-full-page-media, _:future, :root body {
      ...
    }
  }

こちらは、Safariの10.1以降用。

====Firefox====

今回はFirefoxはChromeと同じ扱いで良かったが、Firefoxを区別したい場合、\\
**Targeting only Firefox with CSS**\\
https://stackoverflow.com/questions/952861/targeting-only-firefox-with-css

  @supports (-moz-appearance:none) {
   ...
  }

=====備考=====

**2020年まで使えるfont-familyおすすめゴシック体**\\
https://qiita.com/RinoTsuka/items/4181efd43d072e246519

**スマートフォンを考慮したフォント指定の検討**\\
https://weback.net/mobile/1823/