[CSS] font-family

용도

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;

*단, 영문 폰트에는 한글폰트가 없어야 겠죠?

---

[공부 좌표]

font-family 지정하는 법

 

[기본 지식]

Q. font-family 기본 폰트는 어떤 것을 설정해야 할까?