font-weight

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

font-weight 는 폰트의 두께를 지정합니다.

예제 1
font-weight 는 예제로 바로 보겠습니다.
보기
I am a boy. You are a girl.
This is a dog. That is a cat.
이 예제를 정확히 보기위해 웹폰트를 사용하였습니다.
font-weight :
font-weight : normal
설명

- 예제에서 사용한 키워드숫자로 값을 지정할 수 있습니다.
- 숫자값은 100 ~ 900 까지 입니다. 100 단위로 사용합니다.
- 예제에서 bold(굵게) 와 bolder(더굵게) 는 같습니다. (폰트에서 지원하지 않습니다)
 
- 숫자단위 다양한 크기는 폰트에서 지원해야 사용할 수 있습니다.
- 이것을 지원 하는 폰트를 구글웹폰트 에서 찾았습니다.
- 하지만 대부분의 폰트들은 bold 정도만 지원할 것입니다. 실제 웹에서는 bold 정도만 사용할 수 있습니다.
- 웹폰트는 font-family 를 참고해 주세요 ^^

예제에 사용한 구글 웹폰트는 : http://www.google.com/fonts/
위 페이지에 접속 후 Raleway 로 검색하시면 볼 수 있습니다.

연구 1
참고 : 위 예제에서 사용한 웹폰트 소스
보기
I am a boy. You are a girl.
This is a dog. That is a cat.
소스
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>

<style type="text/css">
    .css_test {
        font-size : 28pt !important;
        font-family : 'Raleway', sans-serif;
    }
</style>

<div class="css_test">I am a boy. You are a girl.<br>This is a dog. That is a cat.</div>
사용된 CSS (클릭시 보기) : font-familyfont-size
설명
- 웹폰트 사용방법은 간단하고 쉽습니다. (하지만 한글 웹폰트는 ... ㅠ,ㅠ)
+ 관련 CSS +