Fuentes web CSS3 | TIEngranaje

¿Quieres mejorar el estilo visual de tu sitio web? Entonces es tiempo de que explores las impresionantes características de CSS3. Además, te presentamos las mejores fuentes web que puedes utilizar para darle un toque de elegancia a tus textos online. ¡Descubre cómo hacerlo con TIEngranaje!

Antes de CSS3, los desarrolladores web básicamente se vieron obligados a usar fuentes que ya estaban instaladas en la computadora del visitante. Los desarrolladores web normalmente elegirían al menos dos de las fuentes más comúnmente instaladas para asegurar que su página web se mostraría según lo previsto.

Ahora con CSS3los desarrolladores web pueden usar cualquier fuente, y tenga la seguridad de que la fuente se mostrará según lo previsto. Algunas fuentes se pueden descargar libremente de Internet con acuerdos de licencia flexibles, mientras que otras se pueden comprar.

Una vez que obtenga los archivos de fuentes, simplemente incluir los archivos de fuente en su servidor web, y serán descargado automáticamente a la computadora del visitante según sea necesario. Estas “fuentes web” se definen con el @font-face regla.

Regla @font-face

Los archivos de fuentes deben ser almacenado en su servidor web para que sus visitantes puedan descargar los archivos. Dependiendo del navegadorse necesitarán diferentes tipos de archivos.

Por ejemplo, Firefox, Chrome, Safari y Opera admiten fuentes True Type .ttfy fuentes OpenType .otf. Internet Explorer 9+ admite fuentes OpenType integradas .eot. Internet Explorer 8 y versiones anteriores no admiten el @font-face regla.

Ejemplo

Antes de que pueda incorporar una fuente web en su aplicación web usando el @font-face regla, primero debes definir un nombre para la fuente en su hoja de estilo. También debe asignarlo al archivo de fuente que se encuentra en su servidor web u otra URL.

<!DOCTYPE html>
<html>
<head>
    <style> 
        @font-face { 
            font-family: Pacifico; 
            src: url('Pacifico.ttf'),
            url('Pacifico.eot'); 
        }

        #div1 { 
            font-family: Pacifico; 
            font-size:3em;
            background-color:white;
            padding:10px 15px;
        }
    </style>
</head>
<body>
    <div id="div1">
        With CSS3, you can now incorporate many different web fonts into your web projects.
    </div>
</body>
</html>

Descriptores de fuentes

Hay varios descriptores de fuente que se pueden definir dentro del @font-face regla.

descriptor Valor Descripción
font-family name Un nombre obligatorio para la fuente.
src URL Un valor obligatorio que define la URL del archivo de fuente.
font-stretch normalcondensedultra-condensedextra-condensedsemi-condensedexpandedsemi-expandedextra-expandedultra-expanded Valores opcionales que definen cómo se debe estirar la fuente. El valor predeterminado es normal.
font-style normalitalicoblique Valores opcionales que definen cómo se debe diseñar la fuente. El valor predeterminado es normal.
font-weight normalbold100200300400500600700800900 Valores opcionales que definen la negrita de la fuente. El valor predeterminado es normal.
unicode-range unicode-range Un valor opcional que se usa para definir el rango de caracteres UNICODE que admite la fuente.

Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded

Deja un comentario