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

Nothing Phone (3)

Otra vez que nos deja en shock: se presenta el Nothing Phone (3)

Siempre causa mucha expectativa el lanzamiento de productos por parte de quien suele hacer las cosas diferentes. Y ese alguien en la industria de los smartphones es Nothing. Tecnonautas siempre ha seguido muy de cerca todo lo que ha salido de esta firma, simplemente por funcionar y por ser diferente al resto. Y ahora llega

Inteligencia Artificial Generativa y deporte

Inteligencia Artificial Generativa y deporte: una relación que va tomando forma…

El deporte, tradicionalmente anclado en la emoción del directo en la televisión en directo en los estadios, está entrando en una nueva era digital, profundamente influenciada por la inteligencia artificial (IA). Inteligencia Artificial Generativa y deporte están yendo de la mano y es la relación del momento para las generaciones jóvenes. Así lo concluye el

vivo X200 FE

Vivo X200 FE: fuera caretas con esta nueva gama alta

La marca vivo, siempre muy identificada con móviles accesibles, se quita la carea para presentar el nuevo vivo X200 FE, un dispositivo que busca conquistar a los usuarios que quieren rendimiento premium sin renunciar a la comodidad. Con una cámara desarrollada junto a ZEISS, batería de larga duración, una pantalla de alto nivel y un

videovigilancia camara AOV PT

La cámara AOV PT: un motivo para irse tranquilo de vacaciones

El verano es sinónimo de descanso, desconexión y viajes. Pero también de preocupación y seguro que las siglas de la cámara AOV PT ayudan a combatir ese sentimiento. Casas vacías, negocios con menos actividad y propiedades que quedan fuera del radar diario se convierten en un blanco fácil para robos o actos vandálicos. En este