¿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. |
