텍스트 관련 스타일- 글꼴

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

1) 글꼴 지정 - font-family 속성
2) 웹 폰트 사용 - font-face 속성
3) 글자 크기 조절 - font-size
4) 글자 굵기 지정 - font-weight
5) 작은 대문자로 표시 - font-variant
6) 글꼴 속성을 하나로 묶어 표현 - font

<텍스트 관련 스타일>

글꼴 관련 스타일

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

[윈도우의 기본 글꼴]이 아니고 설치되어 있지 않다면 화면에 표시할 수 없다.
font-family속성은 상속된다. 때문에 문서 안의 모든 자식 요소에 계속 같은 글꼴이 사용된다.
적용된 글꼴이 아닌 다른 글꼴을 사용하고 싶다면 태그 스타일이나 클래스 스타일을 이용해 해당 요소에서 다른 글꼴로 적용하면 된다.

선택자 {font-family:"맑은 고딕", 돋움, 굴림}

2) 웹 폰트 사용 - font-face 속성

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

- 구글 웹 폰트 사용하기

구글 폰트 사이트에 접속해 글꼴을 선택한다.
[select this style > embed]메뉴에 들어가면 아래와 같은 작은 화면이 나타난다.
embed메뉴에서 <link>로 시작하는 부분을 복사해 웹 문서의 <style>태그에 붙여 넣는다.
글꼴을 사용하고 싶은 요소에 embed메뉴의 [CSS rules to specify family]에서 알려준 글꼴 이름을 사용하면 된다.

<head>
  <meta charset="utf-8">
  <title>웹 폰트 사용하기</title>
  <style>
    @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);  /* 구글 웹 폰트 */
    .ng-font {
      font-family:'Nanum Gothic', 돋움;  //웹 폰트 지정
    }
  </style>
</head>
<body>
  <p class="ng-font">나눔고딕 웹 폰트 사용</p>
</body>

- 직접 웹 폰트 업로드해 사용하기

웹에서 사용할 수 있는 폰트 : woff(*.woff), 트루타입(.ttf), 오픈타입(*.ttf, *.otf), 임베디드 오픈타입(*.eot), svg 폰트(*.svg, *.svgz)
컴퓨터에서 사용하는 글꼴은 트루타입 유형이지만, 이 유형의 글꼴은 파일의 크기가 너무 커서 웹에서는 eot와 woff파일이 가장 많이 사용된다.
글꼴 파일을 업로드해 웹폰트가 준비되었다면 아래 코드와 같이 @font-face속성을 사용해 폰트를 사용할 수 있다.

<head>
  <meta charset="utf-8">
  <title>웹 폰트 사용하기</title>
  <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; /* 웹 폰트 지정 */
    }
  </style>
</head>
<body>
  <p class="w-font">Using Trana Fonts</p>
</body>

3) 글자 크기 조절 - font-size

선택자 {font-size: 속성 값}

속성 값	설명
<절대 크기>	브라우저에서 지정한 글자 크기이다. xx-small, x-small, small, medium, large, x-large, xx-large
<상대 크기>	부모 요소의 font-size를 기준으로 더 크게 표시하거나 더 작게 표시한다. larger, smaller
<크기>	브라우저와 상관없이 글자 크기를 직접 지정한다. 단위 : px, pt, em, ex
<백분율>	부모 요소의 글자 크기를 기준으로 해당하는 %를 계산해 표시한다.

4) 글자 굵기 지정 - font-weight

선택자 {font-weight: 속성 값}

속성 값	설명
normal	일반적인 형태로 기본 값이다.
bold 또는 lighter 또는 bolder	굵게, 더 가늘게, 더 굵게 나타낸다.
100~900사이의 수치	숫자 값을 조절해 좀 더 세밀히 글꼴 두께를 조절할 수 있다. (400은 normal, 700은 bold에 해당)

5) 작은 대문자로 표시 - font-variant

작은 대문자란 대문자를 소문자 크기에 맞추어 작게 표시한 것이다.

선택자 {font-variant: normal 또는 small-caps}

6) 글꼴 속성을 하나로 묶어 표현 - font

선택자 { font: <font-style><font-weight><font-size/line-height><font-family> 속성값}

속성 값	설명
font-*	font-로 시작하는 글꼴 관련 속성을 한꺼번에 나열한다.
caption	캡션에 어울리는 글꼴 스타일로 표시한다.
icon	아이콘에 어울리는 글꼴 스타일로 표시한다.
menu	드롭다운 메뉴에 어울리는 글꼴 스타일로 표시한다.
message-box	대화상자에 어울리는 글꼴 스타일로 표시한다.
small-caption	작은 캡션에 어울리는 글꼴 스타일로 표시한다.
status-bar	상태 표시줄에 어울리는 글꼴 스타일로 표시한다.

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

'💻WEB FrontEnd > CSS3' 카테고리의 다른 글

텍스트 관련 스타일- 목록 (0)	2020.07.09
텍스트 관련 스타일- 문단 (0)	2020.07.09
텍스트 관련 스타일- 텍스트 (0)	2020.07.09
CSS3와 CSS모듈 (0)	2020.07.08
CSS기초 (0)	2020.07.08

winnih_B

LINKS

CATEGORY

텍스트 관련 스타일- 글꼴

<텍스트 관련 스타일>

글꼴 관련 스타일

'💻WEB FrontEnd > CSS3' 카테고리의 다른 글

티스토리툴바

텍스트 관련 스타일- 글꼴

<텍스트 관련 스타일>

글꼴 관련 스타일

'💻WEB FrontEnd > CSS3' 카테고리의 다른 글

'💻WEB FrontEnd/CSS3' Related Articles

티스토리툴바