사용 안내서 취소

CodePen에서 웹 글꼴 사용하기

  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에서 업데이트 시 중요 사항

CodePen은 브라우저에서 바로 코드를 실험할 수 있는 웹 기반 HTML, CSS 및 JavaScript 코드 편집기입니다. 펜에서 바로 맞춤형 웹 글꼴을 사용할 수 있습니다.

사용할 글꼴 선택

웹 글꼴 튜토리얼을 따라 몇 가지 글꼴을 선택하고 웹 프로젝트를 만듭니다.

펜에 임베드 코드 추가

HTML 편집기의 설정 메뉴에 있는 "<head>의 항목" 필드 또는 "CSS > 외부 CSS 추가"메뉴에서 CodePen UI에 임베드 코드를 추가할 수 있습니다.

프로젝트의 임베드 코드를 확인하려면 웹 프로젝트 페이지로 이동하여 프로젝트 이름을 찾습니다. 해당 프로젝트에 대한 기본 CSS 임베드 코드를 복사하여 이러한 위치들 중 하나에 붙여넣습니다.

기본 CSS 임베드 코드와 함께 CodePen 사용

CSS 파일을 직접 연결하여 CodePen 사용

CSS에 글꼴 적용

이제 펜의 CSS 편집기에서 글꼴 패밀리 이름을 사용할 수 있으며 글꼴이 라이브 뷰에 즉시 표시됩니다.

웹 글꼴이 적용된 CodePen 편집기

CSS에서 사용할 글꼴 패밀리 이름도 웹 프로젝트에 나열됩니다. CSS에서 글꼴 사용을 참조하십시오.

웹 프로젝트 페이지의 CSS 정보

펜 포크하기

공용 펜을 포크하여 다른 사용자가 코드를 작성할 수 있습니다. 웹 글꼴은 포크된 펜에서도 작동합니다.

프로젝트 삭제 또는 구독 취소

CodePen에서 사용 중인 프로젝트를 삭제하거나 구독을 취소하면 임베드 코드를 사용하는 모든 펜에서 더 이상 글꼴을 사용할 수 없습니다. 여기에는 원래의 펜과 이 펜에서 포크된 모든 펜이 포함됩니다. CSS에 지정된 대체 글꼴이 맞춤형 웹 글꼴 대신 적용됩니다.

 Adobe

쉽고 빠르게 지원 받기

신규 사용자이신가요?