A fin de agregar variedades de diseños a la presentación
de textos, aplicaremos la familia de fuentes del lenguaje CSS en el diseño de
páginas web, según las necesidades
del programa. La asignación incorrecta de
estilos a los textos da como resultado visualizaciones desorganizadas y
usuarios inconformes. Por este motivo, especificaremos tipos, tamaños, grosor y
posiciones de textos, en documentos CSS.
Cuando creamos páginas web y necesitamos diferenciar una
información de otra, es posible modificar el color. Sin embargo, también existe
la posibilidad de cambiar el formato de las letras, lo cual aporta un beneficio
adicional al diseño de proyectos destinados a internet. Existe una gran
variedad de formatos para textos, algunos de los cuales observamos en la
siguiente ilustración.
061-01_0605_ilu01. Diferentes estilos de
fuentes
A fin de asignar estilo a un
texto, especificamos la propiedad con la palabra font, para representar la fuente. Luego, al agregarle:
- Family: se modifican los diferentes tipos de fuentes; por ejemplo, arial, calibri, entre otros.
- Size: se modifica el tamaño
del texto.
- Weight: se modifica el grosor de, texto; por ejemplo, negritas.
- Style: se modifica la posición del texto; por ejemplo, cursivas.
- Variant: se modifica el tamaño entre letras mayúsculas y minúsculas.
061-01_0605_ilu02. Significado de los estilos
de fuentes
Font-family
El estilo font-family tiene diversidades de tipos de textos para agregar a un
documento CSS; por ejemplo, arial, comic sans ms y broadway. Para tener una
idea de los tipos de estilos antes de aplicarlos, en el editor de texto Word se
encuentran todos. Además, es necesario tener precaución al momento de
utilizarlos, debido al soporte parcial de algunos navegadores web con los tipos de fuentes
disponibles. Es posible agregar varios estilos similares separados por comas; de
esta forma, el navegador muestra el diseño soportado.
061-01_0605_ilu03. Código CSS con estilo font-family
Font-weight
El estilo font-weight tiene diferentes valores posibles, los cuales encontramos
en el estándar oficial de CSS. En la ilustración, se define bolder para un grosor mayor a la negrita;
lighter, para un grosor ligero en el
bloque de texto del centro; y se tienen nueve valores numéricos disponibles, los
cuales van desde 100 hasta 900.
061-01_0605_ilu04. Código CSS con estilo font-weight
Font-variant
El estilo font-variant tiene tres tipos de valores, con variantes de capas en
el texto, los cuales verificamos mediante el navegador web, donde existe una diferencia en la presentación entre
mayúsculas y minúsculas, aunque todas tengan la misma familia de fuente.
061-01_0605_ilu05. Código CSS con estilo font-variant
Keynotes
- Cuando creamos páginas web y necesitamos diferenciar una información de otra, es posible modificar
el color. Sin embargo, también existe la posibilidad de cambiar el formato de
las letras, lo cual aporta un beneficio adicional al diseño de proyectos
destinados a internet.
- A fin de asignar estilo a un texto, especificamos
la propiedad con la palabra font,
para representar la fuente.
- El estilo font-family tiene diversidades de tipos de textos para agregar a un
documento CSS; por ejemplo, arial, comic sans ms y broadway.
- El estilo font-weight tiene diferentes valores posibles, los cuales encontramos
en el estándar oficial de CSS.
- El estilo font-variant tiene tres tipos de valores, con variantes de capas en
el texto, los cuales verificamos mediante el navegador web, donde existe una diferencia en la presentación entre
mayúsculas y minúsculas, aunque todas tengan la misma familia de fuente.
RetoAplica cuatro familias de fuentes CSS diferentes en
un documento. Es indispensable seguir
la recomendación oficial de este lenguaje.
¡Comparte el resultado de tu reto en vKontact y pide a tus compañeros
comentar criterios de evaluación!
Tiempo disponible: entre 15 y 30 minutos.
CierreCon la aplicación de la familia de
fuentes CSS, asignamos correctamente estilos a los textos y, de este modo,
obtendremos como resultado visualizaciones organizadas y usuarios conformes. Además,
dominamos una variedad de diseños proporcionados por este lenguaje. La
paciencia y la disposición son determinantes al momento del diseño de textos.
