CSS 폰트, 텍스트

박준형·2025년 1월 23일

[CSS] 기초

목록 보기
4/13

폰트

font-family

font-family: 바로 다음에 오는 글꼴은 사용자의 환경에 설치되어 있어야 한다. 따라서 그 뒤에 generic font를 써서 글꼴이 없는 경우에 이 폰트가 사용되게 한다.

/* A font family name and a generic family name */
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

font-size

/* <absolute-size> 값 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* <relative-size> 값 */
font-size: larger;
font-size: smaller;

/* <length> 값 */
font-size: 12px;
font-size: 0.8em;

/* <percentage> 값 */
font-size: 80%;

font-weight

폰트의 굵기를 나타낼 때 사용. *폰트가 해당하는 굵기를 지원해야 정확히 사용할 수 있다.

font-weight: normal;
font-weight: bold;

/* Relative to the parent */
font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

font-variant

영문 텍스트 한정으로 소문자를 대문자로 바꿔준다.

font-variant: small-caps

텍스트

text-align

텍스트를 정렬할 때 사용한다.

text-align: left;
text-align: right;
text-align: center;
text-align: justify; //양쪽 정렬
text-align: start;
text-align: end;

text-decoration

텍스트를 꾸밀 때 사용한다.

text-decoration: underline;
text-decoration: overline red; //이렇게 뒤에 색상을 넣을 수 도 있다.
text-decoration: none; //이는 주로 a태그에 사용한다.

letter-spacing, line-height, word-spaceing

자간, 행간, 어간

letter-spacing : 2em;
word-spacing : 2em;
line-height : 3em;

여담으로 폰트 사용할 때 살짝 회전시켜주면 폰트가 안티앨리어싱이 된것처럼 부드러워지는 효과가 있다고 한다.

transform : rotate(0.04deg); 

출처
https://developer.mozilla.org/ko/

profile
unleash the beast

0개의 댓글