폰트 (1)

💻 Programming/CSS

[CSS] 7. Fonts ( 폰트 설정 )

이번 포스팅에서는 CSS를 이용해서 폰트를 설정하는 방법에 대해서 알아보도록 하겠습니다.

  • font-family 는 폰트를 변경하는 속성입니다. ( 돋움체, 굴림체 뭐 이런것들 있죠? ) 

  • font-style 는 폰트를 체를 변경하는 속성입니다. ( italic, oblique ) 

  • font-variant 는 대소문자를 설정하는 속성입니다.

  • font-weight 는 폰트의 굵기를 설정하는 속성입니다. ( bold, light ) 

  • font-size 는 폰트 사이즈를 설정하는 속성입니다.

  • font 는 폰트관련 모든 속성을 한번에 설정할 수 있는 한방 속성입니다.

 

폰트 패밀리 설정하기

설정 가능한 값은 모든 폰트 패밀리 값입니다. 예를들면 aria, serif와 같은 폰트 서체입니다.  

<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the default
serif font depending on which font  you have at your system.
</p>

결과는 아래와 같습니다.

This text is rendered in either georgia, garamond, or the default
serif font depending on which font you have at your system.

 

 

폰트 스타일 설정하기

설정 가능한 값은 normal, italic 그리고 oblique 입니다. 

<p style="font-style:italic;">
This text will be rendered in italic style
</p>

결과는 아래와 같습니다.

This text will be rendered in italic style

 

 

폰트 변종 설정하기

가능한 값은 normal 과 small-caps가 있습니다.

<p style="font-variant:small-caps;">
This text will be rendered as small caps
</p>

결과는 아래와 같습니다.

This text will be renedered as small caps

 

 

폰트 두께 설정하기

폰트의 두께를 설정하는 속성입니다.

가능한 값은 normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 이 있습니다.

<p style="font-weight:bold;">
This font is bold.
</p>
<p style="font-weight:bolder;">
This font is bolder.
</p>
<p style="font-weight:900;">
This font is 900 weight.
</p>

결과는 아래와 같습니다.

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, 그리고 픽셀값 또는 퍼센트 값입니다.

<p style="font-size:20px;">
This font size is 20 pixels
</p>
<p style="font-size:10pt;">
This font size is small
</p>
<p style="font-size:14pt;">
This font size is large
</p>

결과는 아래와 같습니다. 

This font size is 20 pixels

This font size is small

This font size is large

 

 

폰트 사이즈 adjust 설정하기

이번에는 폰트의 사이즈 adjust 설정을 하는 것이네요. 가능한 값은 모든 숫자값입니다.  

<p style="font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>

결과는 아래와 같습니다.

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 가 있습니다. 이 속성은 여러분 컴퓨터에 있는 폰트가 

<p style="font-stretch: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.
</p>

결과는 아래와 같습니다.

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.

 

 

폰트 속성 한번에 설정하기

<p style="font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>

결과는 아래와 같습니다

Applying all the properties on the text at once.

 

 

 

 

이상으로 폰트 관련 속성들에 대해서 알아보았습니다.

 

휴우~~~ 슬슬 CSS가 재미있어 지시나요? 지겨워지시나요?

 

이제 시작인데 말이죠 ㅋㅋㅋ

 

화이팅입니다~~ 

 

 

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_fonts.htm 

 

 

 

 

 

저작자표시 비영리 변경금지

'💻 Programming > CSS' 카테고리의 다른 글

[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

Category

Recent Posts

Recent Comments

관리자 | 글쓰기

티스토리툴바