CSSでフォントを差し替える

諸事情があってchromeを再設定しなければいけなくなって見直してみたんだけど以前の記事で書いた@font-faceの部分がわかりにくかったのでメモ追加。

font-faceは指定したfont-familyを、指定したsrcのフォントにするというような役目の様子。
（正しい定義は各自ググってください）
例えば、書き方は以下のような感じ。
@font-face {
font-family: フォントA;
src: フォントB;
}
このように書いておくと、フォントAが指定されているときにフォントBを使うということができる。

本来はfont-familyに独自の名前入れて、srcにWebフォントのURLを入れて、表示環境にインストールされていないフォントも使えるようにするというのが狙いのようだけど今回は違う使い方をする。
目的が、游ゴシックだったら他のフォントにしたい、ということなのでフォントAの部分には游ゴシックと入力。
そしてフォントBの所には任意のフォントを入力。例えばMeiryoならMeiryoと。
ただしここで1つ注意。
表示環境にあるフォントを使いたい場合はlocal()と付けてやらなきゃいけない。
つまりフォントBのところはlocal(Meiryo)

これらを全部盛り込むと例は以下のようになる。
@font-face {
font-family: '游ゴシック体';
src: local(Meiryo);
}

これで無事に游ゴシックだったところが他のフォント（今回はメイリオ）になった。

font-familyを複数指定はできないようなので複数指定したかったらこれを複数かけばよいのかもしれない。
そこは試せてないので予想だけど。
あと、上記例では「游ゴシック体」って書いてるけど「游ゴシック」だったり「Yu Gothic」だったりすると該当しなくなると思うのでそこは複数指定と合わせて臨機応変に。

ちなみに。
再設定が必要になったので再度Stylist使おうと思ったら配布終了していて使えず。
代わりに使ったのがStylus。
UIは違うけど使い方は大体Styistと同じ感じで使えたのでこちらをつかった。
Stylishは、上記みたいなことやるにはどうやったらいいのか分からなくて使わなかった。