본문 바로가기
HTML/CSS문법

CSS 예비 폰트

by flycoding 2023. 8. 5.
반응형

일반적인 CSS 예비 폰트

다음은 일반적으로 사용되는 글꼴 폴백으로, 5개의 일반 글꼴 계열로 구성되어 있다:

  • Serif
  • Sans-serif
  • Monospace
  • Cursive
  • Fantasy

 

serif 예비 폰트

Times New Roman, Times, Serif 예비폰트

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>

<h1>Times New Roman fallback fonts : times, serif</h1>

<p>Times New Roman폰트 fallback fonts : times, serif.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

font-family에 'Times New Roman' 폰트를 설정하였는데 예비 폰트로 Times, serif 폰트를 설정하였고, 결과 화면은 아래 그림과 같다.

CSS Times New Roman 예비 폰트 times, serif 활용예시

 

Georgia, Serif 예비폰트

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Georgia, serif;
}
</style>
</head>
<body>

<h1>Georgia fallback fonts : serif</h1>

<p>Georgia fallback fonts : serif.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

font-family에 Georgia 폰트를 설정하였는데 예비 폰트로 serif 폰트를 설정하였고, 결과 화면은 아래 그림과 같다.

CSS Georgia fallback fonts serif 예시

 

Garamond, Serif 예비폰트

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Garamond, serif;
}
</style>
</head>
<body>

<h1>Garamond fall back fonts : serif</h1>

<p>Garamond fall back fonts : serif.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

font-family에 Garamond 폰트를 설정하였는데 예비 폰트로 serif 폰트를 설정하였고, 결과 화면은 아래 그림과 같다.

CSS Garamond fallback font serif 활용 예시

 

Sans-serif 예비 폰트

Arial, Helvitica, sans-serif 폰트

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>

<h1>Arial fallback font : Helvetica, sans-serif</h1>

<p>Arial fallback font : Helvetica, sans-serif.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

font-family에 Arial 폰트를 설정하였는데 예비 폰트로 Helvetica, sans-serif 폰트를 설정하였고, 결과 화면은 아래 그림과 같다.

CSS arial fallback font helvetica, sans-serif 활용 예시

 

Tahoma, Verdana, sans-serif 폰트

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Tahoma, Verdana, sans-serif;
}
</style>
</head>
<body>

<h1>Tahoma fallback fonts : Verdana, sans-serif</h1>

<p>Tahoma fallback fonts : Verdana, sans-serif.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

font-family에 Tahoma 폰트를 설정하였는데 예비 폰트로 Verdana, sans-serif 폰트를 설정하였고, 결과 화면은 아래 그림과 같다.

CSS Tahoma fallback font Verdana, sans-serif 활용 예시

 

'Trebuchet MS', Helvetica, sans-serif 폰트

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}
</style>
</head>
<body>

<h1>"Trebuchet MS" fallback fonts : Helvetica, sans-serif</h1>

<p>"Trebuchet MS" fallback fonts : Helvetica, sans-serif.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

font-family에 "Trebuchet MS" 폰트를 설정하였는데 예비 폰트로 Helvetica, sans-serif 폰트를 설정하였고, 결과 화면은 아래 그림과 같다.

CSS "Trebuchet MS" fallback font helvetica, sans-serif 활용 예시

 

Geneva, Verdana, sans-serif 폰트

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>

<h1>Geneva fallback fonts :  Verdana, sans-serif</h1>

<p>Geneva fallback fonts :  Verdana, sans-serif.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

font-family에 Geneva 폰트를 설정하였는데 예비 폰트로 Verdana, sans-serif 폰트를 설정하였고, 결과 화면은 아래 그림과 같다.

CSS Geneva fallback font Verdana, sans-serif 활용 예시

 

Monospace 예비 폰트

"Courier New", Courier, monospace 폰트

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: "Courier New", Courier, monospace;
}
</style>
</head>
<body>

<h1>Courier New" fallback fonts : Courier, monospace</h1>

<p>Courier New" fallback fonts : Courier, monospace.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

font-family에 "Courier New" 폰트를 설정하였는데 예비 폰트로 Courier, monospace 폰트를 설정하였고, 결과 화면은 아래 그림과 같다.

CSS "Courier New" fallback font courier monospace 활용예시

 

Cursive 예비 폰트

"Brush Script MT", cursive 폰트

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: "Brush Script MT", cursive;
}
</style>
</head>
<body>

<h1>"Brush Script MT" fallback fonts : cursive 폰트</h1>

<p>"Brush Script MT" fallback fonts : cursive 폰트.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

font-family에 "Brush Script MT" 폰트를 설정하였는데 예비 폰트로 cursive 폰트를 설정하였고, 결과 화면은 아래 그림과 같다.

CSS "Brush Script MT" fallback font cursive 활용예시

 

Fantasy 예비 폰트

Copperplate, Papyrus, fantasy 폰트

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Copperplate, Papyrus, fantasy;
}
</style>
</head>
<body>

<h1>Copperplate fallback fonts : Papyrus, fantasy</h1>

<p>Copperplate fallback fonts : Papyrus, fantasy.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

font-family에 Copperplate 폰트를 설정하였는데 예비 폰트로 Papyrus, fantasy 폰트를 설정하였고, 결과 화면은 아래 그림과 같다.

CSS Copperplate fallback font Papyrus fantasy 활용예시

 

지금까지 CSS 예비 폰트에 대해서 살펴보았다. 각 웹사이트나 브라우저 등에서 지원하지 않는 글꼴에 대해 안전하게 대체하는 예비 폰트는 어떠한 것을 사용할 것인지에 대해서 살펴보았다.

꼭 실습하기를 바랍니다.

모두 화이팅입니다.!!!

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

반응형
저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS font-size 속성  (0) 2023.08.07
CSS font-style 속성  (0) 2023.08.06
CSS 웹 안전 폰트  (0) 2023.08.04
CSS font-family  (0) 2023.08.03
CSS text-shadow 속성  (0) 2023.08.02

관련글

댓글

티스토리툴바