[CSS] Font

Font

글자 모양, 크기, 굵기, 기울임 등의 설정을 위한 속성이다.

속성	설명
font-family	글자 종류 설정
font-size	글자 크기 설정
font-weight	글자 굵기를 설정
font-style	글자 스타일(이텔릭체)을 설정

font-family

font-family 속성은 글자의 종류를 설정한다.

여러 개를 동시에 지정할 수 있으며, 첫 번째 font가 설치되어 있지 않은 경우 다음 지정한 font를 지정한다.
한글 font의 경우 문자열('')로 묶어주어야 한다.
대표 font

선택자 {
    font-family: Arial, Helvetica, sans-serif;
}

font-size

font-size 속성은 글자의 크기를 설정한다.

절대단위(px, %, em)를 사용한다.
100% = 16px = 1em, 75% = 12px = 0.75em = 9pt

<!DOCTYPE html>
<html>
    <head>
        <style>
            .size1 {
                font-size: 150%;
            }
            .size2 {
                font-size: 5em;
            }
            .size3 {
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <p>default font-size : 16px</p>
        <p class="size1">font-size : 150%</p>
        <p class="size2">font-size : 5em</p>
        <p class="size3">font-size : 40px</p>
    </body>
</html>

font1

font-weight / font-style

font-weight 속성은 글자의 굵기를 설정한다.

normal, 100~900, lighter, bold, bolder 를 사용한다.

font-style 속성은 글자의 스타일을 설정한다.

normal, italic, oblique 를 사용한다.

<html>
    <head>
        <style>
            .weight1 {
                font-weight: 800;
            }
            .weight2 {
                font-weight: lighter;
            }
            .weight3 {
                font-weight: bold;
            }
            .style1 {
                font-style: italic;
            }
            .style2 {
                font-style: oblique;
            }
        </style>
    </head>
    <body>
        <p>default font-weight</p>
        <p class="weight1">font-weight : 800</p>
        <p class="weight2">font-size : lighter</p>
        <p class="weight3">font-size : bold</p>
        <p class="style1">font-style : italic</p>
        <p class="style2">font-style : oblique</p>
    </body>
</html>

font2

font

font 속성은 글자 속성들을 한 번에 정의하기 위한 축약 속성이다.

font: font-style font-weight font-size/line-height font-family

이 중 font-size 와 font-family는 필수 값이다.

p {
    font: italic bolder 30px/1.5 sans-serif;
    font: italic 2em monospace;
}

저작자표시

'CSS' 카테고리의 다른 글

[CSS] 타이포그래피 (1)	2022.03.06
[CSS] Text (4)	2022.03.05
[CSS] Background (4)	2022.03.04
[CSS] 상속과 캐스케이딩 (0)	2022.03.03
[CSS] Visibility / Opacity (0)	2022.03.02