탐색
토큰

글꼴

글꼴 계열, 크기, 굵기를 모두 font-* 형식으로 지정합니다.

이 페이지의 내용

클래스

클래스선언
font-<family>font-family: var(--font-family-<family>);
font-<size>font-size: var(--font-size-<size>);
font-<weight>font-weight: var(--font-weight-<weight>);

세 네임스페이스가 font- 접두사를 공유하므로 이름은 세 네임스페이스 사이에서 고유해야 합니다. 둘 이상에 같은 이름이 정의되면 AMBIGUOUS_TOKEN을 보고하고 CSS를 생성하지 않습니다.

값

글꼴 계열은 순서가 있는 대체 목록이고, 크기는 rem 길이이며, 굵기는 숫자로 요청합니다. 픽셀 환산값은 루트 글꼴 크기가 16px라고 가정합니다. 실제 표시되는 글꼴과 사용 가능한 굵기는 페이지가 불러온 글꼴에 따라 달라집니다.

글꼴 계열

클래스값
font-sans
var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
font-mono
var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospacevar(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
font-serif
var(--font-serif, ui-serif), Georgia, Cambria, "Times New Roman", Times, serifvar(--font-serif, ui-serif), Georgia, Cambria, "Times New Roman", Times, serif
모든 글꼴 계열 비교
font-sans
The shape of a letter
font-mono
The shape of a letter
font-serif
The shape of a letter

크기

클래스값
font-3xs.5rem8px
font-2xs.625rem10px
font-xs.75rem12px
font-sm.875rem14px
font-md1rem16px
font-lg1.125rem18px
font-xl1.25rem20px
font-2xl1.5rem24px
font-3xl2rem32px
font-4xl2.25rem36px
font-5xl2.5rem40px
font-6xl3rem48px
font-7xl3.75rem60px
font-8xl4.5rem72px
font-9xl6rem96px
font-10xl8rem128px
모든 글꼴 크기 비교
font-3xs
Aa
font-2xs
Aa
font-xs
Aa
font-sm
Aa
font-md
Aa
font-lg
Aa
font-xl
Aa
font-2xl
Aa
font-3xl
Aa
font-4xl
Aa
font-5xl
Aa
font-6xl
Aa
font-7xl
Aa
font-8xl
Aa
font-9xl
Aa
font-10xl
Aa

굵기

클래스값
font-thin100
font-extralight200
font-light300
font-regular400
font-medium500
font-semibold600
font-bold700
font-extrabold800
font-heavy900
모든 글꼴 굵기 비교
font-thin
The shape of a letter
font-extralight
The shape of a letter
font-light
The shape of a letter
font-regular
The shape of a letter
font-medium
The shape of a letter
font-semibold
The shape of a letter
font-bold
The shape of a letter
font-extrabold
The shape of a letter
font-heavy
The shape of a letter

하나의 접두사, 독립적인 속성

font-serif, font-4xl, font-semibold는 각각 font-family, font-size, font-weight를 설정합니다. 서로 다른 속성을 지정하므로 함께 사용할 수 있지만 어느 하나도 완전한 텍스트 스타일은 아닙니다.

font 접두사는 세 가지 독립 속성을 바꿀 수 있습니다

각 행은 font-sans, font-2xl, font-regular에서 시작하며 결과에서는 지정된 속성의 클래스만 바꿉니다. 실제 표시되는 글꼴은 사용 가능한 글꼴에 따라 결정됩니다.

텍스트 설명
  1. 기준 텍스트는 sans 계열, 1.5rem 크기, 400 굵기를 사용하며 루트 글꼴 크기는 16px입니다.
  2. font-serif 행은 font-family만 바꿉니다. font-4xl 행은 font-size만 2.25rem으로, font-semibold 행은 font-weight만 600으로 바꿉니다.
  3. 각 결과는 같은 문구를 사용합니다. 공통으로 단위 없는 line-height 1.5를 지정해 읽기 쉽게 했으며, 이 font 클래스들이 line-height를 설정하는 것은 아닙니다.
  4. 견본은 실제 프리셋 CSS와 사용 가능한 시스템 글꼴로 렌더링합니다. 글꼴 계열 클래스가 글꼴 파일을 다운로드한다는 뜻은 아닙니다.

크기 클래스는 줄 높이와 자간을 각각의 선언이나 상속에 맡깁니다. 세 치수를 하나의 스타일에서 가져오려면 text-<name>을 사용하세요. 어느 형식이든 글꼴 계열과 굵기는 별개입니다.

글꼴 계열 토큰은 글꼴 이름을 지정할 뿐 다운로드하지 않습니다. 프리셋의 sans, mono, serif 스택은 선택적 연결 지점인 --font-sans, --font-mono, --font-serif로 각각 시작합니다. 글꼴을 불러오고 사이트 전체의 글꼴 스택을 선택하는 방법은 타이포그래피 가이드에서 다룹니다.

사용자 지정 키는 세 네임스페이스에서 서로 달라야 합니다. --font-family-brand와 --font-size-brand가 모두 있으면 font-brand는 모호해집니다. (font-size:var(--font-size-brand)) 같은 명시적 네이티브 선언으로 의도한 속성과 변수를 지정할 수 있습니다.

관련 문서: 텍스트 스타일, 네임스페이스 해석, 네이티브 글꼴 선택.

사용 예

제목에는 더 큰 크기와 중간 굵기를 지정하고 코드 예제에는 고정폭 글꼴 계열을 사용합니다.

Release notes

Install the new version with npm i @master/css.

<h3 class="… font-2xl font-medium">Release notes</h3><p class="… font-sm">Install the new version with <code class="… font-mono font-xs">npm i @master/css</code>.</p>
생성된 CSS
@layer theme {  :root,  :host {    --font-family-mono: var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;    --font-weight-medium: 500;    --font-size-xs: .75rem;    --font-size-sm: .875rem;    --font-size-2xl: 1.5rem  }}@layer utilities {  .font-mono {    font-family: var(--font-family-mono)  }  .font-2xl {    font-size: var(--font-size-2xl)  }  .font-sm {    font-size: var(--font-size-sm)  }  .font-xs {    font-size: var(--font-size-xs)  }  .font-medium {    font-weight: var(--font-weight-medium)  }}

사용자 정의

각 네임스페이스는 고유한 토큰을 받습니다. --font-family-display는 font-display를, --font-size-hero는 font-hero를 생성합니다.

@theme {  --font-family-display: "Inter Display", var(--font-family-sans);  --font-size-hero: 4rem;}
생성된 CSS
@layer theme {  :root,  :host {    --font-family-sans: var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"  }  :root,  :host {    --font-family-display: "Inter Display", var(--font-family-sans);    --font-size-hero: 4rem  }}@layer utilities {  .font-display {    font-family: var(--font-family-display)  }  .font-hero {    font-size: var(--font-size-hero)  }}

관련 문서: 테마 지시문, 타이포그래피.