CSS - Fuentes

Este capítulo le enseña cómo configurar las fuentes de un contenido, disponible en un elemento HTML. Puede establecer las siguientes propiedades de fuente de un elemento:

los font-family La propiedad se utiliza para cambiar la cara de una fuente.
los font-style La propiedad se utiliza para hacer una fuente en cursiva u oblicua.
los font-variant La propiedad se utiliza para crear un efecto de versalitas.
los font-weight La propiedad se utiliza para aumentar o disminuir la negrita o la luz que aparece una fuente.
los font-size La propiedad se utiliza para aumentar o disminuir el tamaño de una fuente.
los font La propiedad se utiliza como abreviatura para especificar una serie de otras propiedades de fuente.

Establecer la familia de fuentes

A continuación se muestra el ejemplo, que demuestra cómo configurar la familia de fuentes de un elemento. El valor posible podría ser cualquier nombre de familia de fuentes.

<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This text is rendered in either georgia, garamond, or the 
         default serif font depending on which font  you have at your system.
      </p>
   </body>
</html>

Esto producirá el siguiente resultado:

Establecer el estilo de fuente

A continuación se muestra el ejemplo, que demuestra cómo establecer el estilo de fuente de un elemento. Los valores posibles son normal, cursiva y oblicua .

<html>
   <head>
   </head>

   <body>
      <p style = "font-style:italic;">
         This text will be rendered in italic style
      </p>
   </body>
</html>

Esto producirá el siguiente resultado:

Establecer la variante de fuente

El siguiente ejemplo demuestra cómo establecer la variante de fuente de un elemento. Los valores posibles son normal y de pequeña capitalización .

<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:small-caps;">
         This text will be rendered as small caps
      </p>
   </body>
</html>

Esto producirá el siguiente resultado:

Establecer el grosor de la fuente

El siguiente ejemplo demuestra cómo establecer el peso de la fuente de un elemento. La propiedad font-weight proporciona la funcionalidad para especificar qué tan negrita es una fuente. Los valores posibles pueden ser normal, negrita, más negrita, más clara, 100, 200, 300, 400, 500, 600, 700, 800, 900 .

<html>
   <head>
   </head>

   <body>
      <p style = "font-weight:bold;">
         This font is bold.
      </p>
      
      <p style = "font-weight:bolder;">
         This font is bolder.
      </p>
      
      <p style = "font-weight:500;">
         This font is 500 weight.
      </p>
   </body>
</html>

Esto producirá el siguiente resultado:

Establecer el tamaño de fuente

El siguiente ejemplo demuestra cómo establecer el tamaño de fuente de un elemento. La propiedad font-size se utiliza para controlar el tamaño de las fuentes. Los valores posibles pueden ser xx-pequeño, x-pequeño, pequeño, mediano, grande, x-grande, xx-grande, más pequeño, más grande, tamaño en píxeles o en% .

<html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         This font size is 20 pixels
      </p>
      
      <p style = "font-size:small;">
         This font size is small
      </p>
      
      <p style = "font-size:large;">
         This font size is large
      </p>
   </body>
</html>

Esto producirá el siguiente resultado:

Establecer el ajuste de tamaño de fuente

El siguiente ejemplo demuestra cómo establecer el ajuste de tamaño de fuente de un elemento. Esta propiedad le permite ajustar la altura x para que las fuentes sean más legibles. El valor posible puede ser cualquier número.

<html>
   <head>
   </head>

   <body>
      <p style = "font-size-adjust:0.61;">
         This text is using a font-size-adjust value.
      </p>
   </body>
</html>

Esto producirá el siguiente resultado:

Establecer el estiramiento de fuente

El siguiente ejemplo demuestra cómo establecer la extensión de fuente de un elemento. Esta propiedad depende de que la computadora del usuario tenga una versión expandida o condensada de la fuente que se está utilizando.

Los valores posibles pueden ser normal, más ancho, más estrecho, ultracondensado, extracondensado, condensado, semicondensado, semiexpandido, expandido, extra expandido, ultra expandido .

<html>
   <head>
   </head>

   <body>
      <p style = "font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer 
         doesn't have a <br>condensed or expanded version of the font being used.
      </p>
   </body>
</html>

Esto producirá el siguiente resultado:

Propiedad de taquigrafía

Puede utilizar la propiedad de fuente para establecer todas las propiedades de fuente a la vez. Por ejemplo

<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 15px georgia;">
         Applying all the properties on the text at once.
      </p>
   </body>
</html>

Esto producirá el siguiente resultado:

↰ Previous page Next page ↱