2018. 1. 23. 11:21ㆍ웹 표준 퍼블리싱 바이블
1. 서체 지정하는 방법
1-1. font-family 속성 알아보기
서체를 지정하는 방법으로 "font-family"속성을 활용합니다. 서체지정 시에는 쉼표(,)를 통해 여러 개의 후보 서체를 제시할 수 있습니다. 값의 마지막에는 서체의 타입을 지정하는데, "sans-serif(고딕체), serif(명조체) 등이 있습니다.
* 일반적인 서처 지정의 방법은 다음과 같습니다.
다음의 예제에서는 <body>에 "돋움체"를 지정했습니다. 서체 값이 두 단어 이상이거나 영어가 아닌 경우에는 따옴표를 꼬해줘야 하며, 한글로 값을 작성했다면 "dotum"과 같이 폰트의 영어명을 추가합니다. "helvetica"체는 윈도우가 아닌 맥 OS 기반의 컴퓨터일 경우를 대비했으며, 마지막으로 고딕체 계열이므로 "sans-serif"를 지정했습니다.
<style type="text/css"> body{font-family: "돋음", dotum, helvetica, sans-serif} </style>
|
1-2. @font-face 알아보기
돋음체 이외의 서체를 지정하면 사용자에게는 제대로 표현되지 않을 수 있습니다. CSS3에서는 이런 문제를 해결하기 위해 원하는 서페를 같이 올려 두고 연결하는 방법으로 "@font-face"를 지원합니다. 주의사항은 이 방법은 서체가 로딩되는 방법이므로 용량이 큰 서체는 화면에 늦게 적용될 수 있으며(한글 서체는 특히 용량이 큰 편), 모바일에서는 데이터가 곧 요금으로 연결된다는 점입니다.
※ 서체에는 저작권이 있습니다. 저작권에서 자유로운 서체는 많지 않으므로 주의해야 합니다. 한글 서체 중에는 네이버에서 지원하는 "나눔"서체가 있습니다.
작성 방법은 다음과 같이 원하는 폰트 이름을 지정하고, 그 폰트의 경로를 작성합니다.
<style type="text/css"> @font-face{font-family: 폰트명; src: url(폰트경로);} </style>
|
이 방법에는 아쉬운 부분이 있습니다. 그것은 각 브라우저마다 지원하는 폰트의 확장자가 다르다는 점입니다. 익스플로러 6~8은 ".eot"를 지원하고, 익스플로러 9는 ".woff"를 크롬은, 파이어폭스, 사파리, 오페라 등은 "ttf", "ott", "woff"등을 지원합니다. 측히 익스플로러는 버전에 따라 지원하는 확장자가 다른 점이 문제점입니다. 각각의 확장자를 준비했다면 다음과 같은 방법으로 적용할 수 있습니다.
1-3. 구글 웹 폰트 적용하는 방법
앞에서 서체를 서버에 올려두고 연결하는 방법을 알아봤는데요. 서체는 저작권 문제에서 자유롭지 않기 때문에 마음에 드는 서체를 모두 이렇게 적용할 수는 없습니다. 비용을 지불하고 웹 폰트를 사용하겠사면, 모빌리스 웹 폰트 서비스를 활용할 수도 있으며, 여기서는 무료로 사용할 수 잇는 구글 웹 폰트 서비스를 알아보겠습니다.
-1) 구글 웹 폰트 서비스(https://fonts.google.com/)에서 선택하여 사용할 수 있습니다.
※ 이 서비스는 익스플로러 버전 9 이상의 브라우저에서만 사용할 수 있습니다.
-2) "More Script" 메뉴()에서 한글 서체도 지원합니다.
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
| 4-4. 서체(font)와 글(text) 스타일 - 3 (0) | 2018.01.25 |
|---|---|
| 4-4. 서체(font)와 글(text) 스타일 - 2 (0) | 2018.01.24 |
| 4-3. 선택자의 우선순위 (0) | 2018.01.19 |
| 4-2. 다양한 선택자 알아보기 - 4 (0) | 2018.01.18 |
| 4-2. 다양한 선택자 알아보기 - 3 (0) | 2018.01.17 |