font-family

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

요약

CSS  font-family 속성은 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을  지정할 수 있게 해줍니다.  값은 콤마로 구분하여 대체가 될 수 있음을 나타냅니다. 브라우저는 폰트 목록에서 컴퓨터에 설치되어 있거나 @font-face 규칙을 이용하여 다운로드 받을 수 있는 폰트 중 가장 첫번째 폰트를 선택할 것입니다.

웹 제작자는 font-family 목록에 최소 한 개의 generic family를 추가해야 하는데, 시스템이나 @font-face 규칙을 이용 해 다운로드 받은 폰트 중에 특정 폰트가 있다는 것을 보장할 수 없기 때문입니다. generic family는 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. 

font-size를 설정하거나 다른 폰트 관련 속성들을 한꺼번에 지정하는 경우 font가 단축형으로 자주 사용됩니다.

노트: font-family  속성은 우선순위가 높은 순서대로 폰트 목록을 구체적으로 명시합니다. 폰트 선택은 단순히 사용자의 시스템에 설치되어 있는 폰트 중 가장 첫번째 폰트를 선택하는 것에서 멈추지 않습니다. 그러기 보다, 한번에 하나의 문자를 선택하기 때문에, 문자에 필요한 보여줄 수 있는 성각문자(glyph)를 가지고 있지 않으면, 그 다음 목록에 있는 폰트에서 찾으려 할 것입니다. 하지만, 이 방식은 인터넷 익스플로러 6 혹은 그 이전 버전에서는 동작하지 않습니다.

폰트가 style, variant, size와 같은 몇몇 속성을 사용할 수 있다고 할 때, 그 속성들은 어떤  font family가 선택되었는지에 따라 영향을 미치게 될 것입니다.

초기값depends on user agent
적용대상all elements. It also applies to ::first-letter and ::first-line.
상속yes
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

구문

/* font family 이름과 generic family 이름 */
font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/* generic family 이름 */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;

/* 전역 값 */
font-family: inherit;
font-family: initial;
font-family: unset;

<family-name>
The name of a font family. For example, "Times" and "Helvetica" are font families. Font family names containing whitespace should be quoted.
<generic-name>

Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent when none of the specified fonts are available. Generic family names are keywords and must not be quoted. A generic font family should be the last item in the list of font family names. The following keywords are defined:

serif
Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.
E.g. Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.
sans-serif
Glyphs have stroke endings that are plain.
E.g. "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.
monospace
All glyphs have the same fixed width.
E.g. "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace.
cursive
Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork.
E.g. "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.
fantasy
Fantasy fonts are primarily decorative fonts that contain playful representations of characters.
E.g. Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.

유효한 폰트 패밀리 이름

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

For example, the following declarations are valid:

font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

The following declarations are invalid:

font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

형식 구문

[ <family-name> | <generic-family> ]#

where
<family-name> = <string> | <IDENT>+
<generic-family> = serif | sans-serif | cursive | fantasy | monospace

예제

예제 1

body {
  font-family: "Gill Sans Extrabold", Helvetica, sans-serif;
}

.receipt {
  font-family: Courier, "Lucida Console", monospace;
}

예제 2

.exampleserif {
    font-family: Times, "Times New Roman", Georgia, serif;
}

.examplesansserif {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.examplemonospace {
    font-family: "Lucida Console", Courier, monospace;
}

.examplecursive {
    font-family: cursive;
}

.examplefantasy {
    font-family: fantasy;
}
<div class="exampleserif">
This is an example of a serif font.
</div>

<div class="examplesansserif">
This is an example of a sans-serif font.
</div>

<div class="examplemonospace">
This is an example of a monospace font.
</div>

<div class="examplecursive">
This is an example of a cursive font.
</div>

<div class="examplefantasy">
This is an example of a fantasy font.
</div>

적용 예

명세

명세 상태 Comment
CSS Fonts Module Level 3
The definition of 'font-family' in that specification.
Candidate Recommendation No significant change
CSS Level 2 (Revision 1)
The definition of 'font-family' in that specification.
Recommendation No significant change
CSS Level 1
The definition of 'font-familiy' in that specification.
Recommendation Initial definition

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 3.0 3.5 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 6.0 6.0 1.0

문서 태그 및 공헌자

 이 페이지의 공헌자: naduhy2
 최종 변경: naduhy2,