-
실습 - 웹 폰트 사용하기HTML&CSS/CSS 2023. 1. 26. 19:20
# 가지고 있는 폰트를 사용
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- src 속성에는 사용할 글꼴의 파일 경로를 지정 --> <!-- local()문을 사용해서 사용자 시스템에 해당 글꼴이 있는지 먼저 확인 --> <!-- WOFF포맷을 먼저 선언하고 TTF포맷은 그 후에 선언한다 --> <style> @font-face { font-family: 'Ostrich'; src: local('Ostrich Sans'), url('fonts/ostrich-sans-bold.woff') format('svg'), url('fonts/ostrich-sans-bold.ttf') format('truetype'), } .wfont{ font-family: 'Ostrich', sans-serif; } p{ font-size: 30px; } </style> </head> <body> <p>Using Default Fonts</p> <p class="wfont">Using Web Fonts</p> </body> </html># 구글 폰트를 사용
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap'); h1{ font-size: 60px; font-family: 'Nanum Pen Script', cursive; } </style> </head> <body> <h1>오늘도힘내자버티자</h1> </body> </html>'HTML&CSS > CSS' 카테고리의 다른 글
목록스타일 (0) 2023.01.29 텍스트 관련 스타일 (0) 2023.01.26 글꼴 관련 스타일 (0) 2023.01.21 스타일 우선순위 & 스타일 상속 (0) 2023.01.20 스타일시트 (0) 2023.01.20