font-familyの設定。

2017-11-03

えぇ、僕が氷翠です。

ということで、今回は「font-family」のことです。
順番を追っていくと、WEBサイトで使用されるフォント（書体）の指定をするスタイルシートのプロパティです。

昔はこれを全く使っていませんでした。
それは標準で入っている書体の数が限られているので、どれも同じようなもの。
しかも、Windows、Macそれぞれ標準のフォントが存在していて、これらが自動で使われているといった感じでした。

ところが、現在では使用できるフォントの数が多く、どの指定をしたらいいかわからない。
標準なフォントというのも存在していますが、せめて、明朝系、ゴシック系の指定くらいはしたい。
WEBサイトはほとんどがそうだと思いますが、ゴシック系が主流です。

かといってきちんと指定してあげないと、MacOSXの場合は部分的に明朝系になってしまったり、太くなったりします。

現在のこの「解放区在住氷翠」でもMacのsafariで見てみると、すべての文字が太くなっています。

これらを解消するため、スタイルシートの最初の定義「html」タグに対して最初に指定していきたいと思います。

font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
-webkit-font-smoothing: antialiased;
font-weight: 400;

といった感じで指定します。

１行目だけでも、ゴシック系の指定はなりますが、これだけだと部分的に太くなってしまったりするので、次の２行が必要になるようです。
２行目はsafariに対する指定だと思って下さい。アンチエイリアスを指定しています。こうすることで、画面上で表示されるフォントがキレイに見えます。これがないと、ギザギザに見えたりｗ
３行目は太さですが、標準が４００だと思って下さい。かといって、Windows上ではまったく問題はなく表示されます。