From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/@font-face/index.html | 162 +++++++++++++++++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 files/es/web/css/@font-face/index.html (limited to 'files/es/web/css/@font-face/index.html') diff --git a/files/es/web/css/@font-face/index.html b/files/es/web/css/@font-face/index.html new file mode 100644 index 0000000000..b00594d694 --- /dev/null +++ b/files/es/web/css/@font-face/index.html @@ -0,0 +1,162 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +translation_of: Web/CSS/@font-face +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

@font-face permite al autor especificar fuentes online para visualizar en sus páginas web. Al permitir a los autores proporcionar sus propias fuentes, @font-face elimina la necesidad de depender del numero limitado de fuentes de usuarios instaladas en sus computadoras.

+ +

Sintaxis

+ +
@font-face {
+  font-family: <un-nombre-de-fuente-remota>;
+  src: <origen> [,<origen>]*;
+  [font-weight: <peso>];
+  [font-style: <estilo>];
+}
+
+ +

Valores

+ +
+
<un-nombre-de-fuente-remota> 
+
Especifica el nombre de una fuente que será utilizada como valor de font face por las propiedades de fuente.
+
<origen> 
+
Dirección URL para la ubicación remota del archivo de fuente, o el nombre de una fuente en la computadora del usuario en la forma local("Nombre de Fuente").
+
<peso> 
+
Un valor de peso/grosor de fuente.
+
<estilo> 
+
Un valor de estilo de fuente.
+
+ +

Puede especificar una fuente por nombre en la computadora local del usuario utilizando la sintaxis local(). Si esa fuente no es encontrada, se intentarán otros orígenes hasta encontrar una fuente.

+ +

Formatos de fuentes soportados

+ + + +

Ejemplos

+ +

Este ejemplo simplemente especifica una fuente que puede ser descargada para utilizar, aplicando la fuente a todo el cuerpo del documento.

+ +

Muestra en vivo

+ +
<html>
+<head>
+  <title>Web Font Sample</title>
+  <style type="text/css" media="screen, print">
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  </style>
+</head>
+<body>
+  This is Bitstream Vera Serif Bold.
+</body>
+</html>
+
+ +

En este ejemplo, es utilizada la copia local de "Helvetica Neue Bold" del usuario; si el usuario no tiene esa fuente instalada (se prueban dos nombre distintos), luego la fuente descargable de nombre "MgOpenModernaBold.ttf" es utilizada en cambio:

+ +
@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+  local("HelveticaNeue-Bold"),
+  url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+
+ +

Notas

+ + + +

Compatibilidad del navegador

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Chrome (WebKit)4 (532.5)Solo fuentes TrueType y OpenType
6 (534.3)Web Open Font Format (WOFF) soporte agregado
Opera10.0Solo fuentes TrueType y OpenType
Safari (WebKit)3.1 (525.6)Solo fuentes TrueType y OpenType
NavegadorVersión desdeSoporte de
Internet Explorer4.0Solo fuentes OpenType embebidas
Internet Explorer9.0 Preview 3Web Open Font Format (WOFF) soporte agregado
Firefox (Gecko)3.5 (1.9.1)Solo fuentes TrueType y OpenType
3.6 (1.9.2)Web Open Font Format (WOFF) soporte agregado
+ +

Vea también MSDN Microsoft library @font-face.

+ +

Especificaciones

+ + + +

Vea también

+ + -- cgit v1.2.3-54-g00ecf