1. font-family 속성 - 글꼴 지정


font-family:<글꼴이름>[,<글꼴 이름>, <글꼴 이름>]


- 지정한 글꼴이 없을 경우를 대비해 두 번째, 세 번째 글꼴까지 지정해야 한다.

- 두 개 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 구분한다.

- font-family 속성은 상속되기 때문에 <body> 태그 스타일에 한번 정의하면 문서 전체에 적용된다.

- 각 요소마다 다른 글꼴을 사용하고 싶으면 태그 스타일이나 클래스 스타일을 사용한다.



2. @font-face 속성 -  웹 폰트 사용


웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식입니다.


<style>
      @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);  /* 구글 웹 폰트 */
      .ng-font {
        font-family:'Nanum Gothic', 돋움;  /* 웹 폰트 지정 */
      }
      p {
        font-size:30px; 
      }
    </style>
</head>
<body>
  <p>브라우저 기본 글꼴 사용</p>
  <p class="ng-font">나눔고딕 웹 폰트 사용</p>


글꼴 파일을 업로드해 웹 폰트가 준비되었다면 @font-face 속성을 사용해 웹 폰트를 정의할 수 있습니다.


<style>
      @font-face {
        font-family: 'trana'; /* 글꼴 */
        src: local('trana'),
            url('trana.eot'),
            url('trana.woff') format('woff'),
            url('trana.ttf') format('truetype');
       }
      .w-font {
        font-family:'trana', sans-serif; /* 웹 폰트 지정 */
      }
      p {
        font-size:30px;
      }
    </style>
</head>
<body>
  <p>Using Default Fonts</p>
  <p class="w-font">Using Trana Fonts</p>



3. font-size 속성 - 글자크기 조절


font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>


font-size 속성에서 사용하는 속성 값은 다음과 같습니다.


 속성 값

설명 

<절대 크기> 

브라우저에서 지정한 글자 크기이다. 사용할 수 있는 값은 xx-small | x-small | small | medium | large | x-large | xx-large이다. 

<상대 크기>

부모 요소의 글자 크기를 기준으로 크기를 조절한다. 사용할 수 있는 값은 larger | smaller이다. 

<크기>

브라우저와 상관없이 글자 크기를 지정한다. 

<백분율>

부모 요소의 글자 크기를 기준으로 해당하는 %를 계산해 표시한다. 


font-size에서 사용할 수 있는 단위는 다음과 같습니다.


단위 

설명 

em 

해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절한다. 

ex 

x-heihgt. 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절한다. 

px 

픽셀. 모니터에 따라 상대적 크기가 된다. 

pt 

포인트. 일반 문서에서 많이 사용하는 단위다.



4. font-weight 속성 - 글자 굵기 지정


font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900



5. font-variant 속성 - 작은 대문자로 표시


font-variant: nomal | small-caps



6. font-style 속성 - 글자 스타일 지정


font-style: normal | italic | oblique



7. font 속성 - 글꼴 속성을 한꺼번에 묶어 표현


font: <font-style><font-variant><font-weight><font-size/line-height><font-family> | caption | icon | menu | message-box | small-caption | status-bar


특정 키워드를 입력해 그것에 어울리는 글꼴 스타일로 표시할 수도 있습니다.





<style>
        p.txt {
            font: italic 12px/24px 돋움;  /* 글꼴 스타일, 크기, 줄간격, 글꼴 */
        }
    </style>
</head>
<body>
    <p class="txt">여러 요소가 함께 사용된 웹 문서 안에서 텍스트가 눈에 띄게 하려면 내용에 맞는 글꼴과 글자 크기, 그리고 글자색을 선택하는 것이 중요합니다. </p>
    <p>이럴 때 사용할 수 있는 것이 글꼴 속성입니다. </p>
    <p style="font:caption"> [font:caption] 캡션에 어울리는 글꼴 스타일</p>
    <p style="font:icon"> [font:icon] 아이콘에 어울리는 글꼴 스타일</p>
    <p style="font:menu"> [font:menu] 드롭다운 메뉴에 어울리는 글꼴 스타일</p>
    <p style="font:message-box"> [font:message-box] 대화 상자에 어울리는 글꼴 스타일</p>
    <p style="font:small-caption"> [font:small-caption] 작은 캡션에 어울리는 글꼴 스타일</p>
    <p style="font:status-bar"> [font:status-bar] 상태표시줄에 어울리는 글꼴 스타일</p>




<출처> Do it! HTML5+CSS3 웹 표준의 정석

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

'IT > CSS' 카테고리의 다른 글

[CSS 입문] 문단 스타일  (0) 2017.04.05
[CSS 입문] 텍스트 스타일  (0) 2017.04.04
[CSS 입문] 캐스캐이딩 스타일 시트(CSS)  (0) 2017.03.31
[CSS 입문] 선택자의 종류  (0) 2017.03.30
[CSS 입문] 스타일과 스타일 시트  (0) 2017.03.29

+ Recent posts

티스토리툴바