CSS Font
폰트와 관련된 속성들은 아래와 같다.
- 글꼴(Font-familly)
- 크기(Font-size)
- 두께(Font-weight)
- 스타일(Font-style)
Font관련 태그들의 기본표기
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
font-style: italic;
#. Font-family.
글꼴(font-family) 는 말 그대로 글씨체를 바꾼다.
#.Font-family 예제.
<style>
.fontFamily{
font-family:"Times New Roman", Times, serif;
}
</style>
<div class="fontFamily">Hi this is my Font</div>
📍출력물
Hi this is my Font
⭐️알아보기 쉽게 “Times New Roman” 글꼴로 설정하였다.
구글이나 눈누 사이트에서 웹폰트를 불러와서 사용하는 방법도 있는데 다른 포스팅에서 이야기하도록 하겠다.
#. Font-size.
글씨크기(font-size)는 말 그대로 글씨크기를 바꾼다.
#.Font-size 예제.
<style>
.fontSize1{
font-size:10px;
}
.fontSize2{
font-size:40px;
}
</style>
<div class="fontSize1">Hi this is my Font</div>
<div class="fontSize2">Hi this is my Font</div>
📍출력물
Hi this is my FontHi this is my Font
⭐️처음 Div 는 font-size: 10px로 작은 크기를 설정하였고, 두번째 Div 는 font-size: 50px로 큰 크기로 설정하였다.
#. Font-weight.
글씨굵기(font-weight)는 말 그대로 글씨굵기 바꾼다.
#.Font-weight 예제.
<style>
.weight1{
font-weight:100;
}
.weight2{
font-weight:400;
}
.weight3{
font-weight:700;
}
.weight4{
font-weight:900;
}
</style>
<div class="weight1">Weight1</div>
<div class="weight2">Weight2</div>
<div class="weight3">Weight3</div>
<div class="weight4">Weight4</div>
📍출력물
Weight1Weight2Weight3Weight4
⭐️font-weight는 숫자로 설정할 시, 이렇게 4가지 숫자로 구문할 수 있다. 900이상의 큰 숫자는 의미가 없다.
위 예제처럼 숫자로 설정할 수도 있지만, 아래 리스트와 같이 다른방식으로 설정할 수 있다.
다만 모든 글꼴에 적용되는 것은 아니다.
폰트 제작자에 의해서 굵기가 정해지기 때문에 폰트 사용시 설명을 읽어보는 것이 좋다.
| Font-Weight | 다른 표기법(Other Expressions) |
|---|---|
| 100 | Thin |
| 200 | Extra Light |
| 300 | Light |
| 400 | Normal |
| 500 | Medium |
| 600 | Semi Bold |
| 700 | Bold |
| 800 | Extra Bold |
| 900 | Black |
#. Font-Style.
글씨스타일(font-Style)은 글씨의 기울기같은 스타일을 바꾼다.
#.Font-Style 예제.
<style>
.Style1{
font-weight:100;
}
.Style2{
font-weight:400;
}
.Style3{
font-weight:700;
}
</style>
<div class="Style1">Style1</div>
<div class="Style2">Style2</div>
<div class="Style3">Style3</div>
📍출력물
Style1Style2Style3
⭐️normal은 기본으로 스타일이 없는 글씨체이다.
italic은 기울임체이다.
oblique는 기울임체와 달리 기존의 글씨체를 각각 각도만 비스듬하게 기울여진 것이다.
