[CSS 속성][font] font-family
[CSS 속성][font-family]
- CSS를 이용하여 원하는 글꼴을 지정할때 font-family를 사용합니다.
-심화설명
· font-family 속성 / 사용법 : font-family:"Dotum"
font의 글꼴들을 모아놓은 속성(폰트 가족)으로 글꼴을 지정하면 해당 글꼴을 호출해서 속성값이 들어간 선택자의 글꼴이 변경됩니다. 다만 호출한 글꼴을 지원하지 않거나 글꼴이 없을땐 기본값(default)으로 표시가 됩니다. 그리하여 여러개를 연속으로 호출을 하여 첫번째 글꼴을 불러오지 못할때 두번째, 세번째, 네번째 이런식으로 지정해주는게 좋으며 아무것도 없을때를 대비하여 마지막에 genetic family를 지정해주는것이 좋습니다. 하나 이상의 글꼴을 열거할 시 쉼표( , )를 이용하면 되고 폰트 네임에 공백이 들어갈시 싱글 커티션(' ') 처리나 더블 커티션(" ")처리를 해주시면 됩니다.
family-name : 글꼴 이름 : Dotum, 궁서, 굴림, verdana
generic family : 모양이 비슷한 글꼴들의 그룹 : serif(바탕체), sans-serif(고딕체), cursive(필기체) 등.
표기법
body{
font-family:"Times New Roman", Dotum, "돋움", serif, sans-serif;
}
브라우저에서 한글이름과 영문이름을 인식하지 못하는 경우가 종종 일어나기 때문에 반드시 영문이름과 한글이름을 같이 작성해 주는것이 좋습니다. 또한, 한글폰트 따로 영문폰트 따로 나오길 원한다면 영문폰트명을 앞에 적고 뒤에 한글폰트를 적어주면 됩니다.
폰트명에 공백이 들어가 있지 않다면 따로 커티션이 들어가지 않아도 상관이 없으며, 폰트 이름에 공백이 있다면 싱글커티션(' ')이나 더블커티션(" ")처리를 해주셔야 합니다.
표기법
body{
font-family:"맑은 고딕", verdana, sans-serif;
}
위의 표기법을 봤을 때, 맑은 고딕을 우선적으로 적용시키는데 만약 맑은 고딕이 브라우저에서 지원하지 않을때 verdana를 사용하고 verdana도 없을 시 sans-serif를 사용한다는 뜻입니다.
-Serif : 바탕체 계열 Snas-Serif : 고딕체 계열 Monospace : 가로 폭이 동일한 글꼴 cursive: 필기체 계열, fantasy: 장식체 계열
- Serif의 특징: 문자의 끝부분에 날카롭게 장식되어있는 짧은 선이 있습니다.
- Sans-serif의 특징: 문자의 끝부분에 장식이 없는 선입니다.
- monospace의 특징: 글자의 폭이 같은 글꼴을 말합니다. 그와 반대로 non-monospace를 사용할경우는 글자의 폭들이 각각 서로 다릅니다.
표기법
body{
font-famaily: font-name / generic-name[font-name, generic-name];
}
마지막에 genetic family라고 추가해주면 브라우저에서 해당하는 폰트를 못찾을 시 가장 비슷한 글꼴체로 대체가 되어 표시해주기도 합니다. 권장하진 않지만 만약 inline style=" " 에 font-family를 적용하게 된다면, " "큰따운표 안에 ' ' 홀따운표를 써서 띄어쓰기가 되어있는 글꼴을 입력해주면 됩니다.
generic-name이 대체 되는 font-name 의 연관성은 다음과 같습니다.
font-name | generic-name |
Courier | serif |
Courier New | |
Georgia | |
Times | |
Times New Roman | |
Arial | sans-serif |
Arial Black | |
Tahoma | |
Trebuchet MS | |
Verdana | |
Courier | monospace |
Courier New | |
Lucida Console | |
Monaco |
안탑깝게도 한글 폰트의 경우 영문폰트보다 다양하지 않습니다. 한글 폰트 중에서도 가변폭 글꼴과 고정폭 글꼴이 존재하는데, 고정폭 글꼴은 글자의 사이에 간격을 조절할 수 없으므로, 가변폭 글꼴 사용을 권장합니다.
가변폭 글꼴 | 고정폭 글꼴 |
굴림(Gulim) | 굴림체(GulimChe) |
돋움(Dotum) | 돋움체(DotumChe) |
바탕(Batang) | 바탕체(BatangChe) |
궁서(Gungsuh) | 궁서체(GungsuhChe) |
또한, 기본 브라우저에서 사용하는 폰트가 맘에 들지 않거나, 원하는 디자인을 지원하지 않을 시 따로 원하는 글꼴을 링크(link)하거나 추가(import)해서 사용할 수 있습니다.
-웹폰트 (Web fonts)
웹폰트는 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 업로드된 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다. 만약에, 웹폰트를 사용하지 않았을 경우, 기본 브라우저에서 제공하는 고딕 폰트가 삭제되어 있는 PC거나 설치가 안되있으면 기본 폰트인 돋음 폰트가 노출이 될것이고, 고딕 폰트로 출력되지 않아 따로 다운로드를 해주어야 할것입니다.
하지만, 웹폰트를 사용할 경우 고딕 폰트 설치 유무와 상관 없이 고딕 폰트가 표시됩니다.
웹폰트는 아직까지는 텍스트가 깔금하게 나오지 않는 경우가 있어 텍스트를 이미지로 만드는 경우가 있습니다. 점점 퀄리티가 높아짐에 따라 디자이너들이 텍스를 꾸미기 위해 이미지로 텍스트를 만드는 일이 크게 줄긴 했으나, 웹사이트에서 텍스트를 읽어 들이기 위해 폰트파일을 다운로드 해야하고 그 사이동안은 텍스트가 보이지 않습니다. 만약 폰트 파일의 용량이 크고 서버간의 통신이 좋지 않다면 웹사이트를 사용자가 보는데 있어 많은 시간이 걸릴 수 있다는 이야기가 나오고 있습니다.
-웹폰트 사용방식
1. @import 를 이용한 웹 서버 링크 방식.
<head></head> 태그 안의 <style>태그 속에 @import url();을 해주고 바로 사용하는 방법이 있습니다.
예시:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font-style</title>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); // 웹 폰트의 주소를 넣어주시면 됩니다.
body{
font-family: "Nanum Gothic";
}
</style>
</head>
<body>
안녕하세요, 좋은 아침입니다.
</body>
</html>
2. @font-face 를 이용한 자신의 서버에서 폰트 호출 방식.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font-style</title>
<style>
@font-face{font-family:'Nanum Gothic'; src:url(/css/font/NanumGothic.woff)};
@font-face{font-family:'Nanum Gothic'; src:url(/css/font//NanumGothic.eot)};
body{
font-family: "Nanum Gothic";
}
</style>
</head>
<body>
안녕하세요. 벤베스 박사입니다.
</body>
</html>
위의 예제에서 보면 @font-face 선택자의 프로퍼티와 값으로 url과 주소경로가 설정되어 있는 부분을 확인할 수 있습니다. 1번의 방식에서는 @import 를 이용하여 구글 웹 사이트에서 다운로드하여 보여주던 폰트를 @font-face를 이용하여 자신의 웹서버에 있는 파일 경로에서 호출해주는 것입니다. 하지만 보시는 바와같이 woff파일과 eot파일 2개를 불러오고 있습니다. 2개 중 하나의 파일을 필요하지 않는 데이터입니다. 이는 브라우저마다 지원하는 폰트의 파일명이 다르기 때문에 2가지를 동시에 호출하여 사용되는 방식입니다.
3. @font-face의 개선방식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font-style</title>
<style>
@font-face{
font-family:'Nanum Gothic';
src:url(/css/font/NanumGothic.woff);
src:url() format(),
url() format(''),
url() format(),
url() format(),
src:local()
};
body{
font-family: "Nanum Gothic";
}
</style>
</head>
<body>
안녕하세요. 벤베스 박사입니다.
</body>
</html>
※특징 font-family의 설정을 제대로 했어도 브라우저의 버전의 종류에 따라 다르게 표현될 수 있습니다. 애니메이션도 적용이 안됩니다..