Temario Estilos de fuentes y textos
- Estilos de Fuentes
- Como cargar fuentes (o tipografias) externas (@font-face & font-display)
- Google Fonts
- Estilos de Texto
- Iconos tipográficos vectoriales
Las siguientes propiedades tienen que ver con los estilos de la fuente:
font-variant: normal;font-variant: small-caps;font-style,
font-variant, font-weight, font-size,
line-height and font-family.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus non amet reprehenderit repellendus pariatur tempora odit aut culpa eius dicta, ad ex! Velit fugit, accusantium nisi voluptas at quo odit!
Para agregar la tipografia que uno quiera o que no se encuentre dentro de las
tipografias que por defecto cargan los sisitemas operativos podemos usar una
regla de css llamada @font-face y mandar a llamar una tipografia
externa, para ello necesitamos tener los archivo fisicos de la tipografia
descargados en nuestro equipo y dentro de la carpeta del proyecto que estamos
trabajando.
Para el navegador el tipo de archivo de la fuente tipografica debe tener el formato woff o woff2 (Web open font format), que es un formato abierto de tipografia para le web
font-display
La propiedad font-display de css nos va a decir como es que
queremos cargar una fuente personalizada y tiene los siguiente valores:
auto: Permite que el navegador utilice el metodo
predeterminado que suele ser block.
block: Oculta brevemente el texto hasta que la fuente
haya sido descargadapor completo.
swap: Indica al navegador que utilice la fuente
alternativa para mostrar el texto hasta que la fuente personalizada se haya
cargado por completo.
flaback: Es una mezcla de auto y sawp.
optional: Ocultará el texto,luego lo cargará con la
fuente alternativa y finalmente aplicarála fuente personalizada.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia, molestiae sint. Nobis, quam exercitationem! Dolor repellendus iusto explicabo soluta corrupti quas commodi dolorem beatae ratione reprehenderit incidunt doloremque, quisquam consequuntur.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, molestias? Perspiciatis reiciendis deleniti, sit ducimus vitae debitis. Dolor animi quisquam deleniti, facilis culpa ipsum voluptas beatae necessitatibus odio nisi eos.
Google fonts es un directorio interactivo de uso libre para fuentes tipograficas de la web (de la empresa Google) que son open source, por lo que no hay que pagar licencia para utilizarlas.
Enlace a Google Fonts
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam harum sequi explicabo? Aperiam, quisquam? Voluptatem, architecto amet. Excepturi quod quaerat obcaecati commodi consequuntur eveniet, ad exercitationem debitis asperiores autem? Pariatur?
Propiedades css para dar estilos el texto:
text-aling: Permite alinear el texto horizontalmente, y
su valor por defecto es left (alineado a la izquierda) pero tambien
tiene otros valores como right (derecha), center (centro),
justify (justificado), ejemplo:
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus ipsam modi esse enim aliquam assumenda cum, adipisci minus soluta perferendis repellendus, hic molestias qui debitis. Optio animi vero ullam soluta.
text-decoration: Define cómo se decora el contenido de
texto del elemento y tiene los valores none (Elimina cualquier
decoración de texto) y underline (Subrayado), ejemplo:
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus ipsam modi esse enim aliquam assumenda cum, adipisci minus soluta perferendis repellendus, hic molestias qui debitis. Optio animi vero ullam soluta.
text indent: Define la sangría (o indentación) de la
primera línea de texto del elemento y su valor tiene que ser múmerico,
ejemplo:
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus ipsam modi esse enim aliquam assumenda cum, adipisci minus soluta perferendis repellendus, hic molestias qui debitis. Optio animi vero ullam soluta.
text-overflow: Define cómo se comporta el contenido de
texto oculto si se desborda y tiene dos valores:
clip: El contenido del texto está recortado y no
es accesible.
ellipsis: El contenido desbordante se reemplaza
por puntos suspensivos :…
NOTA: Para que la propiedad overflow funcione hay que
ponerle la propiedad overflow con el valor de
hidden y adicionalemnte la propiedad
white-space con el valor de nowrap.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus ipsam modi esse enim aliquam assumenda cum, adipisci minus soluta perferendis repellendus, hic molestias qui debitis. Optio animi vero ullam soluta.
text-transform: Define cómo se debe transformar el contenido del texto, su valor por
defecto es none y tiene otros valores como:.
capitalize: Convierte la primera letra de cada
palabra en mayúscula.
uppercase: Convierte todas las letras en
mayúsculas .
lowercase: Convierte todas las letras en
minúsculas .
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus ipsam modi esse enim aliquam assumenda cum, adipisci minus soluta perferendis repellendus, hic molestias qui debitis. Optio animi vero ullam soluta.
letter-spacing: Define el espaciado entre los caracteres de un bloque de texto, es
el espaciado que va a haber entre cada letra.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus ipsam modi esse enim aliquam assumenda cum, adipisci minus soluta perferendis repellendus, hic molestias qui debitis. Optio animi vero ullam soluta.
white-space: Define cómo se maneja el espacio en blanco del elemento.
import react from "react"; import Title from"./Title"; function App{ return Title; }
word-break: Define cómo deben dividirse las palabras al
llegar al final de una línea.
word-spacing: Define el espaciado entre palabras de un
bloque de texto.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos quae doloribus aut hic, fugiat quas consequuntur quam ab sunt? Vel optio adipisci explicabo doloribus nemo aut unde reiciendis ea libero.
writing-mode: Define el modo en que se mostrara el
texto, vertical de derecha a izquierda o vertical de izquierda a derecha.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos quae doloribus aut hic, fugiat quas consequuntur quam ab sunt? Vel optio adipisci explicabo doloribus nemo aut unde reiciendis ea libero.
Para trabajar con Iconos tipograficos primero mandamos a llamar en nuestro docuemto HTML la hoja de estilos que carga la tipografia de iconos, luego vamos y selleccionamos los iconos de nuestra preferencia, obtenemos su codigo HTML y lo pegamos en nuestro documento. Entre las mas populares tipografias de iconos vectoriales encontramos tres:
Font aweson tiene una parte de sus iconos gratuitos y otra parte de pago, pero hay que registrarse para poder descarlos, para evitar eso utilizamos el CDN de Font Awesome que nos evitara el tener que registrarnos (copiamos y pegamos el primer enlace que aparece en la lista).
Enlace a Font awesome, iconos gratis.