総称ファミリ一覧とCSSでのフォント指定方法
CSSでフォントを指定していても、見ているパソコンにそのフォントがなければ、望みどおりの表示をする事が出来ません。
なのでフォントを指定する場合は、第一候補・第二候補…という用に表示希望順にフォントを指定します。
フォント名にスペースがある場合はシングルクォーテーションで囲みます(ダブルクォーテーションでも間違ってはないのですがシングルを使ったほうがいいです)。
そして、最後の指定にはWindowsにもMacにも確実に表示がされるように総称ファミリを指定します。
総称ファミリはOSに標準で搭載されているフォントのことで、これを指定しておけばサイトを表示する際にブラウザが「どのフォントを表示していいかわからない」状態を防げます。
CSSはこのようにしてフォントを指定します。
- 最初に任意のフォント、最後に総称ファミリを指定
-
font-family:'MS PGothic', Osaka, 'MS Gothic', sans-serif;
先に書いた順に優先され、1番前に書いたフォントが無い場合は2番目3番目…となります。
最後に指定する総称ファミリは以下の5つです。
総称ファミリは「一般フォントファミリ」「ジェネリックフォントファミリ(generic font family)」とも呼ばれています。
| 総称ファミリ名 | 字体 |
|---|---|
| serif | 明朝体 |
| sans-serif | ゴシック体 |
| cursive | 筆記体 |
| fantasy | 装飾体 |
| monospace | 等幅 |
コメント (0)
まだコメントはありません。
コメントを書く
-
AI「Gemini」で出力されるコードにはコメントアウト表示されないので注意
Google謹製のAI「Gemini」にJavaScriptのコードを聞きながら作…
-
Tailwind CSSで指定できる背景色のカラーパレット(classとカラーコードまとめ)
Tailwind CSSで背景色を指定する際に下記のようにclassを付ける…
-
Premiere Pro「ビデオトランジション」一覧
動画編集ソフトのAdobe Premiere Pro(プレミアプロ)で標準で用…
-
VSCode・Cursorでタブが表示されない場合の対応方法
コードエディタ「Visual Studio Code」(VSCode)と「Cursor」で…







もっと出して少ない