font-weight 편집

Table of Contents (보이기↓)

edit

개요

이 속성은 요소의 글꼴 두께를 두껍거나 얇게 지정한다. 일반적으로 글자를 강조하기 위해 사용한다.

대부분의 폰트는 normal과 bold 2가지의 두께만 갖기 때문에, 100~500의 수치는 normal로 출력되고, 600~900은 bold로 출력된다.

대부분의 웹 브라우저는 HTML 요소 중에서 h1~6, strong, b 의 font-weight를 두껍게(bold) 출력하고 있다.

edit

정의

font-weight설명
값normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
기본값normal
적용대상모든 요소
상속됨
백분율사용 불가
미디어visual?

edit

값

값설명
100 ~ 900100~900까지 100의 배수를 지정한다. '100'은 가장 얇고, '900'은 가장 두껍다.
lighter더욱 얇게 지정한다. '100'과 같으나 글꼴에 의존하므로, 보통 '400'으로 표현된다.
normal보통 두께를 지정한다. '400'과 같음.
bold두껍게 지정한다. '700'과 같음.
bolder더욱 두껍게 지정한다. '900'과 같으나 글꼴에 의존하므로, 보통 '700'으로 표현된다.
inherit부모 요소의 값을 상속하도록 지정한다.

edit

예제

<style>
	/*span {font-weight: bold;;}*/
</style>
<body>
	<p>본문의 <span style="font-weight: 800">일부 단어</span>를 두껍게 지정한다.</p>
</body>

<style>
	span {font-weight: bold;;}
</style>
<body>
	<p>특정 글자를 강조하기 위해서 글꼴을 두껍게 표현하기 보단, 강조를 위한 마크업(<code>strong</code>)를 사용하는 게 더 좋다. 전맹의 시각 장애인은 <span>시각적인 표현</span>을 인식할 수 없기 때문에, <strong>의미있는 마크업</strong>을 사용하는 게 좋다.</p>
</body>
edit

브라우저 호환성

Wiki Trail: < font-family | 문서 목록 | font-size >

blog comments powered by Disqus

 
Be Friend~! Be Friend~!