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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
|
---
title: src
slug: Web/CSS/@font-face/src
tags:
- Descriptor CSS
- Fuentes CSS
- Referencia
translation_of: Web/CSS/@font-face/src
---
<div>{{CSSRef}}</div>
<p>El descriptor CSS <strong><code>src</code></strong> de la regla {{cssxref("@font-face")}} especifica el recurso que contiene a la fuente. Es requerido para que la regla <code>@font-face</code> sea válida.</p>
<p>Su valor es una lista de referencias externas o nombres de fuentes instaladas, separadas por coma según su prioridad. Cuando se necesita una fuente, el agente usuario itera sobre el conjunto de referencias, usando la primera que pueda ser activada exitosamente. Fuentes que contienen datos inválidos o fuentes locales que no se encuentren son ignoradas, y el agente usuario cargará la siguiente en la lista.</p>
<p>Al igual que con otras URLs en CSS, la URL puede ser relativa, en cuyo caso se resuelve relativamente a la ubicación de la hoja de estilos que contenga la regla <code>@font-face</code>. En caso de fuentes SVG, la URL apunta a un elemento dentro de un documento que contenga definiciones de fuentes SVG. Si se omite la referencia al elemento, se deduce que se usará la referencia a la primera fuente definida. De forma similar, formatos contenedores de fuentes que puedan contener más de una, cargarán solo una de las fuentes para una regla <code>@font-face</code>. Los identificadores de fragmentos son usados para indicar cuál fuente se cargará. Si un formato contenedor no tiene un esquema de identificadores de fragmento definido, se usará un esquema de indexado simple, con base en 1 (por ejemplo, "font-collection#1" para la primera fuente, "font-collection#2" para la segunda fuente).</p>
<p>{{cssinfo}}</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="brush: css">/* <url> values */
src: url(https://somewebsite.com/path/to/font.woff); /* absolute URL */
src: url(path/to/font.woff); /* relative URL */
src: url(path/to/font.woff) format("woff"); /* explicit format */
src: url('path/to/font.woff'); /* quoted URL */
src: url(path/to/svgfont.svg#example); /* fragment identifying font */
/* <font-face-name> values */
src: local(font); /* unquoted name */
src: local(some font); /* name containing space */
src: local("font"); /* quoted name */
/* Multiple items */
src: local(font), url(path/to/font.svg) format("svg"),
url(path/to/font.woff) format("woff"),
url(path/to/font.ttf) format("opentype");
</pre>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code><url> [ <span id="format()">format( <string># )</span> ]?</code></dt>
<dd>Especifica una referencia externa que consiste en una URL seguida por un indicador opcional que describe el formato del recurso referenciado por esa URL. El indicador de formato contiene una lista de textos de formato, separados por coma, que denota formatos de fuente conocidos. Si un agente usuario no soporta los formatos especificados, omitirá descargar el recurso. Si no se especifican los indicadores de formato, el recurso siempre es descargado.</dd>
<dt id="local()"><code><font-face-name></code></dt>
<dd>Especifica el nombre de una fuente instalada localmente, usando la función <code>local()</code>, que identifica de forma única a una fuente dentro de una familia larga. El nombre puede ser opcionalmente encerrado en comillas.</dd>
</dl>
<h3 id="Sintaxis_formal">Sintaxis formal</h3>
{{csssyntax}}
<h2 id="Ejemplos">Ejemplos</h2>
<pre class="brush: css">@font-face {
font-family: examplefont;
src: local(Example Font), url('examplefont.woff') format("woff"),
url('examplefont.woff') format("opentype");
}
</pre>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estatus</th>
<th scope="col">Comentarios</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}</td>
<td>{{Spec2('CSS3 Fonts')}}</td>
<td>Definición inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatChrome("4.0")}}</td>
<td>12.0</td>
<td>{{CompatGeckoDesktop("1.9.1")}}</td>
<td>{{CompatIE("6.0")}}</td>
<td>{{CompatOpera("9.0")}}</td>
<td>{{CompatSafari("3.1")}}</td>
</tr>
<tr>
<td><a href="/en-US/docs/WOFF">WOFF</a></td>
<td>{{CompatChrome("5.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop("1.9.2")}}</td>
<td>{{CompatIE("9.0")}}</td>
<td>{{CompatOpera("11.1")}}</td>
<td>{{CompatSafari("5.1")}}</td>
</tr>
<tr>
<td><a href="/en-US/docs/WOFF">WOFF 2</a></td>
<td>{{CompatChrome("36.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop("35.0")}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatOpera("26.0")}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><a href="https://www.microsoft.com/typography/otspec/default.htm">TrueType</a></td>
<td>{{CompatChrome("4.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop("1.9.1")}}</td>
<td>{{CompatIE("9.0")}}</td>
<td>{{CompatOpera("10.0")}}</td>
<td>{{CompatSafari("3.1")}}</td>
</tr>
<tr>
<td><a href="https://www.microsoft.com/typography/otspec/default.htm">OpenType</a></td>
<td>{{CompatChrome("4.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop("1.9.1")}}</td>
<td>{{CompatIE("9.0")}}</td>
<td>{{CompatOpera("10.0")}}</td>
<td>{{CompatSafari("3.1")}}</td>
</tr>
<tr>
<td><a href="https://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded OpenType</a></td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatIE("6.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/SVG/Tutorial/SVG_fonts">SVG Font</a></td>
<td>{{CompatChrome("4.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}<sup>[2]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatOpera("9.0")}}</td>
<td>{{CompatSafari("3.2")}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mini</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatAndroid("2.2")}}</td>
<td>{{CompatGeckoMobile("1.9.1")}}</td>
<td>{{CompatIE("10.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatOpera("12.0")}}</td>
<td>{{CompatSafari("3.1")}}</td>
</tr>
<tr>
<td><a href="/en-US/docs/WOFF">WOFF</a></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><a href="/en-US/docs/WOFF">WOFF 2</a></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><a href="https://www.microsoft.com/typography/otspec/default.htm">TrueType</a></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><a href="https://www.microsoft.com/typography/otspec/default.htm">OpenType</a></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><a href="https://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded OpenType</a></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/SVG/Tutorial/SVG_fonts">SVG Font</a></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Esta característica está implementada bajo la preferencia <code>gfx.downloadable_fonts.woff2.enabled</code>, inicialmente con valor predeterminado de <code>false</code>. A partir de Gecko 39.0 {{geckoRelease("39.0")}}, esta preferencia tiene valor predeterminado de <code>true</code>.</p>
<p>[2] Esta característica aun no está implementada. Véase {{bug("119490")}}.</p>
|
