Embedded Files
Diferencia entre Fuentes Serif y Sans-serif
Diferencia entre Fuentes Serif y Sans-serif
En las pantallas de ordenador, fuentes sans serif que se consideran más fáciles de leer que las fuentes serif.
Familias CSS Font
Familias CSS Font
En CSS, hay dos tipos de nombres de familias de fuentes:
- familia genérica - un grupo de familias de fuentes con un aspecto similar (como "Serif" o "Fuente de ancho fijo")
- Familia tipográfica - una familia de fuentes específicas (como "Times New Roman" o "Arial")
Familia de fuentes
Familia de fuentes
La familia de fuentes de un texto se establece con la propiedad font-family.
La propiedad font-family debe contener varios nombres de fuente como un sistema de "retorno". Si el navegador no es compatible con la primera fuente, que trata la siguiente fuente.
Comience con la fuente que desee, y terminar con una familia genérica, para que el navegador elija una fuente similar en la familia genérica, si no hay otras fuentes disponibles.
Nota : Si el nombre de una familia de fuentes es más que una palabra, debe ser entre comillas, como font-family: "Times New Roman".
Más de una familia de la fuente se especifica en una lista separada por comas:
Ejemplo
Ejemplo
p {font-family: "Times New Roman", Times, serif;}
Para combinaciones de fuentes más comúnmente utilizados, visita nuestra Web Safe Font Combinaciones .
Estilo de fuente
Estilo de fuente
La propiedad font-style se utiliza sobre todo para especificar el texto en cursiva.
Esta propiedad tiene tres valores:
- normales - El texto se muestra normalmente
- cursiva - El texto se muestra en cursiva
- oblicua - El texto se "inclina" (oblicua es muy similar a cursiva, pero menos compatible)
Ejemplo
Ejemplo
p.normal {font-style: normal;}
p.italic {font-style: italic;}
p.oblique {font-style: oblique;}
Tamaño de la Fuente
Tamaño de la Fuente
La propiedad font-size establece el tamaño del texto.
Ser capaz de gestionar el tamaño del texto es importante en el diseño web. Sin embargo, usted no debe utilizar los ajustes de tamaño de fuente para que los puntos se parecen a las partidas, o en las partidas parecen párrafos.
Utilice siempre las etiquetas HTML adecuadas, como <h1> - <h6> para los títulos y <p> para los párrafos.
El valor de font-size puede ser un tamaño absoluto o relativo.
Tamaño absoluto:
- Establece el texto a un tamaño especificado
- No permite al usuario cambiar el tamaño del texto en todos los navegadores (mala por razones de accesibilidad)
- Tamaño absoluto es útil cuando se conoce el tamaño físico de la salida
Tamaño relativo:
- Establece el tamaño en relación con los elementos que rodean
- Permite a un usuario cambiar el tamaño del texto en los navegadores
Si no se especifica un tamaño de fuente, el tamaño predeterminado para el texto normal, como párrafos, es 16px (16px = 1 em).
Establecer Tamaño de fuente Con Píxeles
Establecer Tamaño de fuente Con Píxeles
Ajustar el tamaño del texto con píxeles le da un control total sobre el tamaño del texto:
Ejemplo
Ejemplo
h1 {font-size: 40px;}
h2 {font-size: 30px;}
p {font-size: 14px;}
El ejemplo anterior permite que Internet Explorer 9, Firefox, Chrome, Opera y Safari para cambiar el tamaño del texto.
Nota: El ejemplo anterior no funciona en IE, la versión previa 9.
El texto se puede cambiar de tamaño en todos los navegadores que utilizan la herramienta de zoom (sin embargo, esto cambia el tamaño de la página entera, no sólo el texto).
Establecer Tamaño de fuente Con Em
Establecer Tamaño de fuente Con Em
Para evitar el problema de cambio de tamaño con versiones anteriores de Internet Explorer, muchos desarrolladores utilizan em en lugar de píxeles.
El tamaño de la unidad em es recomendado por el W3C.
1em es igual al tamaño de fuente actual. El tamaño de texto por defecto en los navegadores es 16px. Así, el tamaño predeterminado de 1em es 16px.
El tamaño se puede calcular a partir de píxeles a em utilizando esta fórmula: píxeles / 16 = em
Ejemplo
Ejemplo
h1 {font-size: 2.5em;} / * 40px / 16 = 2.5em * /
h2 {font-size: 1.875em;} / * 30px / 16 = 1.875em * /
p {font-size: 0.875em;} / * 14px / 16 = 0.875em * /
En el ejemplo anterior, el tamaño del texto en em es el mismo que el ejemplo anterior en píxeles. Sin embargo, con el tamaño de ellos, es posible ajustar el tamaño del texto en todos los navegadores.
Por desgracia, todavía hay un problema con las versiones antiguas de IE. El texto se hace más grande de lo que debería cuando se hace más grande, y más pequeño de lo que debería cuando se hace más pequeño.
Use una combinación de Porcentaje y Em
Use una combinación de Porcentaje y Em
La solución que funciona en todos los navegadores, es establecer un tamaño de fuente por defecto en porcentaje para el elemento <body>:
Ejemplo
Ejemplo
body {font-size: 100%;}
h1 {font-size: 2.5em;}
h2 {font-size: 1.875em;}
p {font-size: 0.875em;}
Nuestro código ahora funciona muy bien! Se muestra el mismo tamaño de texto en todos los navegadores, y permite que todos los navegadores para zoom o cambiar el tamaño del texto!
Más ejemplos
Más ejemplos
Establezca la audacia de la fuente
En este ejemplo se muestra cómo establecer la audacia de una fuente.
Establezca la variante de la fuente
Este ejemplo muestra cómo establecer la variante de una fuente.
Todas las propiedades de la fuente en una declaración
este ejemplo se muestra cómo utilizar la propiedad abreviada para establecer todas las propiedades de la fuente en una declaración.
Todas las propiedades de fuente CSS
Todas las propiedades de fuente CSS
Page updated
Report abuse