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

Este documento contém instruções sobre como alterar uma fonte e sua cor em uma página da web. A sintaxe correta em andamento é usar as Folhas de estilos em cascata junto com os seletores de classe ou ID, em vez de um atributo de estilo inline ou de fonte, que são obsoletos. Embora, vale a pena notar que esses dois métodos ainda funcionam com a maioria dos navegadores da Internet.

Para continuar, selecione o método que você gostaria de aprender ou leia todas as seções.

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

Código de exemplo

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

Resultado

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

Usando CSS para uma ou mais páginas

Fonte personalizada para uma página

Na parte de cabeça da sua página da web, você pode inserir o código entre as guias para alterar a aparência do seu texto em vários elementos. A próxima caixa azul contém um código de exemplo que, uma vez chamado, alteraria a face da fonte para Courier e a cor vermelha. Como você pode ver, definimos o nome da classe como "personalizado".

 .custom {font-family: Courier; cor vermelha; tamanho da fonte: 20px; } 

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

Exemplo

Esta frase inteira é vermelha e Courier

Apenas a palavra TEST é vermelha e Courier.

Resultado

Esta frase inteira é vermelha e Courier.

Apenas a palavra TEST é vermelha e Courier.

Fonte personalizada para muitas páginas

Importar um arquivo CSS externo pode ser muito benéfico, pois permite que os usuários alterem 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 sua cor para a maioria dos elementos. Este arquivo pode ser carregado em mais de uma página da web, até mesmo em um site inteiro.

Usando qualquer editor de texto básico, salvar o texto a seguir como um arquivo .css irá prepará-lo para importação.

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

Uma vez que o texto anterior tenha sido colocado em um arquivo .css (nós nomeamos nosso basic.css ), você pode vinculá-lo a partir de qualquer outra página usando uma linha semelhante ao exemplo a seguir.

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

Solução de tag de fonte

Embora seja obsoleta, a tag HTML ainda pode ser usada e pode ser necessária para uso com alguns serviços on-line. Ao usar a tag 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 cor hexadecimal # 005CB9, que é um azul escuro.

Código de exemplo

 Um exemplo de fonte especial. 

Resultado