CSS 폰트 스택 생성기

기능 소개

CSS 폰트 스택 생성기는 방문자의 기기에 이미 설치된 글꼴로 바로 붙여넣을 수 있는 font-family 값을 만들어 줍니다. 기본 시스템 UI 글꼴, Inter·Helvetica 같은 네오 그로테스크, Charter 같은 트랜지셔널 세리프, 코드에 적합한 고정폭 글꼴 등 원하는 스타일을 고르면 플랫폼별로 가장 알맞은 글꼴을 올바른 순서로 나열해 줍니다.

스택은 잘 알려진 Modern Font Stacks 모음을 따르며, 여전히 많은 사이트가 쓰는 클래식 -apple-system, BlinkMacSystemFont, "Segoe UI" 스택도 포함합니다. 중국어 간체, 중국어 번체, 일본어, 한국어, 아랍어, 태국어, 힌디어 텍스트용 대체 글꼴을 추가하고, 끝에 컬러 이모지 글꼴을 붙일 수도 있습니다.

사용 방법

1. 폰트 스택을 선택합니다. 왼쪽 미리보기에서 지금 사용 중인 기기에서 어떻게 보이는지 확인할 수 있으며, 텍스트를 직접 고쳐 원하는 문장으로 확인해 볼 수도 있습니다.
2. 페이지에 중국어, 일본어, 한국어, 아랍어, 태국어, 힌디어 텍스트가 있다면 다른 문자용 글꼴을 선택합니다.
3. 이모지 폰트 추가를 켜거나 끕니다.
4. 출력 형식을 고릅니다. 일반 font-family 선언, CSS 사용자 정의 속성, Tailwind fontFamily 항목, 단순 목록 중에서 선택할 수 있습니다.
5. 결과를 복사하거나 .css 파일로 다운로드합니다.

공백이 들어 있거나 숫자로 시작하는 이름은 자동으로 따옴표로 감쌉니다. system-ui나 sans-serif 같은 CSS 키워드는 따옴표로 감싸면 존재하지 않는 글꼴 이름이 되어 버리므로 절대 감싸지 않습니다.

예시

중국어 간체 대체 글꼴을 포함한 시스템 UI 스택:

font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

팁

• 본문 텍스트에는 일반 스택을, 코드에는 고정폭 스택을 쓰세요. 시스템 스택 두 개는 로딩 비용이 전혀 들지 않습니다.
• 미리보기는 사용자 기기에 설치된 글꼴에 따라 달라지므로 Windows와 휴대폰에서도 페이지를 확인하세요.
• 나중에 웹 폰트를 추가한다면 목록 맨 앞에 넣고 시스템 스택은 대체 글꼴로 남겨 두세요.