사용 안내서 취소

CSS 선택기

검색

마지막 업데이트 날짜 2022년 11월 28일

Fonts

글꼴 찾아보기

CSS 선택기는 사용 중인 웹 글꼴을 적용할 위치와 텍스트에 사용할 글꼴의 두께 및 스타일을 브라우저에 알려 줍니다.

CSS에서 글꼴 패밀리 이름 사용

웹 프로젝트 페이지에는 프로젝트의 각 글꼴에 대한 CSS 글꼴 패밀리 이름, 숫자로 표기되는 두께 및 글꼴 스타일이 표시됩니다. 각 프로젝트에 대한 CSS 세부 사항을 보려면 "프로젝트 편집" 링크를 클릭하십시오.

문서에 임베드 코드를 포함했으면 CSS에서 이러한 글꼴 패밀리 이름을 사용하여 글꼴을 텍스트에 적용합니다. 예:

h1 {
  font-family: &quot;brandon-grotesque&quot;, sans-serif;
}

대체 글꼴 지정

사용자의 브라우저가 웹 글꼴을 지원하지 않거나 어떤 이유로든 로드되지 않으면 CSS 스택의 대체 글꼴이 대신 사용됩니다.

글꼴 스택에는 플랫폼에서 균일하게 사용할 수 있는 하나 이상의 대체 글꼴(예: Georgia 또는 Arial)이 포함되어야 하며 그 뒤에 일반적인 글꼴 패밀리 이름(예: serif 또는 sans-serif)이 있어야 합니다. 브라우저가 첫 번째 글꼴을 찾을 수 없는 경우 두 번째 글꼴을 시도하는 식입니다.

여러 두께 및 스타일 사용

CSS에서 숫자 글꼴 두께 값을 사용하여 "기본" 및 "볼드" 이외의 글꼴 두께를 지정할 수 있습니다. 다음은 숫자 값이 가장 자주 대응하는 두께입니다.

100 = 씬
200 = 엑스트라 라이트
300 = 라이트
400 = 기본, 책
500 = 미디엄
600 = 데미 볼드
700 = 볼드
800 = 헤비
900 = 블랙

프로젝트의 모든 글꼴에 대한 숫자 값은 웹 프로젝트 페이지에서 확인할 수 있습니다.

예를 들어 이 CSS를 사용하여 글꼴의 700 두께를 h1 요소에 적용합니다.

h1 {
  font-weight: 700;
}

Internet Explorer 8에서 변형별 이름 사용

Internet Explorer 8는 패밀리당 최대 4개의 두께를 로드하며 두 개의 밀접하게 관련된 두께(예: 600 및 700)를 사용하면 하나의 두께만 올바르게 로드될 수 있습니다. Adobe Fonts는 이러한 버그를 모두 관리하기 위해 해당 버전의 브라우저에 변형별 글꼴 패밀리 이름을 제공합니다.

변형별 이름은 필요에 따라 글꼴 패밀리 스택의 시작 부분 기본 패밀리 이름 앞에 추가해야 합니다.

#post-title {
  font-family: &quot;brandon-grotesque-n7&quot;,&quot;brandon-grotesque&quot;, sans-serif;
  font-style: normal;
  font-weight: 700;
}

이름은 일반 글꼴 패밀리 이름, 뒤에 대시, 뒤에글꼴 변형 설명(또는 FVD)으로 구성됩니다. 예를 들어 700 weight 글꼴이 포함된 brandon-grotesque의 변형별 이름은 brandon-grotesque-n7입니다.

변형별 이름은 이러한 문제가 없는 브라우저에서는 정의되지 않으므로 스택에서 두 번째로 오는 전체 패밀리 이름을 사용합니다.

대부분의 사용자는 이러한 추가 글꼴 패밀리 이름을 사용할 필요가 없습니다. 특히 Internet Explorer 8에서 글꼴이 올바르게 표시되는 데 문제가 있는 경우에만 추가하면 됩니다.

쉽고 빠르게 지원 받기

신규 사용자이신가요?