1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
---
title: font-family
slug: Web/CSS/font-family
tags:
- CSS
- CSS Fonts
- CSS Property
- Reference
translation_of: Web/CSS/font-family
---
<div>{{CSSRef}}</div>
<p>CSS <strong><code>font-family</code></strong> 속성은 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을 지정할 수 있게 해줍니다. </p>
<p>{{EmbedInteractiveExample("pages/css/font-family.html")}}</p>
<p>값은 콤마로 구분하여 대체가 될 수 있음을 나타냅니다. 브라우저는 폰트 목록에서 컴퓨터에 설치되어 있거나 {{cssxref("@font-face")}} 규칙을 이용하여 다운로드 받을 수 있는 폰트 중 가장 첫번째 폰트를 선택할 것입니다.</p>
<p>웹 제작자는 font-family 목록에 최소 한 개의 generic family를 추가해야 하는데, 시스템이나 {{cssxref("@font-face")}} 규칙을 이용 해 다운로드 받은 폰트 중에 특정 폰트가 있다는 것을 보장할 수 없기 때문입니다. generic family는 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. </p>
<p>font-size를 설정하거나 다른 폰트 관련 속성들을 한꺼번에 지정하는 경우 {{cssxref("font")}}가 단축형으로 자주 사용됩니다.</p>
<h2 id="구문">구문</h2>
<pre class="brush:css">/* A font family name and a generic family name */
font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;
/* A generic family name only */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
/* Global values */
font-family: inherit;
font-family: initial;
font-family: unset;
</pre>
<p>The <code>font-family</code> property lists one or more font families, separated by commas. Each font family is specified as either a <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">{{anch("family-name", "<family-name>")}}</span></font> or a <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">{{anch("generic-name", "<generic-name>")}}</span></font> value.</p>
<p>The example below lists two font families, the first with a <code><family-name></code> and the second with a <code><generic-name></code>:</p>
<pre>font-family: Gill Sans Extrabold, sans-serif;
</pre>
<h3 id="값">값</h3>
<dl>
<dt id="family-name"><code><family-name></code></dt>
<dd>The name of a font family. For example, "Times" and "Helvetica" are font families. Font family names containing whitespace should be quoted.</dd>
<dt id="generic-name"><code><generic-name></code></dt>
<dd>
<p>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:</p>
<dl>
<dt><code>serif</code></dt>
<dd style="font-family: serif;">Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.<br>
E.g. <span style="font-family: lucida bright,serif;">Lucida Bright</span>, <span style="font-family: lucida fax,serif;">Lucida Fax</span>, <span style="font-family: palatino,serif;">Palatino</span>, <span style="font-family: palatino linotype,serif;">"Palatino Linotype"</span>, <span style="font-family: palladio,serif;">Palladio</span>, <span style="font-family: urw palladio,serif;">"URW Palladio"</span>, <span style="font-family: serif;">serif</span>.</dd>
<dt><code>sans-serif</code></dt>
<dd style="font-family: sans-serif;">Glyphs have stroke endings that are plain.<br>
E.g. <span style="font-family: open sans,sans-serif;">"Open Sans"</span>, <span style="font-family: fira sans,sans-serif;">"Fira Sans"</span>, <span style="font-family: lucida sans,sans-serif;">"Lucida Sans"</span>, <span style="font-family: lucida sans unicode,sans-serif;">"Lucida Sans Unicode"</span>, <span style="font-family: trebuchet ms,sans-serif;">"Trebuchet MS"</span>, <span style="font-family: liberation sans,sans-serif;">"Liberation Sans"</span>, <span style="font-family: nimbus sans l,sans-serif;">"Nimbus Sans L"</span>, <span style="font-family: sans-serif;">sans-serif</span>.</dd>
<dt><code>monospace</code></dt>
<dd style="font-family: monospace;">All glyphs have the same fixed width.<br>
E.g. <span style="font-family: fira mono,monospace;">"Fira Mono"</span>, <span style="font-family: dejavu sans mono,monospace;">"DejaVu Sans Mono"</span>, <span style="font-family: menlo,monospace;">Menlo</span>, <span style="font-family: consolas,monospace;">Consolas</span>, <span style="font-family: liberation mono,monospace;">"Liberation Mono"</span>, <span style="font-family: monaco,monospace;">Monaco</span>, <span style="font-family: lucida console,monospace;">"Lucida Console"</span>, <span style="font-family: monospace;">monospace.</span></dd>
<dt><code>cursive</code></dt>
<dd style="font-family: 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.<br>
E.g. <span style="font-family: brush script mt,cursive;">"Brush Script MT</span>", <span style="font-family: brush script std,cursive;">"Brush Script Std</span>", <span>"Lucida Calligraphy"</span>, <span>"Lucida Handwriting"</span>, <span style="font-family: apple chancery,cursive;">"Apple Chancery"</span>, <span style="font-family: cursive;">cursive</span>.</dd>
<dt><code>fantasy</code></dt>
<dd style="font-family: fantasy;">Fantasy fonts are primarily decorative fonts that contain playful representations of characters.<br>
E.g. <span style="font-family: papyrus,fantasy;">Papyrus</span>, <span style="font-family: herculanum,fantasy;">Herculanum</span>, <span style="font-family: party let,fantasy;">Party LET</span>, <span style="font-family: curlz mt,fantasy;">Curlz MT</span>, <span style="font-family: harrington,fantasy;">Harrington</span>, <span style="font-family: fantasy;">fantasy</span>.</dd>
<dt><code>system-ui</code></dt>
<dd>Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.</dd>
</dl>
</dd>
</dl>
<h3 id="유효한_폰트_패밀리_이름">유효한 폰트 패밀리 이름</h3>
<p>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.</p>
<p>For example, the following declarations are valid:</p>
<pre class="brush:css">font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;</pre>
<p>The following declarations are <strong>invalid</strong>:</p>
<pre class="brush:css example-bad">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;</pre>
<h3 id="형식_구문">형식 구문</h3>
{{csssyntax}}
<h2 id="예제">예제</h2>
<h3 id="Some_common_font_families">Some common font families</h3>
<pre class="brush: css">.serif {
font-family: Times, Times New Roman, Georgia, serif;
}
.sansserif {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.monospace {
font-family: Lucida Console, Courier, monospace;
}
.cursive {
font-family: cursive;
}
.fantasy {
font-family: fantasy;
}
</pre>
<div class="hidden">
<pre class="syntaxbox"><div class="serif">This is an example of a serif font.</div>
<div class="sansserif">This is an example of a sans-serif font.</div>
<div class="monospace">This is an example of a monospace font.</div>
<div class="cursive">This is an example of a cursive font.</div>
<div class="fantasy">This is an example of a fantasy font.</div></pre>
</div>
<p>{{ EmbedLiveSample('Some_common_font_families','600','120') }}</p>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Fonts', '#generic-font-families', 'generic font families')}}</td>
<td>{{Spec2('CSS4 Fonts')}}</td>
<td>Adds new generic font families, specifically: <code>system-ui</code>, <code>emoji</code>, <code>math</code>, and <code>fangsong</code>.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}</td>
<td>{{Spec2('CSS3 Fonts')}}</td>
<td>No significant change</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>No significant change</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#font-family', 'font-family')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
<p>{{Compat("css.properties.font-family")}}</p>
|
