CSS font 중요한 property에 대해 알아보기

Mozilla 홈페이지의 font에서 중요하다 생각되는 property에 대해 공부해보았습니다.

font-family

하나 이상의 font family 이름 또는 generic family 이름으로 이루어진, 우선순위가 정해진 리스트

리스트 아이템은 콤마로 구분되며, 첫번째 font가 가장 큰 우선순위를 가지며 설치되 있거나 @font-face에서 다운로드되면 가장 먼저 선택됩니다.

 

최소 하나의 generic family가 들어 있어야 하며, 필요할 때 generic family font를 대안으로 브라우저가 사용하게 합니다.

 

@import url("http://~~google font url (Roboto)")

body{
	font-family:'Roboto', sans-serif
}

만약 Roboto가 설치되지 못하면 브라우저의 기본 sans-serif 글꼴이 적용되게 됩니다.

크롬 기준으로 설정 > 모양 > 글꼴 맞춤설정에서 확인 가능합니다.

구글 크롬 글꼴 맞춤 설정

• serif : 글자의 끝 부분에 장식선, 획이 있는 글꼴 (바탕, 명조 등) 
• Sans-serif : 글자 끝에 장식선, 획이 없는 글꼴 (고딕 등)
• 고정폭 글꼴 (monospace) : 글자마다 width가 동일한 글꼴
• cursive : 필기체, 손으로 쓴 듯한 글꼴
• fantasy : 쾌활한(playful) 표현의 글꼴
• math : 수식 표현 시 사용되는 글꼴
• emoji : 이모지를 render하도록 설계된 글꼴

---

font-size

font 크기를 설정하는 property

 

absolute-size

xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large

크롬에서 브라우저 중간 옵션에서 medium은 16px, 크게 옵션에서 medium은 20px로,

브라우저 옵션에 따라서 기준이 다릅니다.

 

relative-size

larger, smaller

부모 element의 font 크기에 따라 거지거나 작아지며 그 비율은 absolute-size를 나누는 기준으로 정해집니다.

 

<length>

em, rem, vh, px ... 등등 <length>로 표현할 수 있는 것으로 나타내는 font 크기 

 

percentage

부모 element에 상대적인 퍼센트 font 크기

 

실습

    <div class="content" id="content1">content
        <div class="detail" id="detail1">
            오늘은 다카마쓰에서 사온 치쿠세이 우동 밀키트를 먹어보았습니다
            <div class="detail" id="detail2">면만드는 아조씨 친절하셨는데</div>
            <div class="detail" id="detail3">추억이 새록새록 하고만요</div>
            <div class="detail" id="detail4">뇸뇸</div>
        </div>
    </div>

.detail{
    font-size: 1rem; /* length size로 표현*/
}
.detail #detail2{
    font-size: 80%; /* percentage size로 표현*/
}
.detail #detail3{
    font-size: medium; /* absolute size로 표현*/
}

.detail #detail4{
    font-size: larger; /* relative size로 표현*/
}

브라우저 글자 크기 옵션이 보통인 상태에서 다음과 같이 글자 크기가 정해졌습니다.

detail1 : 16px

detail2 : 16x0.8 = 12.8px

detail3: 16px

detail4 : 16*1.2 = 19.2px

 

---

font-style

기울어진 italic 체를 설정할 수 있는 property (default : normal)

이외 oblique라는 옵션도 있는데 뒤에 -90도~90도 각도를 적으면 기울어진다는데 각도를 적으면 적용이 안됩니다?!

---

font-variant

폰트에 변화를 주는 property

small-caps : 영어 소문자를 모두 대문자로 바꿔주고, 대문자는 글자 크기를 약간 크게 표현

이외에도 0에 슬래시를 획치거나 하는 옵션이 있는데 적용은 잘 안됩닙다.

---

font-weight

글씨체의 굵기를 표현하는 property, 하지만 외부에서 가지고 오는 폰트의 경우 특정 굵기를 가지고 오지 않으면 적용되지 않습니다.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap');
* {
    box-sizing: border-box;
}
.detail #detail2{
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 80%; /* percentage size로 표현*/
    font-weight: 400;

}

다운로드 글꼴은 Noto Sans KR weight100인데, I'm Fancy에 weight 400을 적용하면 적용되지 않습니다.

 

keyword로 표현하기

normal, bold

 

숫자료 표현하기

100~1000까지 표현 가능

400=normal, 700=bold

 

상대값으로 표현하기

lighter, bolder

 

---

line height

text 입력시 줄이 바뀔 때 줄 간 간격을 설정

 

normal : default 값

숫자값 : 0이상 값이 적용, 위에 normal값은 1.2

length 값 : em, rem, px 등..

percentage : 글꼴 크기에 상대적인 값

---

font property에 한줄로 쓰기

무조건 포함되어야 하는 property : font-size, font-family

옵션 : font-style, font-variant, font-weight, font-stretch, line-height

 

font-style, font-variant, font-weight는 font-size앞에 있어야 하며

line-height는 font-size 뒤에 슬래시를 붙여 표현해야 하며

font-family는 마지막에 와야 합니다.

 

이 모든걸 적용해보면 다음과 같이 나오게 됩니다.

.detail #detail2{
    font : italic small-caps 400 2rem/1.5 'Roboto', sans-serif;
}

I'm Fancy에만 적용

---

Reference

font - CSS: Cascading Style Sheets | MDN

line-height - CSS: Cascading Style Sheets | MDN