mozilla
Los resultados de tu búsqueda

    @font-face

    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: <altura>];
      [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").
    <altura> 
    Un valor de altura 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

    • Gecko 1.9.1 (Firefox 3.5) soporta fuentes TrueType y OpenType.
    • Gecko 1.9.2 (Firefox 3.6) agrega soporte para WOFF.

    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

    • En Gecko, las fuentes web están sujetas a la restricción del mismo dominio (los archivos de fuentes deben estar en el mismo dominio que la página que los utiliza), a menos que los controles de acceso HTTP sean utilizados para relajar esta restricción.
    • Nota: Porque no hay tipos MIME definidos para fuentes TrueType, OpenType, y WOFF, el tipo MIME del archivo especificado no es considerado.
    • Cuando Gecko muestra una página que usa fuentes web, inicialmente muestra el texto que usa la mejor fuente de reserva CSS disponible en la computadora del usuario mientras espera que la fuente web termine de descargarse. Mientras cada fuente web se termina de descargar, Gecko actualiza el texto que utiliza esa fuente. Esto permite al usuario leer más rápidamente el texto en la página.

    Compatibilidad del navegador

    Chrome (WebKit) 4 (532.5) Solo fuentes TrueType y OpenType
      6 (534.3) Web Open Font Format (WOFF) soporte agregado
    Opera 10.0 Solo fuentes TrueType y OpenType
    Safari (WebKit) 3.1 (525.6) Solo fuentes TrueType y OpenType
    Navegador Versión desde Soporte de
    Internet Explorer 4.0 Solo fuentes OpenType embebidas
    Internet Explorer 9.0 Preview 3 Web 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

    Etiquetas y colaboradores del documento

    Contributors to this page: inma_610, teoli, Nuc134rB0t, ccarruitero, ozkxr
    Última actualización por: ozkxr,