Nota: Esta página está relacionada à alteração do tipo de fonte, tamanho e cor em uma página da Web. Para o Microsoft Word, consulte a nossa página sobre como alterar a cor da fonte, tamanho ou tipo no Word .

Tamanho da fonteEste documento contém instruções sobre como alterar uma fonte e sua cor em uma página da web. A sintaxe adequada que se move para a frente é usar folhas de estilo em cascata junto com os seletores de classe ou identificação, em vez de um atributo de estilo inline ou tag de fonte, que estão obsoletos . Embora, vale ressaltar que esses dois métodos ainda funcionam com a maioria dos navegadores da Internet.

Para prosseguir, selecione o método que você gostaria de aprender ou ler cada seção.

Usando CSS para um único aplicativo

Se você planeja alterar o rosto da fonte e sua cor apenas uma vez em uma página da Web, você precisa alterar seus atributos dentro da tag do elemento . Usando o atributo style , você pode especificar o rosto e a cor da fonte com a fonte-família , a cor e o tamanho da fonte com o tamanho da fonte , conforme mostrado no exemplo abaixo.

Exemplo:

<p style=”font-family:Courier; color:Blue; font-size: 20px;”>This text has the font Courier, is Blue, and 20px.</p>

Resultado:

Este texto tem a fonte Courier, é azul e tamanho 20px.

Usando CSS para uma ou mais páginas

Fonte personalizada para uma página

Na parte principal da sua página web, você pode inserir código entre as abas <style> </ style> para alterar a aparência do texto em vários elementos. A próxima caixa azul contém um código de exemplo que, uma vez chamado, mudaria a sua fonte para o Courier e a cor vermelha. Como você pode ver, definimos o nome da classe como “personalizado”.

  <Style type = "text / css">
 .custom {
	 Font-family: Courier;
	 color: red;
	 Font-size: 20px;
 }
 </ Style>

Uma vez definido, esse estilo pode ser aplicado na maioria dos elementos da sua página, anexando a classe “custom” a eles. A caixa a seguir mostra duas linhas de código e seus respectivos resultados.

Exemplo:

<p class=”custom”>This whole sentence is red and Courier</p>

<p>Only the word <span class=”custom”>TEST</span> is red and Courier.</p>

Resultado:

Toda esta frase é vermelha e Courier

Somente a palavra TEST é vermelha e Courier.

Fonte personalizada para muitas páginas

Importar um arquivo CSS externo pode ser muito benéfico na medida em que permite aos usuários alterar regras para várias páginas ao mesmo tempo. A seção a seguir mostra um exemplo para criar um arquivo CSS básico que altera a fonte e é cor para a maioria dos elementos. Este arquivo pode ser carregado em mais de uma página da Web, mesmo em um site inteiro.

Usando qualquer editor de texto básico, salvando o seguinte texto como um arquivo .css irá prepará-lo para importar.

  @charset "utf-8"; 
  .courier {
	 Font-family: Courier;
	 color: # 005CB9;
 }

Uma vez que o texto anterior foi colocado em um arquivo .css (nós chamamos nosso basic.css ), você pode ligar para ele de qualquer outra página usando uma linha semelhante ao seguinte exemplo.

<link rel=”stylesheet” Type=”text/css” href=”http://www.example.com/basic.css”&gt;

Dica: os usuários podem alterar os atributos dos elementos em uma página alterando o código dentro do arquivo .css importado.

Solução de etiqueta de fonte

Apesar de depreciado , a marca HTML <font> ainda pode ser usada e pode ser necessária para ser usada com alguns serviços on-line. Ao usar a etiqueta FONT, você deve incluir o atributo face, que descreve a fonte a ser usada. No exemplo abaixo, estamos usando a fonte Courier e o código de cores hexadecimais # 005CB9, que é azul escuro.

Exemplo:

<font color=”#005CB9″ face=”courier” size=”5″>A special font example.</font>

Resultado:

Um exemplo de fonte especial.

Anúncios