HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS 튜토리얼

CSS 홈 CSS 소개 CSS 구문 CSS 선택기 CSS 방법 CSS 주석 CSS 색상
Colors RGB HEX HSL
CSS 배경
Background Color Background Image Background Repeat Background Attachment Background Shorthand
CSS 테두리
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
CSS 여백
Margins Margin Collapse
CSS 패딩 CSS 높이/너비 CSS 상자 모델 CSS 개요
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS 텍스트
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS 글꼴
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS 아이콘 CSS 링크 CSS 목록 CSS 테이블
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS 디스플레이 CSS 최대 너비 CSS 위치 CSS Z-색인 CSS 오버플로 CSS 플로트
Float Clear Float Examples
CSS 인라인 블록 CSS 정렬 CSS 결합기 CSS 의사 클래스 CSS 의사 요소 CSS 불투명도 CSS 탐색 모음
Navbar Vertical Navbar Horizontal Navbar
CSS 드롭다운 CSS 이미지 갤러리 CSS 이미지 스프라이트 CSS 속성 선택기 CSS 양식 CSS 카운터 CSS 웹사이트 레이아웃 CSS 단위 CSS 특수성 CSS !중요 CSS 수학 함수

CSS 고급

CSS 둥근 모서리 CSS 테두리 이미지 CSS 배경 CSS 색상 CSS 색상 키워드 CSS 그라디언트
Linear Gradients Radial Gradients Conic Gradients
CSS 그림자
Shadow Effects Box Shadow
CSS 텍스트 효과 CSS 웹 글꼴 CSS 2D 변환 CSS 3D 변환 CSS 전환 CSS 애니메이션 CSS 도구 설명 CSS 스타일 이미지 CSS 이미지 반사 CSS 객체 맞춤 CSS 객체 위치 CSS 마스킹 CSS 버튼 CSS 페이지 매김 CSS 다중 열 CSS 사용자 인터페이스 CSS 변수
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
CSS 상자 크기 조정 CSS 미디어 쿼리 CSS MQ 예 CSS 플렉스박스
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS 반응형

RWD 소개 RWD 뷰포트 RWD 그리드 보기 RWD 미디어 쿼리 RWD 이미지 RWD 비디오 RWD 프레임워크 RWD 템플릿

CSS 그리드

그리드 소개 그리드 컨테이너 그리드 항목

CSS SASS

SASS 튜토리얼

CSS 예제

CSS 템플릿 CSS 예제 CSS 퀴즈 CSS 연습 CSS 인증서

CSS 참조

CSS 참조 CSS 선택기 CSS 함수 CSS 참조 청각 CSS 웹 안전 글꼴 CSS 애니메이션 가능 CSS 단위 CSS PX-EM 변환기 CSS 색상 CSS 색상 값 CSS 기본값 CSS 브라우저 지원

CSS 웹 글꼴

❮ 이전의 다음 ❯

CSS @font-face 규칙

웹 글꼴을 사용하면 웹 디자이너가 사용자 컴퓨터에 설치되지 않은 글꼴을 사용할 수 있습니다.

사용하려는 글꼴을 찾거나 구입한 경우 웹 서버에 글꼴 파일을 포함하기만 하면 필요할 때 사용자에게 자동으로 다운로드됩니다.

"자신의" 글꼴은 CSS @font-face규칙 내에서 정의됩니다.

다양한 글꼴 형식

트루타입 글꼴(TTF)

TrueType은 1980년대 후반 Apple과 Microsoft에서 개발한 글꼴 표준입니다. TrueType은 Mac OS와 Microsoft Windows 운영 체제 모두에서 가장 일반적인 글꼴 형식입니다.

오픈타입 글꼴(OTF)

OpenType은 확장 가능한 컴퓨터 글꼴 형식입니다. TrueType을 기반으로 제작되었으며 Microsoft의 등록 상표입니다. OpenType 글꼴은 오늘날 주요 컴퓨터 플랫폼에서 일반적으로 사용됩니다.

웹 오픈 글꼴 형식(WOFF)

WOFF는 웹 페이지에서 사용하기 위한 글꼴 형식입니다. 2009년에 개발되었으며 현재 W3C 권장 사항입니다. WOFF는 기본적으로 압축 및 추가 메타데이터가 있는 OpenType 또는 TrueType입니다. 목표는 대역폭 제약이 있는 네트워크를 통해 서버에서 클라이언트로 글꼴 배포를 지원하는 것입니다.

웹 오픈 글꼴 형식(WOFF 2.0)

WOFF 1.0보다 더 나은 압축을 제공하는 TrueType/OpenType 글꼴입니다.

SVG 글꼴/모양

SVG 글꼴을 사용하면 텍스트를 표시할 때 SVG를 글리프로 사용할 수 있습니다. SVG 1.1 사양은 SVG 문서 내에서 글꼴 생성을 허용하는 글꼴 모듈을 정의합니다. SVG 문서에 CSS를 적용할 수도 있고 SVG 문서의 텍스트에 @font-face 규칙을 적용할 수도 있습니다.

임베디드 OpenType 글꼴(EOT)

EOT 글꼴은 웹 페이지에 포함된 글꼴로 사용하기 위해 Microsoft에서 설계한 OpenType 글꼴의 압축된 형태입니다.

글꼴 형식에 대한 브라우저 지원

표의 숫자는 글꼴 형식을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Font format
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG Not supported Not supported Not supported 3.2 Not supported
EOT 6.0 Not supported Not supported Not supported Not supported

*IE: 글꼴 형식은 "설치 가능"으로 설정된 경우에만 작동합니다.

원하는 글꼴 사용

@font-face규칙 에서 ; 먼저 글꼴 이름(예: myFirstFont)을 정의한 다음 글꼴 파일을 가리킵니다.

팁: 글꼴 URL에는 항상 소문자를 사용하십시오. 대문자는 IE에서 예기치 않은 결과를 줄 수 있습니다.

HTML 요소에 글꼴을 사용하려면 font-family속성 을 통해 글꼴 이름(myFirstFont)을 참조하십시오.

예시

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

굵은 텍스트 사용

@font-face굵은 텍스트에 대한 설명자를 포함하는 다른 규칙을 추가해야 합니다 .

예시

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

"sansation_bold.woff" 파일은 Sansation 글꼴의 굵은 문자를 포함하는 또 다른 글꼴 파일입니다.

브라우저는 글꼴 패밀리 "myFirstFont"가 있는 텍스트가 굵게 렌더링되어야 할 때마다 이것을 사용합니다.

이렇게 @font-face하면 동일한 글꼴에 대해 많은 규칙을 가질 수 있습니다.

연습으로 자신을 테스트하십시오

연습:

이름이 "sansation"이고 URL이 "sansation_light.woff"인 웹 글꼴을 추가합니다.

<style>
 {
  font-family: ;
  : ;
}

body {
  font-family: sansation;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS 글꼴 설명자

다음 표에는 @font-face규칙 내에서 정의할 수 있는 모든 글꼴 설명자가 나열되어 있습니다.

Descriptor Values Description
font-family name Required. Defines a name for the font
src URL Required. Defines the URL of the font file
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded		 Optional. Defines how the font should be stretched. Default is "normal"
font-style normal
italic
oblique		 Optional. Defines how the font should be styled. Default is "normal"
font-weight normal
bold
100
200
300
400
500
600
700
800
900		 Optional. Defines the boldness of the font. Default is "normal"
unicode-range unicode-range Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF"

❮ 이전의 다음 ❯