코딩스쿨

▶ CSS References

CSS Web Safe Fonts

CSS Web Safe Fonts : 웹 안전 폰트 가이드

*웹 안전 폰트(Web Safe Fonts)**는 거의 모든 웹 브라우저와 운영체제에서 기본적으로 지원되는 폰트입니다. 이러한 폰트를 사용하면, 사용자의 시스템에 특정 폰트가 설치되어 있지 않더라도 웹 페이지가 일관된 디자인을 유지할 수 있습니다. 웹 안전 폰트는 여러 운영체제에서 동일하게 표시될 가능성이 높기 때문에 안정적인 텍스트 렌더링을 제공합니다.

이 가이드는 웹 안전 폰트 목록과 해당 폰트를 사용하는 CSS 코드 예제를 제공합니다.

1. 웹 안전 폰트란?

웹 안전 폰트는 기본적으로 대부분의 운영체제에 설치되어 있으며, 모든 브라우저에서 동일하게 렌더링되는 폰트입니다. 사용자의 시스템에 폰트가 설치되어 있지 않아도 웹 사이트의 텍스트가 올바르게 표시되도록 보장합니다.

2. 주요 웹 안전 폰트

다음은 다양한 운영체제와 브라우저에서 일관되게 렌더링되는 대표적인 웹 안전 폰트입니다.

2.1 Serif 폰트 (세리프)

세리프(Serif) 폰트는 각 글자의 끝에 장식적인 선이나 돌기가 있는 전통적인 서체입니다.

Times New Roman

운영체제: 모든 Windows, Mac, Linux

예시:

body {
    font-family: "Times New Roman", Times, serif;
}

Georgia
- 운영체제: Windows, Mac, Linux
- 예시:
```
body {
    font-family: Georgia, serif;
}
```

2.2 Sans-serif 폰트 (산세리프)

산세리프(Sans-serif) 폰트는 글자의 끝에 장식적인 선이 없는 깔끔한 서체입니다.

Arial

운영체제: 모든 Windows, Mac, Linux

예시:

body {
    font-family: Arial, Helvetica, sans-serif;
}

Verdana

운영체제: Windows, Mac, Linux

예시:

body {
    font-family: Verdana, Geneva, sans-serif;
}

Helvetica
- 운영체제: Mac (Windows는 기본적으로 설치되지 않음)
- 예시:
```
body {
    font-family: Helvetica, Arial, sans-serif;
}
```

Tahoma

운영체제: Windows, Mac, Linux

예시:

body {
    font-family: Tahoma, Geneva, sans-serif;
}

Trebuchet MS

운영체제: Windows, Mac

예시:

body {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}

2.3 Monospace 폰트 (모노스페이스)

모노스페이스(Monospace) 폰트는 모든 글자가 동일한 폭을 차지하는 서체입니다. 주로 코드를 표시할 때 사용됩니다.

Courier New

운영체제: 모든 Windows, Mac, Linux

예시:

body {
    font-family: "Courier New", Courier, monospace;
}

Lucida Console

운영체제: Windows, Mac, Linux

예시:

body {
    font-family: "Lucida Console", Monaco, monospace;
}

2.4 Cursive 폰트 (필기체)

커서브(Cursive) 폰트는 손글씨 스타일의 폰트입니다.

Comic Sans MS

운영체제: 모든 Windows, Mac

예시:

body {
    font-family: "Comic Sans MS", cursive, sans-serif;
}

2.5 Fantasy 폰트

판타지(Fantasy) 폰트는 장식적인 글꼴입니다.

Impact

운영체제: Windows, Mac

예시:

body {
    font-family: Impact, Charcoal, sans-serif;
}

3. 폰트 패밀리 사용법

CSS에서는 font-family 속성을 사용해 특정 폰트를 지정할 수 있습니다. 일반적으로 첫 번째 폰트는 우선적으로 적용되며, 사용자의 시스템에 해당 폰트가 없을 경우 두 번째 또는 세 번째 대체 폰트가 적용됩니다.

구문:
```
font-family: "Primary Font", "Secondary Font", "Fallback Font";
```
- Primary Font: 사용하고자 하는 첫 번째 폰트.
- Secondary Font: 첫 번째 폰트가 없을 경우 대체할 폰트.
- Fallback Font: 모두 없을 경우 시스템 기본 폰트.
예시:
```
body {
    font-family: "Arial", "Helvetica", sans-serif;
}
```
위 예시는 사용자의 시스템에 Arial 폰트가 있으면 Arial을 적용하고, Arial이 없으면 Helvetica 폰트를 사용합니다. 두 폰트 모두 없을 경우, 기본 산세리프 폰트가 사용됩니다.

4. 폰트 계열 (Font Families)

CSS에서 폰트를 정의할 때 일반적인 폰트 계열을 지정할 수 있습니다. 이 계열은 시스템 폰트를 보장하는 가장 일반적인 폰트 유형입니다.

serif: Times, Georgia와 같은 세리프 폰트.
sans-serif: Arial, Verdana와 같은 산세리프 폰트.
monospace: Courier New와 같은 고정 폭 폰트.
cursive: Comic Sans MS와 같은 필기체.
fantasy: Impact와 같은 장식적인 폰트.

5. 웹 폰트 대안

웹 안전 폰트만으로는 디자인의 제약이 있을 수 있기 때문에 웹 폰트(예: Google Fonts)를 사용하는 경우가 많습니다. 웹 폰트는 사용자의 시스템에 설치되지 않아도 웹에서 바로 불러와 사용할 수 있는 폰트입니다.

Google Fonts 예시:

<link rel="stylesheet" href="<https://fonts.googleapis.com/css?family=Roboto>">

body {
    font-family: 'Roboto', sans-serif;
}

6. 웹 안전 폰트의 사용 이유

웹 안전 폰트를 사용하는 이유는 다음과 같습니다:

호환성: 모든 운영체제와 브라우저에서 동일하게 렌더링됩니다.
속도: 폰트 파일을 웹에서 불러올 필요가 없어 페이지 로딩 속도가 빠릅니다.
안정성: 대체 폰트에 의한 디자인 변형을 최소화할 수 있습니다.

요약

웹 안전 폰트는 다양한 운영체제와 브라우저에서 일관된 텍스트 렌더링을 보장하는 데 중요한 역할을 합니다. Arial, Times New Roman, Courier New와 같은 대표적인 웹 안전 폰트는 시스템 기본 폰트로서 안정적으로 사용할 수 있으며, 여러 폰트를 지정하여 대체 폰트도 함께 설정하는 것이 좋습니다. 웹 폰트와 함께 사용하면 더 다양한 디자인을 구현할 수 있습니다.

코딩 스쿨 CSS