CSS의 글꼴 속성은 글꼴 가족, 대담, 크기 및 텍스트의 스타일을 정의합니다.
고딕과 산세 - 리프 글꼴 사이의 차이
CSS 글꼴 가족
CSS에서 글꼴 가족 이름의 두 가지 유형이 있습니다 :
- 일반 가족 - ( "고딕"또는 "고정 폭"등) 비슷한 모습 폰트 패밀리의 그룹
- 글꼴 가족 - ( "굴림"또는 "굴림"같은) 특정 글꼴 가족
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia |
Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana |
"Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console |
All monospace characters have the same width |
 | 참고 : 컴퓨터 화면에, 산세 리프 글꼴은 세리프 글꼴을보다 쉽게 읽을 간주됩니다. |
|---|
글꼴 가족
텍스트의 폰트 패밀리가 설정된다 font-family 속성입니다.
font-family 속성은 "대체"시스템으로 여러 글꼴 이름을 개최한다. 브라우저는 제 폰트를 지원하지 않는 경우 등에는 다음 폰트를 시도하고.
원하는 글꼴로 시작하고 다른 글꼴을 사용할 수없는 경우 브라우저가, 일반 가정에서 유사한 글꼴을 선택할 수 있도록, 일반 가족과 함께 끝난다.
참고 : "굴림"글꼴 가족의 이름이 두 개 이상의 단어가 있다면, 그것은 같은 인용 부호에 있어야합니다.
하나 이상의 글꼴 제품군은 쉼표로 구분 된 목록에 지정되어 있습니다 :
일반적으로 사용되는 글꼴 조합을 위해, 우리를 보면 웹 안전 글꼴 조합 .
글꼴 스타일
font-style 속성은 대부분 기울임 꼴 텍스트를 지정하는 데 사용됩니다.
이 속성은 세 가지 값이 있습니다 :
- 일반 - 텍스트가 정상적으로 표시됩니다
- 이탤릭체 - 텍스트가 이탤릭체로 표시됩니다
- 경사는 - 텍스트 (경사가 기울임 매우 유사하지만, 적은 지원) "기울고"입니다
예
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
} »그것을 자신을 시도 글꼴 크기
font-size 속성은 텍스트의 크기를 설정합니다.
텍스트 크기를 관리 할 수있는 것은 웹 디자인에 중요하다. 그러나 단락 제목처럼, 또는 제목 단락처럼 보이게 글꼴 크기 조정을 사용할 수 없습니다.
항상 같은 적절한 HTML 태그를 사용 <H1> - 문단에 대한 제목과 <P>에 대한 <H6>.
폰트 크기 값은 절대적 또는 상대적 크기 일 수있다.
절대 크기 :
- 지정된 크기로 텍스트를 설정합니다
- 사용자가 (접근성 이유로 나쁜) 모든 브라우저에서 텍스트 크기를 변경할 수 없습니다
- 출력의 물리적 크기가 공지되면 절대 크기 유용
상대 크기 :
- 주변 요소에 크기 기준으로 설정
- 사용자가 브라우저에서 텍스트 크기를 변경할 수 있습니다
| 참고 : 글꼴 크기, 일반 텍스트의 기본 크기를 지정하지 않으면, 단락과 같은 16px입니다 (16px = 1em). |
|---|
픽셀로 설정 글꼴 크기
픽셀 텍스트 크기를 설정하면 당신에게 텍스트 크기를 완벽하게 제어 할 수 있습니다 :
팁 : 픽셀을 사용하는 경우, 당신은 여전히 전체 페이지 크기를 조정 줌 도구를 사용할 수 있습니다.
엠으로 설정 글꼴 크기
사용자가 (브라우저 메뉴에서) 텍스트의 크기를 조정할 수 있도록하려면, 많은 개발자 픽셀 대신에 그들을 사용합니다.
전각의 크기 단위는 W3C에 의해 권장합니다.
1em은 현재 글꼴 크기와 같다. 브라우저의 기본 텍스트 크기는 16px이다. 그래서, 1em의 기본 크기는 16px이다.
픽셀/ 16 =EM: 크기는 다음 공식을 사용하여 EM 픽셀로부터 계산 될 수있다
예
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
} »그것을 자신을 시도 위의 예에서, EM 텍스트 크기는 픽셀 앞의 예와 동일하다. 그러나, EM 크기, 모든 브라우저에서 텍스트 크기를 조정할 수있다.
불행하게도, 여전히 IE의 이전 버전에 문제가있는 것입니다. 텍스트는 작게해야 할 때보다가 크게해야 할 때보다 더 큰, 작은된다.
퍼센트와 엠의 조합을 사용하여
모든 브라우저에서 작동하는 솔루션 인 <몸> 요소에 대한 퍼센트의 기본 글꼴 크기를 설정하는 것입니다 :
예
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
} »그것을 자신을 시도 우리의 코드는 현재 잘 작동합니다! 그것은 모든 브라우저에서 동일한 텍스트 크기를 표시하고 모든 브라우저가 확대하거나 텍스트 크기를 조절 할 수 있습니다!
글꼴 무게
font-weight 속성은 폰트의 무게를 지정합니다 :
글꼴 변형
font-variant 속성은 텍스트를 작은 대문자 글꼴로 표시할지 여부를 지정합니다.
작은 모자 글꼴에서 모든 소문자가 대문자로 변환됩니다. 그러나, 변환 된 대문자는 텍스트의 원래 대문자보다 작은 글꼴 크기에 나타납니다.
더 예
하나의 선언에서 모든 글꼴 속성
이 예는 하나의 선언에서 글꼴의 모든 속성을 설정하는 약식 속성을 사용하는 방법을 보여줍니다.
연습으로 자신을 테스트!
모든 CSS 글꼴 속성
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |