이번 포스팅에서는 CSS를 이용해서 폰트를 설정하는 방법에 대해서 알아보도록 하겠습니다.
font-family 는 폰트를 변경하는 속성입니다. ( 돋움체, 굴림체 뭐 이런것들 있죠? )
font-style 는 폰트를 체를 변경하는 속성입니다. ( italic, oblique )
font-variant 는 대소문자를 설정하는 속성입니다.
font-weight 는 폰트의 굵기를 설정하는 속성입니다. ( bold, light )
font-size 는 폰트 사이즈를 설정하는 속성입니다.
font 는 폰트관련 모든 속성을 한번에 설정할 수 있는 한방 속성입니다.
설정 가능한 값은 모든 폰트 패밀리 값입니다. 예를들면 aria, serif와 같은 폰트 서체입니다.
|
결과는 아래와 같습니다.
This text is rendered in either georgia, garamond, or the default |
설정 가능한 값은 normal, italic 그리고 oblique 입니다.
|
결과는 아래와 같습니다.
This text will be rendered in italic style |
가능한 값은 normal 과 small-caps가 있습니다.
|
결과는 아래와 같습니다.
This text will be renedered as small caps |
폰트의 두께를 설정하는 속성입니다.
가능한 값은 normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 이 있습니다.
|
결과는 아래와 같습니다.
This font is bold. This font is bolder. This font is 900 weight. |
가능한 값은 xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, 그리고 픽셀값 또는 퍼센트 값입니다.
|
결과는 아래와 같습니다.
This font size is 20 pixels This font size is small This font size is large |
이번에는 폰트의 사이즈 adjust 설정을 하는 것이네요. 가능한 값은 모든 숫자값입니다.
|
결과는 아래와 같습니다.
This text is using a font-size-adjust value. |
가능한 값은 normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded 가 있습니다. 이 속성은 여러분 컴퓨터에 있는 폰트가
|
결과는 아래와 같습니다.
If this doesn't appear to work, it is likely that your computer doesn't have a condensed or expanded version of the font being used. |
|
결과는 아래와 같습니다
Applying all the properties on the text at once. |
이상으로 폰트 관련 속성들에 대해서 알아보았습니다.
휴우~~~ 슬슬 CSS가 재미있어 지시나요? 지겨워지시나요?
이제 시작인데 말이죠 ㅋㅋㅋ
화이팅입니다~~
Reference : http://www.tutorialspoint.com/css/css_fonts.htm
[CSS] 9. Image ( 이미지 관련 설정 ) (0) | 2016.06.12 |
---|---|
[CSS] 8. Text ( 텍스트 설정 ) (0) | 2016.06.12 |
[CSS] 6. Background ( 배경 설정 ) (0) | 2016.06.12 |
[CSS] 5. Colors ( 색깔 ) (0) | 2016.06.12 |
[CSS] 4. Units ( 단위 ) (0) | 2016.06.12 |