본문 바로가기
HTML/CSS문법

CSS 웹 안전 폰트

by flycoding 2023. 8. 4.
반응형

CSS 웹 안전 폰트란 무엇인가?

웹 안전 글꼴은 모든 브라우저 및 장치에 보편적으로 설치되는 글꼴이다.

 

CSS fallback 폰트

그러나 100% 완전한 웹 안전 글꼴은 없다. 글꼴을 찾을 수 없거나 올바르게 설치되지 않은 경우가 항상 있다.

따라서 항상 폴백 글꼴을 사용하는 것이 매우 중요하다.

즉, 글꼴 패밀리 속성에 유사한 "백업 글꼴" 목록을 추가해야 한다. 첫 번째 글꼴이 작동하지 않으면 브라우저는 다음 글꼴과 다음 글꼴을 시도한다. 항상 일반 글꼴 패밀리 이름으로 목록을 끝낸다.

 

여기에는 세 가지 글꼴 유형이 있다: Tahome, Verdana, Sans-serif  두 번째와 세 번째 글꼴은 첫 번째 글꼴을 찾을 수 없는 경우를 대비하여 백업이다.

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

<h1>CSS Fallback Fonts</h1>

<p>이것은 단락이다..</p>
<p>이것은 또다른 단락이다.</p>

</body>
</html>

p요소에 font-family로 폰트를 설정하는데 Tahoma, Verdana, sans-serif 폰트를 설정하였다. 브라우저에서 Tahoma 폰트를 지원하지 않으면 Verdana, Verdana를 지원하지 않으면 sans-serift 폰트를 설정할 것이다.  

아래 그림은 위의 코드를 실행한 결과 화면이다.

css fallback font 활용 예제

 

HTML과 CSS의 최고 웹 안전 폰트

다음 목록은 HTML 및 CSS에 가장 적합한 웹 안전 글꼴이다:

  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)

 

CSS Arial 폰트

Arial은 온라인 및 인쇄 매체 모두에 가장 널리 사용되는 글꼴이다. 평가판은 Google 문서의 기본 글꼴이기도 하다.

평가판은 가장 안전한 웹 글꼴 중 하나이며 모든 주요 운영 체제에서 사용할 수 있다.

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

<h1>CSS Arial 폰트</h1>

<p>CSS Arial 폰트.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

body 요소에 font-family 에 arial 그리고 sans-serif 폰트를 지정하였다. h1 요소와 p요소에 arial 폰트가 적용된 결과 화면은 아래 그림과 같다.

css arial 폰트 적용 예시

 

CSS Verdana 폰트

verdana는 매우 인기 있는 글꼴이다. Verdana는 작은 글꼴 크기에서도 쉽게 읽을 수 있다.

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

<h1>CSS Verdana 폰트</h1>

<p>CSS Verdana 폰트.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

body 요소에 font-family 에 verdana그리고 sans-serif 폰트를 지정하였다. h1 요소와 p요소에 verdana 폰트가 적용된 결과 화면은 아래 그림과 같다.

css verdana 폰트 적용 예시

 

CSS Tahoma 폰트

Tahoma 글꼴은 문자 사이의 공간이 적다.

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

<h1>CSS Tahoma 폰트</h1>

<p>CSS Tahoma 폰트.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

body 요소에 font-family 에 tahoma 그리고 sans-serif 폰트를 지정하였다. h1 요소와 p요소에 tahoma 폰트가 적용된 결과 화면은 아래 그림과 같다.

css Tahoma 폰트 적용 예시

 

CSS Trebuchet MS 폰트(sans-serif)

Trebuchet MS는 1996년에 마이크로소프트에 의해 설계되었다. 이 글꼴을 주의해서 사용하해야 한다. 일부 모바일 운영 체제에서는 지원되지 않는다.

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

<h1>CSS Trebuchet MS 폰트</h1>

<p>CSS Trebuchet MS 폰트.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

body 요소에 font-family 에 'Trebuchet MS' 그리고 sans-serif 폰트를 지정하였다. h1 요소와 p요소에 'Trebuchet MS' 폰트가 적용된 결과 화면은 아래 그림과 같다.

css Trebuchet MS 폰트 적용 예시

 

CSS Times New Roman 폰트(serif)

Times New Roman은 세계에서 가장 인지도가 높은 글꼴 중 하나이다. 그것은 전문적으로 보이고 많은 신문과 "뉴스" 웹사이트에서 사용된다. Windows 장치 및 응용 프로그램의 기본 글꼴이기도 하다.

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

<h1>CSS 'Times New Roman' MS 폰트</h1>

<p>CSS 'Times New Roman' MS 폰트.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

body 요소에 font-family 에 'Times New Roman' 그리고 sans-serif 폰트를 지정하였다. h1 요소와 p요소에 'Times New Roman' 폰트가 적용된 결과 화면은 아래 그림과 같다.

css Times New Roman 폰트 적용 예시

 

CSS Georgia 폰트(serif)

Georgia는 우아한 세리프 글꼴이다. 다양한 글꼴 크기에서 매우 읽기 쉬우므로 모바일 응답 설계에 적합하다.

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

<h1>CSS Georgia 폰트</h1>

<p>CSS Georgia 폰트.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

body 요소에 font-family 에Georgia  그리고 sans-serif 폰트를 지정하였다. h1 요소와 p요소에Georgia 폰트가 적용된 결과 화면은 아래 그림과 같다.

css Georgia 폰트 적용 예시

 

CSS Garamond 폰트(serif)

Garamond 는 많은 인쇄된 책에 사용되는 고전적인 글꼴이다. 그것은 시대에 뒤지지 않는 모습과 좋은 가독성을 가지고 있다.

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

<h1>CSS Garamond 폰트</h1>

<p>CSS Garamond 폰트.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

body 요소에 font-family 에 Garamond 그리고 sans-serif 폰트를 지정하였다. h1 요소와 p요소에 Garamond 폰트가 적용된 결과 화면은 아래 그림과 같다.

css Garamond 폰트 적용 예시

 

CSS Courier New 폰트(monospace)

Courier New는 가장 널리 사용되는 단일 공간 세리프 글꼴이다. Courier New는 코딩 디스플레이와 함께 사용되는 경우가 많으며 많은 전자 메일 공급자가 기본 글꼴로 사용한다. Courier New는 영화 스크린플레이의 표준 글꼴이기도 하다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: 'Courier New', sans-serif;
}
</style>
</head>
<body>

<h1>CSS 'Courier New' 폰트</h1>

<p>CSS 'Courier New' 폰트.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

body 요소에 font-family 에 'Courier New' 그리고 sans-serif 폰트를 지정하였다. h1 요소와 p요소에 'Courier New' 폰트가 적용된 결과 화면은 아래 그림과 같다.

css 'Courier New' 폰트 적용 예시

 

CSS Brush Script MT 폰트

Brush Script MT 글꼴은 필기를 모방하도록 설계되었다. 그것은 우아하고 세련되었지만 읽기 어려울 수 있다. 조심해서 사용하세요.

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

<h1>CSS 'Brush Script MT' 폰트</h1>

<p>CSS 'Brush Script MT' 폰트.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

body 요소에 font-family 에 'Brush Script MT' 그리고 sans-serif 폰트를 지정하였다. h1 요소와 p요소에 'Brush Script MT' 폰트가 적용된 결과 화면은 아래 그림과 같다.

css 'Brush Script MT' 폰트 적용 예시

 

지금까지 CSS 폰트에서 웹 안전 폰트에 대해서 살펴보았다.

CSS 웹 안전 폰트에는 ,Arial, Verdana, Tahoma, 'Trebuchet MS', 'Times New Roman', Georgia, Garamond, 'Courier New', 'Brush Script MT' 폰트에 대해서 살펴보았다.

모두 꼭 실습하고 손으로, 눈으로, 머리로 따라하며 실력이 꼭 향상되기를 바랍니다.

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

 

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

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

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

CSS font-style 속성  (0) 2023.08.06
CSS 예비 폰트  (0) 2023.08.05
CSS font-family  (0) 2023.08.03
CSS text-shadow 속성  (0) 2023.08.02
CSS text-transform 속성  (0) 2023.08.01

관련글

댓글

티스토리툴바