CSS-글꼴

이 장에서는 HTML 요소에서 사용할 수있는 콘텐츠의 글꼴을 설정하는 방법을 설명합니다. 요소의 다음 글꼴 속성을 설정할 수 있습니다-

그만큼 font-family 속성은 글꼴의면을 변경하는 데 사용됩니다.
그만큼 font-style 속성은 글꼴을 기울임 꼴 또는 기울임 꼴로 만드는 데 사용됩니다.
그만큼 font-variant 속성은 작은 대문자 효과를 만드는 데 사용됩니다.
그만큼 font-weight 속성은 글꼴이 굵게 표시되거나 밝게 표시되는 정도를 늘리거나 줄이는 데 사용됩니다.
그만큼 font-size 속성은 글꼴 크기를 늘리거나 줄이는 데 사용됩니다.
그만큼 font 속성은 다른 여러 글꼴 속성을 지정하는 약어로 사용됩니다.

글꼴 군 설정

다음은 요소의 글꼴 모음을 설정하는 방법을 보여주는 예제입니다. 가능한 값은 모든 글꼴 패밀리 이름이 될 수 있습니다.

<html>
   <head>
   </head>

   <body>
      <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>
   </body>
</html>

이것은 다음 결과를 생성합니다-

글꼴 스타일 설정

다음은 요소의 글꼴 스타일을 설정하는 방법을 보여주는 예제입니다. 가능한 값은 normal, italic 및 oblique 입니다.

<html>
   <head>
   </head>

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

이것은 다음 결과를 생성합니다-

글꼴 변형 설정

다음 예제는 요소의 글꼴 변형을 설정하는 방법을 보여줍니다. 가능한 값은 normal 및 small-caps 입니다.

<html>
   <head>
   </head>

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

이것은 다음 결과를 생성합니다-

글꼴 두께 설정

다음 예제는 요소의 글꼴 두께를 설정하는 방법을 보여줍니다. font-weight 속성은 글꼴의 굵은 정도를 지정하는 기능을 제공합니다. 가능한 값은 normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 입니다.

<html>
   <head>
   </head>

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

이것은 다음 결과를 생성합니다-

글꼴 크기 설정

다음 예제는 요소의 글꼴 크기를 설정하는 방법을 보여줍니다. font-size 속성은 글꼴 크기를 제어하는 데 사용됩니다. 가능한 값은 xx-small, x-small, small, medium, large, x-large, xx-large, small, large, size in pixels 또는 % 일 수 있습니다.

<html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         This font size is 20 pixels
      </p>
      
      <p style = "font-size:small;">
         This font size is small
      </p>
      
      <p style = "font-size:large;">
         This font size is large
      </p>
   </body>
</html>

이것은 다음 결과를 생성합니다-

글꼴 크기 조정 설정

다음 예제는 요소의 글꼴 크기 조정을 설정하는 방법을 보여줍니다. 이 속성을 사용하면 글꼴을 더 쉽게 읽을 수 있도록 x 높이를 조정할 수 있습니다. 가능한 값은 임의의 숫자 일 수 있습니다.

<html>
   <head>
   </head>

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

이것은 다음 결과를 생성합니다-

글꼴 늘이기 설정

다음 예제는 요소의 글꼴 늘이기 설정 방법을 보여줍니다. 이 속성은 사용중인 글꼴의 확장 또는 축소 버전이있는 사용자 컴퓨터에 의존합니다.

가능한 값은 보통, 더 넓게, 더 좁게, 매우 압축, 추가로 압축, 압축, 반 압축, 반 확장, 확장, 추가 확장, 울트라 확장 일 수 있습니다.

<html>
   <head>
   </head>

   <body>
      <p style = "font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer 
         doesn't have a <br>condensed or expanded version of the font being used.
      </p>
   </body>
</html>

이것은 다음 결과를 생성합니다-

속기 속성

font 속성을 사용하여 모든 글꼴 속성을 한 번에 설정할 수 있습니다 . 예를 들면-

<html>
   <head>
   </head>

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

이것은 다음 결과를 생성합니다-