Web Safe Fonts Reference
Просмотрите все веб-безопасные шрифты с живыми предпросмотрами, отфильтрованными по категориям serif, sans-serif и monospace.
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.