コピペではてなブログのフォントを変えて見た

 このブログのデザイン MINIM は気に入っているが、フォントが自分好みとチョッと異なる‥‥ のが、難点。

  • 半角「¥」が「\」(バックスラッシュ)で表示される。
  • 「さんてん」が下付き(...)になる。
  • 日本語をもうチョッと太目にしたい。

そこで、公認会計士わんころくんの人生戦略さんの

www.wankorokun.com
を参考‥‥ と言うより、そのままコピペした。

フォント変更前 変更後(メイリオのはず...)
f:id:ogohnohito:20190209104308j:plain:w400 f:id:ogohnohito:20190209104325j:plain:w400


 [デザインCSS]に追加したコードは下記。

/*フォントの設定 */
body {
font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "MS ゴシック", sans-serif;
}
  • 公認会計士わんころくんの人生戦略さんは、
     font-family: の後に入っているフォントが適用されます。
    先に入れたフォントが優先的に適用されて、それがダメな場合に2つ目といった具合です。
    と言っているが、Macの場合はどうなるのか‥‥ 今から勉強する。

例えば



追伸(2019-02-09 20:30)
  • font-familyプロパティ
     font-familyプロパティは要素内の文字の表示書体となるフォントを指定します。
    値にはフォント名、または総称ファミリ名を指定します。総称ファミリ名が指定された場合は、UA*1 の環境設定に指定されているフォントが自動的に選ばれて、そのフォントで表示されます。
     フォント名の指定は複数指定が可能で、各フォント名をカンマ(,)区切りで指定します。複数指定した場合は、ユーザの利用している環境(コンピュータ)にインストールされているフォントが指定順に優先して反映されます。また、"MS Pゴシック" のようにフォント名にスペースを含む場合は、フォント名の前後をシングルクォーテーション(')、またはダブルクォーテション(")の引用符で括る必要があります。


 font-familyで指定したフォントは下記

  1. "メイリオ", Meiryo
  2. "游ゴシック", "Yu Gothic", YuGothic
  3. "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro"
     これはMacのフォントであることが解った。
    • もう迷わない、「@font-familyはこれでOK!」を色々考えてみた
      (引用:unitopi - ユニトピ 公開日 2015/06/25)
       Macだから、Windowsだから、Androidだから…
      端末それぞれの表示状態を気にしながらフォントを考えるのって大変ですよね。とりあえずコレにしておけばいいや、というコピペ用テンプレが皆さん存在するのではないでしょうか?
      font-family: sans-serif;
       sans-serif、つまりゴシック体であることを指定しています。ただしそれ以上の指定ではないので、ブラウザ標準のものが使われます。WindowsであればメイリオとかMSゴシック系、Macであればヒラギノ角ゴシック系となります
      font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
       Macの場合はヒラギノを優先させたいですよね...
      Macだと、多くのブラウザで日本語表記のフォント指定は無視されます。
      この場合Macだとヒラギノが優先されるので、メイリオを日本語表記させておく理由は特に無いです。
  4. "MS ゴシック"
  5. sans-serif(引用:みややものブログ 更新 2018.10.09)
     これは指定したフォントが利用できない場合に、最低限どのような系統のフォントを利用するのかを指定するためのもので、「一般ファミリー」と呼ばれます。通常は、
    font-family: ‘任意のフォント’, ‘任意のフォント’, sans-serif;
    のように、任意のフォントの最後に指定します。
    「serif」は明朝体のフォントを表示するファミリー、「sans-serif」はゴシック体のフォントを表示するファミリーです。


≪今日の結論≫
 理解できた。
最終的にはユニトピさんの "font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;" に変更した...


*1:ユーザーエージェント(UserAgent)とはウェブサイトに訪問する際「Google Chromeからアクセスしています」「iPhoneからアクセスしています」などのどんな環境でアクセスしているのかの利用者の情報のことを言います。ウェブサイトにアクセスする際にはこのユーザーエージェントを必ず送ることになっています。