티스토리 뷰
@font-face속성-웹 폰트 사용하기
-사용자 시스템에 없는 글꼴을 보여주려면 모바일과 각 웹 브라우저에 알맞은 폰트 확장자를 설정해줘야한다
PC
- *.ttf : 컴퓨터에서 사용하는 글꼴은 트루타입 유형이다.
모바일
*.eot : 인터넷 익스플로어8 이하 버전 (Embedded Open Type)형태
*.woff : 인터넷 익스플로어9이상 및 파이어폭스와 크롬 (Web Open Font Format) 트루타입 글꼴을 웹 폰트로 사용하려면 eot파일과 woff파일로 변환해야한다
%트루타입 글꼴이란 화면에 나타나는 글꼴과 인쇄했을 때의 글꼴이 일치하는 유형을 말함.
% ttf->woff 변환사이트 : people.moziila.com/~jkew/woff/ 이용 ttf->eot변환 사이트 : eotfast.com 이용.
ex) @font-face {
font-family:글꼴이름;
src:url(글꼴 파일 경로) format(파일 유형); }
웹 폰트 파일 유형과 해당 확장자 (format 속성에 사용할수 있는 값들)
%인터넷 익스플로어 8 이하 버전에서는 eot글꼴만 지원하므로 eot 파일을 woff파일보다 먼저 선언한다. eot파일을 선언할 때는 format 을 따로 지정하지 않습니다. ttf 파일은 다른 유형의 파일보다 용량이 크기 때문에 대부분의 모던 브라우저에서 지원하는 woff파일보다 먼저 선언하고 ttf파일은 그 뒤에 선언합니다. 이렇게하면 woff형식을 지원하는 브라우저는 woff파일을 다운로드하고 그 뒤에 선언된 ttf파일은 다운로드 하지 않습니다.
font-size속성 - 글자 크기 조절하기
-픽셀이나 포인트를 비롯해 여러 단위로 크기를 지정할 수 있고 백분율 크기를 사용할 수도 있습니다.
ex)font-size:속성 값;
->사용할 수 있는 값으로 '상대 크기'와 '크기 값'과 '백분율'이며 기본 갑값은 상대 크기인 'medium'입니다. 속성은 상속됩니다.
(1)상대크기
-특별히 값을 지정하지 않을 경우 기본 크기대로 표시된다. 상대 크기 값을 사용할 경우 사용할 수 있는 키워드를 크기 순서대로 나열하면 다음과 같다.
ex)xx-small < x-small < samll < medium(기본값) < large < x-large < xx-large 1.2배식 커진다.
ex) <p>태그를 사용한 텍스트 단락의 글자크기를 미디엄, h3 태그는 라지로 지정한 예이다.
p{font-size : medium ;}
h3 {font-size:large; }
->부모 요소의 크기를 기준으로 해서 텍스트의 글자 크기를 지정할 수도 있다. 부모 요소의 크기가 medium일때 font-size:larger라고 하면 현재 요소의 글꼴 크기는 large가 된다. ( 즉, 한단계 업)
다음 예는 문서 전체크기를 미디움, <p>태그를 사용한 텍스트는 부모요소 즉 <body>태그보다 한 단계 크게 지정한 것입니다.
ex) body {font-size:medium;}
p {font-size:larger ;}
(2)크기값
-음수 값은 사용할 수 없다. 크기 값 단위로만 사용 가능
em-해당 글꼴의 대문자 M 의 너비를 기준으로 한다.
ex -X-height 해달 글꼴의 소문자 x 의 높이를 기준으로 한다
px - 픽셀. 모니터에 따라 상대적인 크기가 된다
pt - 포포인트. 보통 문서에서 많이 사용하는 단위이다.
크기비교로는 378 page참고. 퍼센트100% 기준으로는 pt=12pt, px=16px em= 1em 이다.
ex) body { font-size : 12 px ; }
h1 { font-size : 2em;}
%웹 문서에서는 글자 크기를 지정할 때 px나 em 단위를 주로 사용한다. px 보다는 em단위를 사용하는게 좋음 이유는 고정된 크기가 아니라 글꼴이나 표시하는 화면에 따라 적절하게 글꼴 크기가 표시되기 때문이다.
(3)백분율
-부모 요소의 글꼴 크기를 기준을으로 계산된다. 단, 백분율로 계산하기 위해서는 부모 요소의 글꼴 크기가 15px처럼 크기 값으로 표현되어 있어야 한다.
ex) body { font -size : 12px ; }
.smallTxt {font - size : 80 % }
->전체크기를 12px로 지정후, 클래스이름을 가진 요소의 글자 크기를 부모요소크기의 80%로 지정.
font-style 속성 - 글자 이탤릭체로 표시하기
ex) font-style : 속성 값;
속성 값
(1) normal : 일반적인 형태
(2) italic : 이탤릭체 (주로사용)
(3) oblique : 이탤릭체로 표시
ex)h2,h3{font-style:itallic ; } ->제목의 텍스트를 이탤릭체로,
h2#txt1 { font-style:normal ;} -><h2>태그중 txt1 id부분은 기본체로 표시.
font-variant속성 - 작은 대문자로 표시하기
-영문 소문자를 작은 대문자로 표시한다. 작은 대문자는 워래 대문자와 비슷하게 보이지만, 크기가 작고 약간 다른 비율을 가지고 있다.
ex)font-variant : 속성 값;
속성 값
(1) normal : 일반형태
(2) small-caps : 작은 대문자로 표시
font-weight 속성 - 글자 굴기 지정하기
-ex) font-weight : 속성 값 ;
속성 값
(1) noraml - 일반적 형태
(2) bold - 진하게 표시
(3) lighter - 원래 굵기보다 연하게
(4) bolder - 원래 굴기보다 진하게
(5)100~900사이의 수치 - 400은 보통 700은 진하게 기준으로 숫자를 지정
ex) p { font-weight:normal;}
h1 { font-weight:700;}
strong {font-weight:bolder;} ->기존 <strong>태그보다 더 진하게 표시
font 속성- 글꼴 속성을 한꺼번에 묶어서 표현하기
-이 속성은 앞에 내용들을 전부 한꺼번에 묶어서 약식으로 표한하는 것이다. 이때, size와 height는 12pt/14px처럼 대시(/)로 연결해 함께 표현한다.
%line-height는 줄 간격을 조절하는 속성이다 font속성은 아니지만 글자 크기와 줄간격이 밀접한 관련이 있다. font-size/line-height처럼 마치 하나의 속서처럼 사용하기도 한다.
ex) p { font : 12pt/14pt 굴림 }
p {font : medium/110% "굴림 돋움" bold} - > <p>태그 크기 medium, 줄간격 110% 글꼴 굴림돋움 표시
'HTML&CSS > HTML5' 카테고리의 다른 글
| <HTML5+CSS3> 텍스트 간격 조절 (0) | 2018.10.16 |
|---|---|
| <HTML5+CSS3>텍스트 스타일 (0) | 2018.10.16 |
| <HTML5+CSS3>가상클래스 (0) | 2018.10.16 |
| <HTML5+CSS3> 위치를 기준으로 하는 가상 클래스 선택자 (0) | 2018.10.13 |
| <HTML5+CSS3>가상 클래스 (0) | 2018.10.13 |