<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="font-family: Arial, 돋움, sans-serif">
글꼴<br>
abc
</div>
</body>
</html>글꼴은 font-family를 사용해서 입력할 수 있다.
입력방식은 font - family: 폰트1, 폰트2 ,..... 형식이고 적용 방식은 폰트 1 적용-> 영문만 지원되는 폰트 등의 이유로 문자를 지원하지 않는 폰트의 경우 폰트 2를 적용 - > 이하 반복한다.
아래는 위 코드가 적용된 것으로 abc는 Arial이 적용되고 "글꼴"은 Arial이 한글을 지원하지 않아 돋움으로 적용된 것을 확인 할 수 있다.
글꼴
abc
abc
만약, 내가 보여주고 싶은 글꼴이 있는 데 그 글꼴이 보는 사람의 컴퓨터에는 없는 경우가 있을 수 있다.
이럴 때는 웹폰트를 사용하는 데, 프로그램을 실행 시 웹에서 폰트를 불러와서 적용시키는 역할을 한다.
우선 구글폰트(Google Fonts)로 들어간다.
검색를 통해 원하는 글꼴을 찾는다. 그 후 추가하면 다음과 같은 창이 뜬다.
이 창에서 <link>에 있는 글을 복사해서 head에 붙여준다.
그 후, style에서 글꼴을 붙여주면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
</head>
<body>
<div style="font-family: 'Nanum Pen Script'">
글꼴<br>
abc
</div>
</body>
</html>
글꼴
abc
abc
잘 적용됨을 알 수 있다.
'HTML, CSS > CSS' 카테고리의 다른 글
| [CSS] 여백 (0) | 2023.08.26 |
|---|---|
| [CSS] 너비, 높이 (1) | 2023.08.26 |
| [CSS] 정렬 (0) | 2023.08.26 |
| [CSS] 글자 크기, 굵기, 줄 높이 (0) | 2023.08.26 |
| [CSS] 배경색, 글자색, 색상 (0) | 2023.08.25 |
