CSSフォールバックフォント
一般的に使用されるフォールバックフォント
100%完全にWebセーフなフォントはありません。フォントが見つからないか、正しくインストールされていない可能性が常にあります。したがって、常にフォールバックフォントを使用することが非常に重要です。
これは、font-familyプロパティに同様の「バックアップフォント」のリストを追加する必要があることを意味します。最初のフォントが機能しない場合、ブラウザは次のフォントを試し、次のフォントを試します。常に一般的なフォントファミリ名でリストを終了してください。
以下は、5つの一般的なフォントファミリによって編成された、一般的に使用されるフォールバックフォントです。
- セリフ
- サンセリフ
- モノスペース
- 筆記体
- ファンタジー
セリフフォント
font-family | Example text | Code |
---|---|---|
"Times New Roman", Times, serif | This is a HeadingThis is a paragraph. |
|
Georgia, serif | This is a HeadingThis is a paragraph. |
|
Garamond, serif | This is a HeadingThis is a paragraph. |
サンセリフフォント
font-family | Example text | Code |
---|---|---|
Arial, Helvetica, sans-serif | This is a HeadingThis is a paragraph. |
|
Tahoma, Verdana, sans-serif | This is a HeadingThis is a paragraph. |
|
"Trebuchet MS", Helvetica, sans-serif | This is a HeadingThis is a paragraph. |
|
Georgia, Verdana, sans-serif | This is a HeadingThis is a paragraph. |
モノスペースフォント
font-family | Example text | Code |
---|---|---|
"Courier New", Courier, monospace | This is a HeadingThis is a paragraph. |
筆記体フォント
font-family | Example text | Code |
---|---|---|
"Brush Script MT", cursive | This is a HeadingThis is a paragraph. |
ファンタジーフォント
font-family | Example text | Code |
---|---|---|
Copperplate, Papyrus, fantasy | This is a HeadingThis is a paragraph. |
ヒント:利用可能なすべてのGoogleFontsとその使用方法も確認してください。