| font-family | 기능 | 글꼴을 지정하는 속성 |
| 기본형 | font-family:<글꼴이름>[,<글꼴이름>,<글꼴이름>] | |
| 예제 |
body { font-family:"맑은 고딕","돋움","굴림"} "맑은 고딕" 글꼴이 설치되어 있지 않은 경우 "돋움"글꼴을 사용, 그것도 설치되어 있지 않으면 "굴림"을, 그것도 아니면 시스템에 설치되어 있는 기본글꼴을 사용하게 된다 |
|
| 설명 |
해당 속성은 상속된다. 만일 body 태그에서 사용하면 해당 폰트가 문서 전체에 적용되며 특정 영역에 다른 폰트를 사용하려면 해당 요소에서 폰트를 따로 지정하면 된다. |
|
| @font-face | 기능 | 웹폰트란 웹문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식. 결국 로컬pc에 해당 글꼴이 없더라도 제작자가 원했던 글꼴로 화면에 보여지게 된다. |
| 기본형 |
@font-face{ font-family:글꼴이름; src: url("글꼴파일경로") format("파일유형") } |
|
| 예제 |
//폰트정의 @font-face{ font-family:"testfont"; src: local("trana"), url("trana.eot"), url("trana.woff") format("woff") url("trana.ttf") format("truetype"); } //위에서 정의한 글꼴을 사용하여 클래스 정의 .my-font{ font-family:"testfont","굴림"; }
<body class="my-font"> <p> test </p> </body>
"trana.ttf" 영문폰트 파일을 trana.eot 와 trana.woff 파일로 변환한 후 "testfont"라는 자신만의 글꼴 이름을 정의한다. ttf 파일은 용량이 크기 때문에 대부분의 브라우저에서 지원하는 woff글꼴 파일을 먼저 선언하고 ttf파일은 그 후 선언한다. 그리고 ie8 이하 버전에서는 eot 파일만 지원하므로 woff보다 먼저 선언한다 그리고 eot는 포멧은 따로 선언하지 않는다 |
|
| 설명 |
웹폰트 제공 사이트에 없는 특별한 폰트를 사용해야 하는 경우 해당 글꼴 파일 ttf 형식을 woff 와 eot 형식으로 변환하여 파일사이즈를 줄인다. woff는 http://people.mozilla.com/~jkew/woff/ 이용하여 변환, eot는 http://eotfast.com 이용하여 변환
주의사항: 글꼴 저작권 체크 (ttf 구입했더라도 웹폰트 사용여부는 확인해봐야 함) |
|
| font-size | 기능 |
글자 크기를 조절하는 속성 |
| 기본형 |
font-size:<절대크기>|<상대크기>|<크기>|<백분율> 절대크기: 브라우저에서 지정한 글자 크기 ( xx-small | x-small | small | medium | large | x-large | xx-large ) 상대크기 : 부모요소의 글자크기를 기준으로 더 크게 또는 더 작게 표시 (larger | smaller) 크기 : 브라우저와 상관없이 글자 크기 직접 지정(단위함께 표기 em, px, pt 등) em : 해당 글꼴의 대문자M너비 기준으로 크기 조절 ex : 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절 px : 픽셀, 모니터에 따라 상대적 크기 pt : 포인트, 일반 문서에서 많이 사용하는 단위 백분율 : 부모요소 글자 크기를 기준으로 해당하는 %를 계산해 표시(%와 함께 표기) |
|
| 예제 |
<style> h1{ font-size:3em;} p{font-size:1em;} </style> <body> <h1> 제목 </h1> <p> 단락 </p> </body>
body에서 폰트크기를 지정하지 않은 상태이므로 글자의 기본크기는 16px이 적용된다 이 상태에서 1em은 16px가 되며 3em은 48px가 된다 |
|
| 설명 |
모바일까지 함께 고려해서 제작을 해야 한다면 px보다 em을 사용할 것 |
'프로그래밍 > html+css' 카테고리의 다른 글
| css 포지셔닝과 주요속성들 (0) | 2019.07.28 |
|---|---|
| css와 박스모델 (0) | 2019.07.28 |
| css와 자바스크립트를 이용한 우측툴바 컨트롤 제작 (0) | 2019.07.04 |