Webサービスを一から作る機会があり、フォントについてほとんど知識がないことに気がついた。そこで、MDNのドキュメントを参考にしながら、基礎の基礎から学んだのでメモを残していく。
そもそもフォントとは？
フォントという言葉の意味を調べたことがなかったので調べてみた。
wikipediaによると 「画面に表示したり、書籍など紙面に印刷したりするためにコンピュータ上で利用できるようにした書体データ」とのこと。
またwikipediaを読んでいくと、フォントは外形で大まかに分類することができ、たまに耳をする serif や sans-serif というはその一部であることがわかった。
フォントの大まかな種類
フォントは大まかに以下の5つに分類される。ざっと概要は以下の通り。
serif（明朝体）
セリフ（うろこ）を持つフォントsans-serif（ゴシック体）
セリフ（うろこ）を持たないフォントmonospace
全ての文字が同じ幅を持つフォントcursive
手書き文字の模倣を目的としたフォントfantasy
装飾的なフォント
font-family - CSS: カスケーディングスタイルシート | MDN を見ると各フォントの雰囲気を知ることができる。
また、上記で出てくるセリフ（うろこ）とは文字の端についている飾りのことを言う。以下の画像がわかりやすかったので引用する。
文字の「うろこ」 | 【印刷の現場から】印刷・プリントのネット通販WAVEのブログ から引用
フォントの設定方法
テキストにフォントを設定するには、CSSの font-family プロパティを使用する。
これにより、選択した要素に適用するブラウザのフォントを指定できる。ユーザーが利用しているブラウザで利用可能なフォントを適用していくが、適用できない場合はブラウザのデフォルトフォントを使用する。
以下、実装例。
p { font-family: arial; }
ウェブセーフフォント
利用しているデバイスやブラウザによって適用できるフォントは異なる。そこで、概ね全てのデバイスで利用できるフォントを ウェブセーフフォント という。
MDNのドキュメントでは、ウェブセーフフォントとしていくつかの例を示している。
各OSにおけるフォントの普及率は以下のサイトから確認することができ、利用しても安全と見なせるものについて判断を下すことができる。
フォントスタック
Webページで使用したいフォントがユーザーのブラウザで利用できることは保証できないため、ブラウザが複数のフォントから選択できるように フォントスタック を指定できる。
以下、実装例。左から優先的にブラウザで利用する。
p { font-family: "Trebuchet MS", Verdana, sans-serif; }
ウェブフォント
CSSでは、ウェブ上で利用できるフォントファイルを指定して、ウェブサイトのアクセスした時に一緒にダウンロードさせることができる。
最後に
今回はフォントについて学んだ。serif など目にすることがあっても理解出来ていなかった部分が多く学びになった。 次はNext.jsでウェブフォントの設定を試していく。
