[CSS 2-1] 글꼴 관련 스타일 속성

임승현·2022년 11월 11일

CSS

목록 보기

3/14

📌font-family : 글꼴 관련 스타일 속성 - 글꼴 나열 가능(순차 적용)

◈ font-family 속성이 생략되거나 속성값으로 설정된 글꼴이 없는 경우 클라이언트 플렛폼(OS - 운영체제)의기본 글꼴 사용 - 클라이언트에 따라 다른 글꼴 사용하여 출력
font-family: "sans-serif","맑은 고딕";

📃09_font_family.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
body {
	/* font-family : 글꼴 관련 스타일 속성 - 글꼴 나열 가능(순차 적용) */
	/* font-family 속성이 생략되거나 속성값으로 설정된 글꼴이 없는 경우 클라이언트 플렛폼(OS - 운영체제)의
	기본 글꼴 사용 - 클라이언트에 따라 다른 글꼴 사용하여 출력 */
	font-family: "sans-serif","맑은 고딕";
}
</style>
</head>
<body>
	<h1>글꼴 관련 스타일 속성</h1>
	<hr>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>

◈ 구글에서 제공하는 웹폰트 : https://fonts.google.com 사이트 참조

📌@import : 웹서버에 존재하는 CSS 파일을 현재 웹문서에 포함시키는 시스템 속성
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

📌웹폰트(WebFont) : 웹서버에 저장된 글꼴파일을 클라이언트에게 제공하여 사용하는 기능

글꼴파일 : ttf 파일(OS에서 사용하는 글꼴파일), woff 파일(IE9 이상, 크롬, 사라리등),

📌eof 파일(IE8 이하, 크롬, 사라리등)

📌@font-face : 글꼴파일을 클라이언트에게 제공하기 위한 시스템 속성
@font-face {
🌠font-family : 글꼴파일을 구분하기 위한 식별자(글꼴명)를 속성값으로 설정
font-family: "NanumGothic";
🌠src 속성 : url 함수를 사용하여 글꼴파일의 URL 주소를 속성값으로 설정
src: url("/web/scc/fonts/NanumGothic.woff")

📃10_web_font.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
/* 구글에서 제공하는 웹폰트 : https://fonts.google.com 사이트 참조 */
/* @import : 웹서버에 존재하는 CSS 파일을 현재 웹문서에 포함시키는 시스템 속성 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
/* 웹폰트(WebFont) : 웹서버에 저장된 글꼴파일을 클라이언트에게 제공하여 사용하는 기능 */
/* 글꼴파일 : ttf 파일(OS에서 사용하는 글꼴파일), woff 파일(IE9 이상, 크롬, 사라리등), eof 파일(IE8 이하, 크롬, 사라리등) */
/* @font-face : 글꼴파일을 클라이언트에게 제공하기 위한 시스템 속성 */
@font-face {
	/* font-family : 글꼴파일을 구분하기 위한 식별자(글꼴명)를 속성값으로 설정 */
	font-family: "NanumGothic";
	/* src 속성 : url 함수를 사용하여 글꼴파일의 URL 주소를 속성값으로 설정 */
	src: url("/web/scc/fonts/NanumGothic.woff")
}
@font-face {
	font-family: "NanumBarunGothic";
	src: url("/web/scc/fonts/NanumBarunGothic.woff")
}
body {
	/*font-family: "NanumGothic";*/
	font-family: "NanumBarunGothic";
}
</style>
</head>
<body>
	<h1>글꼴 관련 스타일 속성</h1>
	<hr>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>