月: 2019年7月

font-family で游ゴシックを設定しても Windows の Chrome で見るとかすれて見える問題の対処。

@font-face {
  font-family: 'My Yu Gothic';
  font-weight: normal;
  src: local('Yu Gothic Medium');
}

@font-face {
  font-family: 'My Yu Gothic';
  font-weight: bold;
  src: local('Yu Gothic Bold');
}

body {
  font-family: 'YuGothic'         /* Mac */
             , 'My Yu Gothic'     /* Win Chrome以外 */
             , 'Yu Gothic Medium' /* Win Chrome */
             , sans-serif;
}

body * {
  font-family: inherit;
}

.bold {
  font-weight: bold;
}

Windows の Chrome だと @font-face を使っても src: local('Yu Gothic Bold'); のような太さによる細かい指定が無視されてしまうみたいですが、

• Chrome では Yu Gothic Medium を太字にしてもそれほど見づらくならない
• @font-face は Chrome 以外なら Medium や Bold が使える

ということを踏まえて、考えてみました。

游ゴシックフォントデモ

全称セレクタは Safari 用に入れてます。