50代からのHTML / CSS / JavaScriptチャレンジ No.41 Webフォントでフォントを変更

お疲れ様です。前回はコピーライトの挿入について学習しました。

今日はWebフォントについて学習をしていきます。上のWebページのフォントは何で書かれているか？これは、自分の場合は、Macなので、ヒラギノ角ゴシックで書かれてるんだって。Windowsの場合はバージョンによって違うらしいんだけど、最近のは游ゴシックらしい。

で、このフォントをスタイルで指定できる。ちょっとやってみる。まずは、アーティスト名の「COCOA」のところ。HTMLファイルを見ると

headerタグの中にあるh1タグであることがわかる。そしたら、cssファイルのheader h１を見つける。

この下に、font-family: serif;の１文を追加

保存＆リロード。あれれ？？？レクチャー動画だとフォント変わってるんだけど、自分のだと変わらない＾＾；？？？間違ってないんだけどなぁ＾＾；
まぁ、続けるか＾＾；

font-familyというプロパティにフォントの種類を指定すると、そのフォントで表示できるらしい。なんでできないんだ？？？
まぁ、さっきも言ったけど、環境によって使われるフォントが変わるんだけど、それが嫌な場合は、フォントの名前を直接指定することもできるんだって。font-family: "Arial";にしてみた。う〜ん、自分のだと変化なし＾＾；まぁ、続けるか＾＾；

それで、フォントを指定したとしても、そのフォントが入ってなかったら無視される。なので、最近はWebフォントを活用することが多いらしい。これを使うとどんな環境でも同じに見えるようにするんだって。

ちょっとGoogleフォントを使って試してみる。（変わるかな＾＾；）google fontsから使いたいフォントを選んで、今回はCSSで使うので、コピーする。コピーしたらら、sanitize.cssの下にペースト。styleタグが補完されるんだけど、それは削除。

う〜ん、google fontsのサイトがレクチャー動画と違うので、使い方がいまいち分かりずらいけど、なんとかした＾＾；でも、やっぱり変化しない＾＾；色々いじったらできた（笑）やっと変わった

分かりやすいように、serifのフォントにしてみた＾＾というわけで、今日はここまで＾＾；焦った＾＾；お疲れ様でした＾＾