사용 안내서 취소

CSS 선택기

  1. Adobe Fonts 사용 안내서
  2. 소개
    1. 시스템 및 구독 요구 사항
    2. 브라우저 및 OS 지원
    3. 컴퓨터에서 글꼴 추가
    4. 웹 사이트에 글꼴 추가
    5. CC Mobile에서 글꼴 추가
  3. 글꼴 라이선싱
    1. Adobe Fonts에서 추가된 글꼴
    2. Adobe Fonts의 웹 글꼴
    3. 기업 고객용 Creative Cloud
    4. 제거된 글꼴
    5. 이들 글꼴이 내 Creative Cloud 구독에 포함되지 않은 이유는 무엇입니까?
    6. Adobe Fonts에서 글꼴에 대한 라이선스를 구매하라는 메시지가 표시되는 이유는 무엇입니까?
    7. 중국에서 등록된 Adobe ID로는 Adobe Fonts를 사용할 수 없습니다.
  4. 글꼴 다운로드 및 사용하기
    1. Creative Cloud 앱에서 Adobe Fonts 사용하기
    2. 내 글꼴 관리
    3. 이미지에서 글꼴 찾기
    4. 데스크탑 애플리케이션에서 누락된 글꼴 문제 해결
    5. InDesign에서 글꼴 사용하기
    6. 글꼴 및 타이포그래피
    7. HTML5 Canvas 문서에서 웹 글꼴 사용하기
    8. InCopy에서 글꼴 사용하기
    9. Muse에서 웹 글꼴 사용하기
    10. 글꼴 파일 패키징
    11. 문제 해결 안내서: 글꼴 추가하기
    12. 추가된 글꼴이 글꼴 메뉴에 표시되지 않음
    13. “하나 이상의 글꼴을 추가할 수 없음” 또는 “동일한 이름의 글꼴이 이미 설치되어 있음”
    14. 사용하고 있는 글꼴을 제작자가 업데이트하면 어떻게 됩니까?
    15. Adobe 프로그램에서 글꼴 숨기기
  5. 웹 디자인 및 개발
    1. 웹 사이트에 글꼴 추가
    2. 문제 해결 안내서: 웹 사이트에 글꼴 추가하기
    3. 글꼴 문제 해결
    4. HTML 이메일 또는 뉴스레터에서 웹 글꼴 사용하기
    5. AMP(Accelerated Mobile Pages)에서 웹 글꼴 사용하기
    6. CSS 선택기
    7. 글꼴 표시 설정으로 웹 글꼴 성능 맞춤화
    8. 임베드 코드
    9. 동적 하위 집합 및 웹 글꼴 제공
    10. 글꼴 이벤트
    11. 내 웹 글꼴을 use.typekit.net에서 가져오는 이유는 무엇입니까?
    12. 사이트가 use.typekit.net에 연결되지 않습니다.
    13. CodePen에서 웹 글꼴 사용하기
    14. 브라우저 및 OS 지원
    15. 도메인
    16. 로컬에서 개발 시 웹 글꼴 사용하기
    17. 콘텐츠 보안 정책
    18. 웹 글꼴 인쇄하기
  6. 언어 지원 및 OpenType 기능
    1. 언어 지원 및 하위 집합
    2. OpenType 기능 사용하기
    3. CSS의 OpenType 기능에 대한 구문
  7. 글꼴 기술
    1. OpenType-SVG 색상 글꼴
    2. Ten Mincho: 버전 1.000에서 업데이트 시 중요 사항

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

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

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

이미지

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

h1 {
  font-family: "brandon-grotesque", 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: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
  font-style: normal;
  font-weight: 700;
}

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

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

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

쉽고 빠르게 지원 받기

신규 사용자이신가요?