사용 안내서 취소

CSS 선택기

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

 Adobe

쉽고 빠르게 지원 받기

신규 사용자이신가요?

Adobe MAX 2024

Adobe MAX
크리에이티비티 컨퍼런스

10월 14~16일 마이애미 비치 및 온라인

Adobe MAX

크리에이티비티 컨퍼런스

10월 14~16일 마이애미 비치 및 온라인

Adobe MAX 2024

Adobe MAX
크리에이티비티 컨퍼런스

10월 14~16일 마이애미 비치 및 온라인

Adobe MAX

크리에이티비티 컨퍼런스

10월 14~16일 마이애미 비치 및 온라인