HTML: fuentes

Las fuentes desempeñan un papel muy importante para hacer que un sitio web sea más fácil de usar y aumentar la legibilidad del contenido. La fuente y el color de la fuente dependen completamente de la computadora y el navegador que se esté utilizando para ver su página, pero puede usar HTMLetiqueta para agregar estilo, tamaño y color al texto de su sitio web. Puedes usar un<basefont> etiqueta para configurar todo el texto con el mismo tamaño, cara y color.

La etiqueta de fuente tiene tres atributos llamados size, colory facepara personalizar sus fuentes. Para cambiar cualquiera de los atributos de fuente en cualquier momento dentro de su página web, simplemente use la etiqueta . El texto que sigue permanecerá cambiado hasta que cierre con la etiqueta . Puede cambiar uno o todos los atributos de fuente dentro de una etiqueta .

Note−Las etiquetas de fuente y fuente base están obsoletas y se supone que se eliminarán en una versión futura de HTML. Por lo tanto, no deben usarse en su lugar, se sugiere usar estilos CSS para manipular sus fuentes. Pero aún con el propósito de aprender, este capítulo explicará en detalle las etiquetas de fuente y fuente base.

Establecer tamaño de fuente

Puede establecer el tamaño de fuente del contenido usando sizeatributo. El rango de valores aceptados es de 1 (menor) a 7 (mayor). El tamaño predeterminado de una fuente es 3.

Ejemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Size</title>
   </head>

   <body>
      <font size = "1">Font size = "1"</font><br />
      <font size = "2">Font size = "2"</font><br />
      <font size = "3">Font size = "3"</font><br />
      <font size = "4">Font size = "4"</font><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>

</html>

Esto producirá el siguiente resultado:

Tamaño de fuente relativo

Puede especificar cuántos tamaños más grandes o cuántos tamaños más pequeños que el tamaño de fuente predeterminado debe ser. Puedes especificarlo como o 

Ejemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Relative Font Size</title>
   </head>

   <body>
      <font size = "-1">Font size = "-1"</font><br />
      <font size = "+1">Font size = "+1"</font><br />
      <font size = "+2">Font size = "+2"</font><br />
      <font size = "+3">Font size = "+3"</font><br />
      <font size = "+4">Font size = "+4"</font>
   </body>

</html>

Esto producirá el siguiente resultado:

Configuración de tipo de letra

Puede establecer el tipo de fuente utilizando el atributo de rostro, pero tenga en cuenta que si el usuario que ve la página no tiene la fuente instalada, no podrá verla. En su lugar, el usuario verá la fuente predeterminada aplicable a la computadora del usuario.

Ejemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Font Face</title>
   </head>

   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>

</html>

Esto producirá el siguiente resultado:

Especificar fuentes alternativas

Un visitante solo podrá ver su fuente si tiene esa fuente instalada en su computadora. Por lo tanto, es posible especificar dos o más alternativas de tipo de letra enumerando los nombres de tipos de letra, separados por una coma.

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

Cuando se carga su página, su navegador mostrará la primera fuente disponible. Si no se instala ninguna de las fuentes indicadas, se mostrará la fuente predeterminada Times New Roman .

Note - Consulte una lista completa de HTML Standard Fonts.

Configuración del color de fuente

Puede establecer cualquier color de fuente que desee utilizando el atributo de color . Puede especificar el color que desee mediante el nombre del color o el código hexadecimal para ese color.

Note - Puede consultar una lista completa de HTML Color Name with Codes.

Ejemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Color</title>
   </head>
	
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
	
</html>

Esto producirá el siguiente resultado:

El elemento <basefont>

Se supone que el elemento <basefont> debe establecer un tamaño de fuente, color y tipo de letra predeterminados para cualquier parte del documento que no esté contenida en una etiqueta . Puede utilizar los elementos para anular la configuración de <basefont>.

La etiqueta <basefont> también toma los atributos de color, tamaño y rostro y admitirá la configuración relativa de la fuente al dar al tamaño un valor de +1 para un tamaño mayor o -2 para dos tamaños más pequeños.

Ejemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Basefont Color</title>
   </head>
	
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h2>Example of the &lt;basefont&gt; Element</h2>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>

      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>
	
</html>

Esto producirá el siguiente resultado:

↰ Previous page Next page ↱