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

Meteored

La app española Meteored es la cuarta aplicación del tiempo más vista en el mundo

En un sector dominado por líderes históricos como The Weather Channel, Accuweather y DarkSky (Apple), la española Meteored ha escalado al top 5 global de aplicaciones de meteorología, consolidándose como una alternativa de referencia a nivel mundial. Propiedad de la empresa Alpred, Meteored ha logrado este posicionamiento gracias a su compromiso con la precisión, la

ChatGPT en el trabajo

Cosas que sí y cosas que no le puedes preguntar a ChatGPT en el trabajo

La inteligencia artificial está transformando los departamentos de Recursos Humanos al ofrecer herramientas innovadoras que optimizan procesos, aumentan la eficiencia y brindan información útil para la toma de decisiones. Sin embargo, este cambio también plantea desafíos en cuanto a su correcta implementación y a los límites éticos y operativos. El uso de ChatGPT en el

inteligencia artificial Zoo Aquarium de Madrid

Esta es la forma en la que ha llegado la IA al Zoo Aquarium de Madrid

Hasta en lugares insospechados como el Zoo Aquarium de Madrid está llegando la inteligencia artificial… Pero no, no se trata de animales. Ni tampoco como una forma de gestión administrativa a nivel interno. El proyecto más destacado de este entorno es una cuidadora inteligente de animales presentada como un avatar que es capaz de interactuar