font-style

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

font-style 은 폰트의 기울어짐을 지정합니다.

예제 1
font-style 개요
보기
CSS 공작소
font-style : normal
CSS 공작소
font-style : italic
CSS 공작소
font-style : oblique
소스
<style type="text/css">
    .css_test {
        font-size : 30pt !important;
        height : 70px;
        line-height : 70px !important;
    }
</style>

<div class="css_test" style="font-style:normal;">CSS 공작소</div>
font-style : normal
<div class="css_test" style="font-style:italic;">CSS 공작소</div>
font-style : italic
<div class="css_test" style="font-style:oblique;">CSS 공작소</div>
font-style : oblique
사용된 CSS (클릭시 보기) : font-sizefont-styleheightline-height
설명
- oblique 가 무엇인지 궁금하신가요? 아래 예제를 봐주세요 ^^
예제 2
실습 - font-style 바꿔보기
보기
CSS 공작소 123 ABC 가나다 !@#
CSS 공작소 123 ABC 가나다 !@#
font-family : 굴림
CSS 공작소 123 ABC 가나다 !@#
font-family : impact
font-style :
font-style : normal
설명
- italic : 보통 기울어진 폰트라고 알고 있습니다만, 실제로는 기울어 흘려 쓴 필기체을 의미합니다. (어쨌든 기울어진것)
- oblique [ə|bli:k] : 이것이 기울어진 폰트를 의미하죠.

하지만 브라우저에서는 두개가 같아 보입니다. 폰트 자체에서 지원되어야 이 두개를 구분할 수 있겠네요.
 
+ 관련 CSS +
☞ 목록으로 가기
CSS 공작소  /   jQuery 공작소