웹 안전 폰트 레퍼런스
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.