font-family
font-size
font-style 예) font-style:italic
font-weight
font-weight : 300; /* 100~900의 범위에서, 300 정도 굵기 */
font-weight : bold; /* 굵게. 700 크기 */
단축 프로퍼티
font-style, font-weight, font-size, font-family를 순서대로 지정하는 단축 프로퍼티
예) 20픽셀로 이탤릭 스타일에 bold 굵기로 consolas 체
font : italic bold 20px consolas, sans-serif;
font : 20px consolas, sans-serif;
/* font-size, font-family외 생략 가능 */
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{font-family:'Times New Roman', Times, serif;}
/*'타임즈 뉴 로만'에 공백이 있어서 한 가지로 인식되기 위해 ''로 묶어줍니다.
3가지 순서대로 우선순위를 가집니다. 혹시 클라이언트에게 없는 폰트일까봐..*/
h3{font:italic bold 40px consolas, sans-serif}
</style>
</head>
<body>
<h3>Consilas font</h3>
<hr>
<p style="font-weight: 900;">font-weight: 900</p>
<p style="font-weight: 100;">font-weight: 100</p>
<p style="font-style:italic;">font-style :italic</p>
<p style="font-style:oblique;">font-style : oblique 900</p>
<p>현재의 크기의
<span style="font-size: 1.5em;">1.5배</span>크기로
</p>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
'HTML&CSS' 카테고리의 다른 글
| CSS박스에 배경꾸미기 //Decoration the background on the box (0) | 2020.03.06 |
|---|---|
| CSS 둥근 모서리 // Rounded corners (0) | 2020.03.06 |
| CSS 텍스트 꾸미기 // how to decorate text in CSS (0) | 2020.03.06 |
| CSS 색 활용 // how to use CSS to color any HTML text element using an HTML tag, ID or class. (0) | 2020.03.05 |
| CSS 선택자 // CSS selector (0) | 2020.03.05 |
