Cómo usar CSS para personalizar los estilos de fuente (Diseño Web)

Cómo usar CSS para personalizar los estilos de fuente (Diseño Web)

Cómo usar CSS para personalizar los estilos de fuente (Diseño Web)

VALORACIÓN DEL ARTÍCULO:
5/5


Fuentes y CSS

CSS es la manera más efectiva de ajustar las fuentes en su página web. Puede controlar la familia tipográfica, el tamaño, el color, el peso y muchos otros aspectos de la tipografía.

Las propiedades de las fuentes en CSS son una de las formas más comunes de hacer que su página sea más distintiva y única. Es fácil cambiar el color, el tamaño e incluso la cara (la fuente misma) de su texto con las propiedades de las fuentes CSS.

  • color
  • font-family
  • tamaño de fuente

Hay tres partes en una fuente:

  • teñir
    • Este es el color que la fuente mostrará en la pantalla.
  • envergadura
    • Así de grande o pequeño será el tipo de letra que se mostrará en la pantalla.
  • fisonomía
    • Esta es la familia de fuentes, a la que a menudo se hace referencia como la fuente real.

Colores de fuente

Para cambiar el color del texto, simplemente use la propiedad CSS color style. Puede utilizar nombres de colores o códigos hexadecimales. Como con todos los colores de la web, es mejor usar colores seguros para el navegador.

Pruebe los siguientes estilos en sus páginas web:

esta fuente es de color rojo
esta fuente es de color azul

Tamaños de fuente

Cuando se establece el tamaño de fuente en la web se puede establecer en tamaños relativos o ser muy específico utilizando píxeles, centímetros o pulgadas. Sin embargo, los tamaños de fuente más exactos están pensados para ser usados para impresión y no para páginas web, donde cada persona que visita su sitio web puede tener una resolución, tamaño de monitor o configuración de fuente predeterminada diferente. Por lo tanto, si elige 15px como su tamaño estándar, podría sorprenderse desagradablemente al ver qué tan grande o pequeña es la fuente que rinde a sus clientes.

Te recomiendo que uses ems para el tamaño de la fuente. Los ems permiten que su página permanezca accesible sin importar quién la esté viendo, y los ems están diseñados para renderizar la pantalla. Deje sus píxeles y puntos para el renderizado de impresión. Para cambiar el tamaño de la fuente, ponga el siguiente estilo en su página web:

esta fuente es 1em
esta fuente es.75em
esta fuente es 1.25em

Caras de fuente

La cara de tu fuente es lo que mucha gente piensa cuando piensa «fuente». Puedes declarar cualquier cara de fuente que desees, pero recuerda, si tu lector no tiene esa fuente instalada, su navegador intentará encontrar una coincidencia para ella, y su página no tendrá el aspecto que tú deseabas.

Para solucionar este problema, puede especificar una lista de nombres de caras, separados por comas, para que el navegador los utilice en orden de preferencia. Éstas se denominan pilas de fuentes. Tenga en cuenta que una fuente estándar en un PC (como Arial) puede no ser estándar en un Macintosh. Así que siempre debe ver sus páginas con una máquina mínimamente instalada (y preferiblemente en ambas plataformas) para asegurarse de que su página se vea como está diseñada, incluso con un mínimo de fuentes.

Una de mis pilas de fuentes favoritas es Esta es una colección de fuentes sans-serif y aunque ginebra y arial no se parecen mucho, ambas son bastante estándar en ordenadores Macintosh y Windows. Incluyo helvetica y helv para clientes en otros sistemas operativos como Unix o Linux que podrían no tener una biblioteca de fuentes robusta.

esta fuente es sans-serif
esta fuente es serif

TAMBIÉN TE INTERESA

nuevo mac studio

El nuevo Mac Studio es inalcanzable para cualquier PC de escritorio

Apple ha presentado su equipo de sobremesa más potente hasta la fecha: el nuevo Mac Studio, impulsado por los chips M4 Max y el nuevo M3 Ultra, una auténtica bestia orientada a profesionales de la inteligencia artificial, el diseño, la ingeniería o el desarrollo de software que buscan rendimiento extremo en un formato compacto. Vale,

camara seguridad doble lente de Beans View

Beans View tiene una cámara de seguridad de doble lente a un precio imbatible en Amazon

La seguridad inteligente del hogar da un nuevo paso con la Beans View 220 Dual 3K, la última incorporación al catálogo de la marca especializada en cámaras Wi-Fi. Este nuevo modelo, diseñado para ofrecer una vigilancia integral y precisa en espacios interiores, combina tecnología de doble lente, inteligencia artificial, visión nocturna a color y seguimiento

industria del videojuego

La industria del videojuego ya se mueve por un público muy distinto al de hace años

Durante años, el imaginario colectivo ha situado al jugador de videojuegos en el rincón oscuro de una habitación, joven, solitario, inmóvil frente a una pantalla. Esa imagen está cada vez más lejos de la realidad para la industria del videojuego. La V Radiografía del Gaming en España, elaborada por el ecommerce tecnológico PcComponentes, desmonta con

nuevos powerbanks Ewent

5 powerbanks de Ewent para cada necesidad: seguro que hay uno para ti

Las powerbanks o también llamadas baterías portátiles se han convertido en un aliado para muchas personas que hacen un uso intensivo de sus dispositivos electrónicos. Para los smartphones, estos componentes son ya una extensión de los mismos para muchas personas, sin embargo no solo existen este tipo de gadgets para teléfonos, sino que hay otros

contraseñas

¿Y si los métodos de seguridad en el futuro fueran sin contraseñas?

A pesar de los constantes avances en tecnología y ciberseguridad, los métodos de seguridad más tradicionales, es decir, las contraseñas, siguen siendo la opción predilecta por la mayoría para proteger su información o para acceder a las plataformas. No obstante, las contraseñas son actualmente uno de los grandes eslabones débiles en la protección de identidades