이론/CSS
[CSS] font-family
millfeel1298
2021. 2. 16. 15:56
용도
font-family속성은 가장 높은 우선 순위에서 가장 낮은 우선 순위까지 글꼴 목록을 지정한다. (앞에서 => 뒤로)
기본 설정
사용한 폰트 스타일에 맞게 sans-serif, serif는 반드시 기본적으로 사용해줘야 한다.
font-family: sans-serif; (고딕)
font-family: serif; (명조)
*sans는 없다라는 뜻을 가지고 있다. 즉, 명조의 꼬리 부분이 없기 때문에 고딕이다.
Q. 한글 폰트만 작성하면 안되나요?
font-family: 돋움, sans-serif (X)
비한국어 Windows (최소한 9x/ME)에서는 MS IE조차도 ‘돋음’을 인식하지 못하기 때문이다.
그래서 한글로 된 폰트명은 영문으로 된 폰트명과 함께 사용해 줘야 한다.
font-family: 돋음, Dotum, sans-serif (O)
*앞에 한글로 된 폰트명을 쓰는 이유는 앞쪽이 우선 순위가 높기 때문이다. 한글로 된 폰트명이 적용이 안될시 영문으로 된 폰트명 적용된다.
Q. "" 따옴표는 언제 사용하나요?
1. 이름 사이에 공백이 있을 경우 따옴표를 사용해야 한다.
폰트명이 구두점 문자와 숫자로 시작해서는 안되기 때문에
/* 잘못된 방법 */
font-family: Goudy Bookletter 1911, sans-serif;
font-family: #POUND, sans-serif;
2. 한글로 된 폰트명일 경우 따옴표를 사용해야 한다.
브라우저에 따라서 한글 폰트의 영문 이름이나 또는 한글 이름을 제대로 인식하지 못하는 경우가 있기 때문에
Q. 한글이 앞에? 영문이 앞에?
- 상황에 따라 다르다.
font-family:"굴림", verdana, sans-serif;
한글 폰트에 포함된 영어 폰트는 모양이 이쁘지 못하다.
그렇기 때문에 영문 폰트를 앞에, 한글 폰트를 뒤에 배치하여 영문 폰트가 먼저 적용되로록 정의해 준다.
font-family:verdana, "굴림", sans-serif;
*단, 영문 폰트에는 한글폰트가 없어야 겠죠?
[공부 좌표]
[기본 지식]
Q. font-family 기본 폰트는 어떤 것을 설정해야 할까?