HTML - Fontes

As fontes desempenham um papel muito importante em tornar um site mais amigável e aumentar a legibilidade do conteúdo. A face e a cor da fonte dependem inteiramente do computador e do navegador que está sendo usado para visualizar sua página, mas você pode usar HTMLtag para adicionar estilo, tamanho e cor ao texto em seu site. Você pode usar um<basefont> tag para definir todo o seu texto com o mesmo tamanho, face e cor.

A tag de fonte tem três atributos chamados size, colore facepara personalizar suas fontes. Para alterar qualquer um dos atributos de fonte a qualquer momento em sua página da web, basta usar a tag . O texto a seguir permanecerá alterado até que você feche com a tag . Você pode alterar um ou todos os atributos de fonte em uma tag .

Note−As tags font e basefont estão obsoletas e devem ser removidas em uma versão futura do HTML. Portanto, eles não devem ser usados em vez disso, é sugerido usar estilos CSS para manipular suas fontes. Mas ainda para fins de aprendizado, este capítulo explicará as tags de fonte e base em detalhes.

Definir tamanho da fonte

Você pode definir o tamanho da fonte do conteúdo usando sizeatributo. O intervalo de valores aceitos é de 1 (menor) a 7 (maior). O tamanho padrão de uma fonte é 3.

Exemplo

<!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>

Isso produzirá o seguinte resultado -

Tamanho Relativo da Fonte

Você pode especificar quantos tamanhos maiores ou quantos tamanhos menores que o tamanho da fonte predefinido deve ser. Você pode especificar como ou 

Exemplo

<!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>

Isso produzirá o seguinte resultado -

Configurando a face da fonte

Você pode definir a face da fonte usando o atributo face, mas esteja ciente de que se o usuário que estiver visualizando a página não tiver a fonte instalada, ele não poderá vê-la. Em vez disso, o usuário verá a fonte padrão aplicável ao computador do usuário.

Exemplo

<!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>

Isso produzirá o seguinte resultado -

Especifique fontes alternativas

Um visitante só poderá ver sua fonte se a tiver instalada em seu computador. Portanto, é possível especificar duas ou mais alternativas de faces de fonte listando os nomes das faces da fonte, separados por vírgula.

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

Quando sua página for carregada, o navegador exibirá a primeira fonte disponível. Se nenhuma das fontes fornecidas estiver instalada, ele exibirá a fonte padrão Times New Roman .

Note - Verifique uma lista completa de HTML Standard Fonts.

Configurando a cor da fonte

Você pode definir qualquer cor de fonte que você gosta usando o atributo de cor . Você pode especificar a cor desejada pelo nome da cor ou pelo código hexadecimal dessa cor.

Note - Você pode verificar uma lista completa de HTML Color Name with Codes.

Exemplo

<!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>

Isso produzirá o seguinte resultado -

O elemento <basefont>

O elemento <basefont> deve definir um tamanho de fonte, cor e tipo de letra padrão para qualquer parte do documento que não esteja contida em uma tag . Você pode usar os elementos para substituir as configurações <basefont>.

A tag <basefont> também aceita atributos de cor, tamanho e face e suportará a configuração de fonte relativa, dando a size um valor de +1 para um tamanho maior ou -2 para dois tamanhos menores.

Exemplo

<!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>

Isso produzirá o seguinte resultado -

↰ Previous page Next page ↱