1. CSS 글꼴
- 아래와 같은 글꼴 속성을 제공한다.
2. font-family
- 텍스트를 렌더링하는 데 사용할 글꼴을 지정한다.
- 이 속성은 여러 개의 쉼표(,)로 구분 된 글꼴 이름을 대체할 수 있는 글꼴로 보유할 수 있다.
- 만약 사용자 시스템에서 첫 번째 글꼴을 사용할 수 없는 경우 브라우저가 자동으로 두 번째 글꼴을 적용하려고 시도한다.
- 웹 디자인에서 사용되는 가장 기본 글꼴은 serif 및 sans-serif 이다.- seif 글꼴과 sans-serif 글꼴의 차이는 아래 이미지와 같다.
body {
font-family: Arial, Helvetica, sans-serif;
}
3. font-size
- 글꼴 크기를 설정하는 데 사용한다.
- 키워드, %, px, ems 등 다양한 방법으로 size를 지정할 수 있다.
1) 픽셀을 이용한 글꼴 크기 지정
- 픽셀은 고정 길이를 지정하는 절대 측정 단위.
- 사용자가 브라우저 설정에서 글꼴 크기를 변경할 수 없기 때문에 픽셀 단위로 글꼴 크기를 정의하는 것은 접근하기 어려운 방법이다. (W3C는 강력한 확장 레이아웃을 위해 em 또는 백분율(%) 값을 사용하도록 권장)
- 따라서 포괄적인 디자인을 만들려면 픽셀 값을 사용하지 않고 기본 글꼴 크기에 상대적인 값을 사용해야한다.
2) em을 이용한 글꼴 크기 지정
- em은 부모 요소의 폰트 크기를 의미한다.
- 예를 들어 body 내 font-size 요소에 20px를 설정하면 1em = 20px, 2em = 40px이다.
- 어느 곳에서도 글꼴 크기를 설정하지 않은 경우 일반적으로 16px가 기본값이다.
3) 백분율과 em을 조합한 글꼴 크기 지정
- em의 계산은 간단하지 않다.
- 따라서 이를 단순화하기 위해 body의 font-size에 대해 62.5(16px의 62.5 %)로 사용하는 것이다.
- 이는 10px 또는 0.625와 동일하다.
- 기억하기 쉬운 변환을 사용하는 방법이다. 10px = 1em, 12px = 1.2em, 14px = 1.4em
4) root em을 이용한 글꼴 크기 지정
- CSS3가 도입한 더 간단한 방법은 루트 요소(rem)를 기준으로 하는 것이다.
html {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.4rem; /* 1.4rem = 14px */
}
p span {
font-size: 2rem; /* 2rem = 20px (not 28px) */
}5) 키워드를 이용한 글꼴 크기 지정
- CSS는 글꼴 크기를 정의할 수 있는 키워드를 제공한다.
- xx-samll(9px), x-samll(10px), small(13px), medium(16px), large(18px), x-large(24px), xx-large(32px)
6) 키워드를 이용한 글꼴 크기 지정
- vw 또는 vh의 뷰 포트 단위를 이용해 지정할 수 있다.
- 뷰 포트 단위는 브라우저 뷰 포트 크기의 백분율을 나타낸다.
(1vw = 뷰 포트 너비의 1%, 1vh = 뷰 포트 높이의 1%)
- 뷰 포트 단위를 사용할 경우 글꼴이 매우 작아 읽기 어려운 경우가 있다.
- 이를 위해 다음과 같이 calc()을 사용한다.
(아래 예는 뷰 포트 넓이가 0이 되더라도 글 꼴크기는 1em 또는 16px 이상이 된다.)
html {
font-size: calc(1em + 1vw);
}
h1 {
font-size: 3rem;
}
4. font-weight
- 글꼴의 두께 또는 굵기를 지정한다. 대부분의 글꼴은 제한된 수의 가중치로만 사용 할 수있다.
- 속성 값으로 normal, bold, bolder, lighter, 100, 200, 300, ... 900, inherit를 지정할 수 있다.
- 400 = normal, 700 = bold 와 동일하다.
5. font-varient
- font-variant 속성을 사용하여 텍스트를 특정한 작은 대문자 변형으로 표시할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting font-variant in CSS</title>
<style>
p {
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
'Language > CSS' 카테고리의 다른 글
| [CSS] CSS 링크 (0) | 2021.02.03 |
|---|---|
| [CSS] CSS 텍스트 (0) | 2021.02.03 |
| [CSS] CSS 배경 (0) | 2021.02.03 |
| [CSS] CSS 색상 (0) | 2021.02.03 |
| [CSS] CSS 기초 (0) | 2021.02.03 |