CSS 선택기는 사용 중인 웹 글꼴을 적용할 위치와 텍스트에 사용할 글꼴의 두께 및 스타일을 브라우저에 알려 줍니다.
CSS에서 글꼴 패밀리 이름 사용
웹 프로젝트 페이지에는 프로젝트의 각 글꼴에 대한 CSS 글꼴 패밀리 이름, 숫자로 표기되는 두께 및 글꼴 스타일이 표시됩니다. 각 프로젝트에 대한 CSS 세부 사항을 보려면 "프로젝트 편집" 링크를 클릭하십시오.
문서에 임베드 코드를 포함했으면 CSS에서 이러한 글꼴 패밀리 이름을 사용하여 글꼴을 텍스트에 적용합니다. 예:
대체 글꼴 지정
사용자의 브라우저가 웹 글꼴을 지원하지 않거나 어떤 이유로든 로드되지 않으면 CSS 스택의 대체 글꼴이 대신 사용됩니다.
글꼴 스택에는 플랫폼에서 균일하게 사용할 수 있는 하나 이상의 대체 글꼴(예: Georgia 또는 Arial)이 포함되어야 하며 그 뒤에 일반적인 글꼴 패밀리 이름(예: serif 또는 sans-serif)이 있어야 합니다. 브라우저가 첫 번째 글꼴을 찾을 수 없는 경우 두 번째 글꼴을 시도하는 식입니다.
여러 두께 및 스타일 사용
CSS에서 숫자 글꼴 두께 값을 사용하여 "기본" 및 "볼드" 이외의 글꼴 두께를 지정할 수 있습니다. 다음은 숫자 값이 가장 자주 대응하는 두께입니다.
- 100 = 씬
- 200 = 엑스트라 라이트
- 300 = 라이트
- 400 = 기본, 책
- 500 = 미디엄
- 600 = 데미 볼드
- 700 = 볼드
- 800 = 헤비
- 900 = 블랙
프로젝트의 모든 글꼴에 대한 숫자 값은 웹 프로젝트 페이지에서 확인할 수 있습니다.
예를 들어 이 CSS를 사용하여 글꼴의 700 두께를 h1 요소에 적용합니다.
Internet Explorer 8에서 변형별 이름 사용
Internet Explorer 8는 패밀리당 최대 4개의 두께를 로드하며 두 개의 밀접하게 관련된 두께(예: 600 및 700)를 사용하면 하나의 두께만 올바르게 로드될 수 있습니다. Adobe Fonts는 이러한 버그를 모두 관리하기 위해 해당 버전의 브라우저에 변형별 글꼴 패밀리 이름을 제공합니다.
변형별 이름은 필요에 따라 글꼴 패밀리 스택의 시작 부분 기본 패밀리 이름 앞에 추가해야 합니다.
이름은 일반 글꼴 패밀리 이름, 뒤에 대시, 뒤에글꼴 변형 설명(또는 FVD)으로 구성됩니다. 예를 들어 700 weight 글꼴이 포함된 brandon-grotesque의 변형별 이름은 brandon-grotesque-n7입니다.
변형별 이름은 이러한 문제가 없는 브라우저에서는 정의되지 않으므로 스택에서 두 번째로 오는 전체 패밀리 이름을 사용합니다.
대부분의 사용자는 이러한 추가 글꼴 패밀리 이름을 사용할 필요가 없습니다. 특히 Internet Explorer 8에서 글꼴이 올바르게 표시되는 데 문제가 있는 경우에만 추가하면 됩니다.
