62. (html/css/javascript/jquery) font family 폰트 글꼴 글씨체 설명 및 적용 방법 정의

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

---

[소스 코드]

​

		/* [공통 : 폰트 글씨체 변경 실시] */
		/*
		1. 문법 : font-family: font [폰트이름] 또는 [글꼴 유형] | initial [기본값 설정] | inherit [부모 요소의 속성값을 상속받음]
		2. 폰트 이름 : 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감쌉니다
		3. 글꼴 유형 : serif = 삐침 있는 명조계열의 글꼴 / sans-serif = 삐침 없고 굵기가 일정한 고딕계열의 글꼴
					   monospace : 글자 폭과 간격이 일정한 글꼴 / cursive : 손으로 쓴 것 같은 필기계열의 글꼴
					   fantasy : 화려한 글꼴
		4. 예시 - 독자적 사용 / 기본값 설정 없음 : 
					   font-family: Georgia, serif; // [Georgia 글꼴 사용]
					   font-family: "Malgun Gothic", serif; // [Malgun Gothic 글꼴 사용]
					   font-family: Georgia, "Malgun Gothic", serif; // [Georgia 글꼴 먼저 찾고 없으면 Malgun Gothic 글꼴 사용]
					   font-family: Georgia, "Malgun Gothic", serif; // [Georgia 글꼴 먼저 찾고 없으면 Malgun Gothic 글꼴 사용]
					   font-family: Georgia, "Malgun Gothic", serif; // [Georgia 글꼴 사용 >> 한글이 없는 경우 >> "Malgun Gothic" 글꼴 사용해 한글 표시]
		*/
		.cFontFamilyDotum {
			/* 돋움 글꼴 사용 */
			font-family: Dotum, sans-serif;
		}
		.cFontFamilyGulim {
			/* 굴림 글꼴 사용 */
			font-family: Gulim, sans-serif;
		}
		.cFontFamilyBatang {
			/* 바탕 글꼴 사용 */
			font-family: Batang, sans-serif;
		}
		.cFontFamilyGungsuh {
			/* 궁서 글꼴 사용 */
			font-family: Gungsuh, sans-serif;
		}

		.cFontFamilyDotumChe {
			/* 돋움체 글꼴 사용 */
			font-family: DotumChe, sans-serif;
		}
		.cFontFamilyGulimChe {
			/* 굴림체 글꼴 사용 */
			font-family: GulimChe, sans-serif;
		}
		.cFontFamilyBatangChe {
			/* 바탕체 글꼴 사용 */
			font-family: BatangChe, sans-serif;
		}
		.cFontFamilyGungsuhChe {
			/* 궁서체 글꼴 사용 */
			font-family: GungsuhChe, sans-serif;
		}
		.cFontFamilyNewGulim {
			/* 새굴림 글꼴 사용 */
			font-family: "New Gulim", sans-serif;
		}
		.cFontFamilyMalgunGothic {
			/* 맑은 고딕 글꼴 사용 */
			font-family: "Malgun Gothic", sans-serif;
		}

---

[요약 설명]

​

/*

1. 문법 : font-family: font [폰트이름] 또는 [글꼴 유형] | initial [기본값 설정] | inherit [부모 요소의 속성값을 상속받음]

2. 폰트 이름 : 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감쌉니다

3. 글꼴 유형 : serif = 삐침 있는 명조계열의 글꼴 / sans-serif = 삐침 없고 굵기가 일정한 고딕계열의 글꼴

    monospace : 글자 폭과 간격이 일정한 글꼴 / cursive : 손으로 쓴 것 같은 필기계열의 글꼴

    fantasy : 화려한 글꼴

4. 예시 - 독자적 사용 / 기본값 설정 없음 :

    font-family: Georgia, serif; // [Georgia 글꼴 사용]

    font-family: "Malgun Gothic", serif; // [Malgun Gothic 글꼴 사용]

    font-family: Georgia, "Malgun Gothic", serif; // [Georgia 글꼴 먼저 찾고 없으면 Malgun Gothic 글꼴 사용]

    font-family: Georgia, "Malgun Gothic", serif; // [Georgia 글꼴 먼저 찾고 없으면 Malgun Gothic 글꼴 사용]

    font-family: Georgia, "Malgun Gothic", serif; // [Georgia 글꼴 사용 >> 한글이 없는 경우 >> "Malgun Gothic" 글꼴 사용해 한글 표시]

*/

---

[구글 폰트 적용 방법]

​

https://blog.naver.com/kkh0977/222371357239

14. (html/css/javascript/jquery) link rel type 사용해 구글 폰트 google fonts 외부 스타일 font family 에 적용 실

---