4. font-size
- absolute size : 브라우저마다 같은 x-small, large여도 크기가 다름 (그래서 잘 안씀)
- relative size : 부모 요소의 font-size 크기에 대해 상대적
- viewport units : vw, vh 단위를 써서 유동적인 font-size를 지정
기본값 : medium (16px = 1em)
<style>
.parent {
font-size: 20px;
}
.child {
font-size: 1em;
}
</style>5. font-weight
- 글꼴의
굵기를 지정
기본값 : normal(400)
- 실무에서는
normal(400) 과bold(700)를 많이 사용하고,
부모 요소에 영향이 있는bolder와lighter는 사용을 될 수 있으면 지양하는 편이다.
<style>
body {
padding: 0 20px;
font-family: 'Open Sans';
}
.w600 { font-weight: 600; }
</style>
</head>
<body>
<p class="w600">This is 600 weight</p>
</body>
6. font-style
- em
- oblique
- italic
기본 값 : normal
- oblique는
텍스트의 기울기에 대한 각도를 추가로 지정할 수 있다. (기본은 14도, 유효한 값: -90 ~ 90도)
font-weight oblique <각도>;- 그러나 아직 초안 단계로 CSS Fonts Module Level 4를 지원하는 브라우저에서만 사용 가능하다.
7. font-variant
- 대소문자 변환 (소 👉🏻 대)
- 실제 대문자 사이즈 보다 더 작은 사이즈로 나타나며
당연히 한글은 지원 안됨
기본 값 : normal
<style>
p {
font-variant: small-caps;
}
</style>
I can be your Genie🧞♀️ How ‘bout Aladdin? 🧞♂️