폰트 패밀리 (HTML)
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
폰트 패밀리(font-family)는 HTML 및 CSS에서 텍스트의 글꼴을 지정하는 데 사용되는 속성이다. 폰트 패밀리는 특정 글꼴 이름이나 일반 글꼴을 지정할 수 있으며, 사용자의 시스템에 설치된 글꼴에 따라 글꼴의 모양이 달라진다. CSS를 사용하여 폰트를 지정하는 방법에는 스타일 시트, 인라인 CSS, 그리고 권장되지 않는 `` 태그를 사용하는 방법이 있다. 또한, 웹 환경에서는 폰트 대체 및 웹 폰트 사용이 가능하다.
폰트 패밀리(font-family)는 공통적인 디자인 특징을 공유하는 글꼴들의 집합을 의미한다. CSS에서는 `font-family` 속성을 사용하여 텍스트에 적용할 폰트를 지정할 수 있다.
CSS(Cascading Style Sheets)를 사용하면 웹 페이지의 텍스트에 다양한 폰트를 적용하고 스타일을 지정할 수 있다.
2. 폰트 패밀리
글꼴 예시 (설치된 글꼴에 의존) Agency FB ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Albertina ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Antiqua ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Architect ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Arial ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык BankFuturistic ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык BankGothic ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Blackletter ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Blagovest ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Calibri ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Comic Sans MS ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Consolas ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Courier ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Garamond ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Georgia ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Helvetica ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Impact ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Minion ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Modern ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Open Sans ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Palatino ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Perpetua ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Swiss ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Tahoma ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Times ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Times New Roman ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Tw Cen MT ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык Verdana ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
2. 1. 폰트 이름 지정 방식
`font-family`는 Heisei Mincho W9와 같은 특정 이름의 글꼴을 사용할 수 있으나, 그 결과는 사용자 기기에 설치된 글꼴에 따라 달라진다. 실제 모습은 시스템에 설치된 브라우저와 글꼴에 의존한다.[4] 마이크로소프트 윈도우의 파이어폭스에 기본으로 설치되는 기준으로 세리프(serif)는 Times New Roman, sans-serif는 Arial을 사용한다.
CSS는 글꼴 패밀리를 서체와 동일하게 정의하려 하지만, `font-family` 항목과 해당 항목의 표준이 아닌 HTML 이전 버전은 전체 ''글꼴 모양''을 식별하는 데에도 사용되어 왔다. 이러한 사용법은 글꼴 파일이 자체를 패밀리의 일부로 설명하지 않는 데 기인하며, 당시에는 4개 이상의 글꼴 스타일(굵게/일반, 이탤릭체/일반) 중에서 선택을 지원하는 편집기가 거의 없었던 것이 부분적인 동기였다.
결과적으로 `font-family: 'Gill Sans Extrabold', 'Heisei Mincho W9'`와 같은 선언문이, 정확하게는 `font-family: 'Gill Sans', 'Heisei Mincho'; font-weight: 900` 대신 사용되는 경우가 흔했다. CSS2나 CSS3는 이러한 사용법을 권장하지 않지만(예시에서 찾아볼 수 없음), 대부분의 브라우저는 이를 유효한 "이름"으로 받아들인다.
2. 2. 일반 글꼴 (Generic Fonts)
''font-family''는 특정 이름의 글꼴(예: ''Heisei Mincho W9'')을 사용할 수 있지만, 그 결과는 사용자 컴퓨터에 설치된 글꼴에 따라 달라진다. 실제 모습은 브라우저와 시스템에 설치된 글꼴에 의존한다.[1] 예를 들어, 마이크로소프트 윈도우에 파이어폭스를 기본 설치하면 ''serif''는 Times New Roman으로, ''sans-serif''는 Arial로 표시된다.
일반적으로 Serif, Sans-serif, Monospace 및 Cursive[2]와 같은 작은 하위 집합만 웹 브라우저에서 사용자가 쉽게 구성할 수 있다.
많은 시스템은 또한 누락된 "잘 알려진" 글꼴 집합을 메트릭 호환 대체 글꼴로 바꾸기 위해 특별한 경우의 ''글꼴 대체''를 수행한다. 예를 들어, 윈도우는 ''Helvetica''를 Arial로, ''Times''를 Times New Roman으로 대체한다.[3] 이러한 글꼴 집합은 CSS 의미에서 일반적이지 않으며 일반적으로 브라우저 수준에서 처리되지 않는다.
3. CSS와 폰트
3. 1. CSS를 이용한 폰트 지정 방법
다음 예제는 동일한 글꼴 (타임스 또는 기본 세리프, 14포인트, 이탤릭체)를 세 가지 방식으로 정의한다.
```css
.text { font-family: times, serif; font-size:14pt; font-style:italic; }
```
```html
별도의 스타일 시트의 CSS로 서식이 지정된 샘플 텍스트입니다.
인라인 CSS로 서식이 지정된 샘플 텍스트입니다.
폐지된 FONT 태그로 서식이 지정된 샘플 텍스트입니다.
```
쉼표 뒤에 공백을 넣고, 공백이 포함된 이름은 따옴표로 묶는 것이 모범 사례이다.
4. 폰트 예시
이 섹션에서는 다양한 폰트 패밀리의 예시를 보여준다. 아래 표는 사용자의 시스템에 설치된 글꼴에 따라 다르게 보일 수 있다.
| 글꼴 | 예시 (설치된 글꼴에 의존) |
|---|---|
| Agency FB | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Albertina | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Antiqua | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Architect | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Arial | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| BankFuturistic | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| BankGothic | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Blackletter | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Blagovest | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Calibri | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Comic Sans MS | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Consolas | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Courier | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Garamond | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Georgia | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Helvetica | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Impact | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Minion | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Modern | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Open Sans | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Palatino | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Perpetua | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Swiss | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Tahoma | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Times | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Times New Roman | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Tw Cen MT | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Verdana | ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
5. 웹 환경에서의 폰트 사용
웹 환경에서는 사용자의 컴퓨터에 특정 폰트가 설치되어 있지 않을 수 있기 때문에 폰트 지정 시 주의가 필요하다. 많은 시스템은 특정 폰트가 없을 때 메트릭 호환 대체 글꼴로 바꾸는 '폰트 대체'를 수행하지만, 이는 일반적으로 브라우저 수준에서 처리되지 않는다.
5. 1. 폰트 대체 (Font Substitution)
많은 시스템은 특정 폰트가 없을 때 메트릭 호환 대체 글꼴로 바꾸는 ''글꼴 대체''를 수행한다. 예를 들어, 윈도우는 ''Helvetica''를 Arial로, ''Times''를 Times New Roman으로 대체한다.[3] 이러한 글꼴 집합은 CSS 의미에서 일반적이지 않으며, 일반적으로 브라우저 수준에서 처리되지 않는다.참조
[1]
웹사이트
Fonts
http://www.w3.org/TR[...]
W3.org
2013-09-21
[2]
문서
very few web browsers, including [[Konqueror]], support changing Cursive
[3]
웹사이트
Font Technology - Globalization
https://docs.microso[...]
2022-01-31
[4]
웹인용
Fonts
http://www.w3.org/TR[...]
W3.org
2013-09-21
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com