Web Safe Fonts Reference
セリフ、サンセリフ、等幅でフィルタリングされたライブプレビュー付きのすべてのウェブセーフフォントを参照します。
Arial, Helvetica, sans-serifThe quick brown fox jumps over the lazy dog
'Arial Black', Gadget, sans-serifThe quick brown fox jumps over the lazy dog
Verdana, Geneva, sans-serifThe quick brown fox jumps over the lazy dog
Tahoma, Geneva, sans-serifThe quick brown fox jumps over the lazy dog
'Trebuchet MS', Helvetica, sans-serifThe quick brown fox jumps over the lazy dog
Impact, Charcoal, sans-serifThe quick brown fox jumps over the lazy dog
Helvetica, Arial, sans-serifThe quick brown fox jumps over the lazy dog
'Times New Roman', Times, serifThe quick brown fox jumps over the lazy dog
Georgia, serifThe quick brown fox jumps over the lazy dog
Garamond, serifThe quick brown fox jumps over the lazy dog
'Palatino Linotype', 'Book Antiqua', Palatino, serifThe quick brown fox jumps over the lazy dog
'Book Antiqua', Palatino, serifThe quick brown fox jumps over the lazy dog
'Courier New', Courier, monospaceThe quick brown fox jumps over the lazy dog
'Lucida Console', Monaco, monospaceThe quick brown fox jumps over the lazy dog
Monaco, 'Courier New', monospaceThe quick brown fox jumps over the lazy dog
| フォント名 |
|---|
| Arial |
| Arial Black |
| Verdana |
| Tahoma |
| Trebuchet MS |
| Impact |
| Helvetica |
| Times New Roman |
| Georgia |
| Garamond |
| Palatino Linotype |
| Book Antiqua |
| Courier New |
| Lucida Console |
| Monaco |
このツールについて
ウェブセーフフォントは、追加のダウンロードを必要とせず、すべてのデバイスとブラウザで正しく表示されることが保証されているフォントで、信頼できるウェブタイポグラフィの基盤です。ページ読み込み時間を増やし、フォールバック戦略を必要とするカスタムフォントとは異なり、ウェブセーフフォントはほぼすべてのコンピュータとオペレーティングシステムにすでにインストールされています。このツールは、セリフ、サンセリフ、モノスペースの各カテゴリーに整理されたすべてのウェブセーフフォントの包括的なリファレンスを提供し、レンダリング方法を推測することなく、デザインに最適なフォントを素早く見つけることができます。
このリファレンスの使い方は簡単です。各フォントがどのように表示されるかを正確に示すライブプレビューを使用してウェブセーフフォントの完全なリストを参照するか、カテゴリーでフィルタリングして、従来的なデザインにはセリフフォント、モダンでクリーンなレイアウトにはサンセリフ、コードと技術コンテンツにはモノスペースに焦点を当てます。各プレビューはさまざまなサイズと太さでフォントを表示するため、デザインにコミットする前に可読性と視覚的な影響を評価できます。気に入ったフォントが見つかったら、そのCSS font-family宣言をスタイルシートに直接コピーできます。
このツールは、ウェブフォントサービスの複雑さなく、高速で信頼性の高いウェブサイトを構築したい開発者とデザイナーに不可欠です。ウェブセーフフォントから選択することで、デバイス全体でのタイポグラフィの一貫性を確保し、HTTPリクエストを減らし、ページのパフォーマンスを向上させることができます。同時にプロフェッショナルなデザイン基準を維持できます。
よくある質問
コード実装
# Generate CSS font stacks for web-safe fonts
WEB_SAFE_FONTS = {
"serif": [
("Georgia", "Georgia, 'Times New Roman', Times, serif"),
("Times New Roman", "'Times New Roman', Times, serif"),
("Palatino", "'Palatino Linotype', 'Book Antiqua', Palatino, serif"),
("Garamond", "Garamond, serif"),
],
"sans-serif": [
("Arial", "Arial, Helvetica, sans-serif"),
("Helvetica", "Helvetica, Arial, sans-serif"),
("Verdana", "Verdana, Geneva, sans-serif"),
("Tahoma", "Tahoma, Geneva, sans-serif"),
("Trebuchet MS", "'Trebuchet MS', Helvetica, sans-serif"),
],
"monospace": [
("Courier New", "'Courier New', Courier, monospace"),
("Lucida Console", "'Lucida Console', Monaco, monospace"),
("Consolas", "Consolas, 'Courier New', monospace"),
],
}
for category, fonts in WEB_SAFE_FONTS.items():
print(f"\n{category.upper()}")
for name, stack in fonts:
print(f" {name}: font-family: {stack}")Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.