Esta página contém instruções sobre como alterar uma fonte e sua cor em uma página da web. Com a introdução do HTML5, a maneira correta de configurar fontes da página da web é usar as Cascading Style Sheets. O método antigo, de usar um atributo de estilo embutido ou uma marca de fonte, foi preterido e não deve mais ser usado.
Nota
Embora os métodos descontinuados ainda possam ser renderizados corretamente nos navegadores modernos da Internet, eles não são mais garantidos. Para criar páginas da web exibidas corretamente para o número máximo de usuários, use os métodos CSS descritos nesta página.
Nota
Se você estiver procurando ajuda para personalizar a aparência da fonte em um documento do Microsoft Word, veja como alterar a cor, o tamanho ou a fonte da fonte no Word.
Usando CSS para um único aplicativo
Se você planeja alterar a face da fonte e sua cor apenas uma vez em uma página da web, configure seus atributos na tag do elemento. Usando o atributo style, você pode especificar a face e a cor da fonte com a família de fontes, a cor e o tamanho da fonte com o tamanho da fonte, conforme mostrado no exemplo abaixo.
Código de exemplo
Este texto tem a fonte Courier, é azul e 20 px.
Resultado
Este texto tem a fonte Courier, é azul e 20 px de tamanho.
Usando CSS para uma ou mais páginas
Fonte personalizada para uma página
Na parte principal 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, mudaria sua fonte para Courier e a coloria de vermelho. Como você pode ver, definimos o nome da classe como "personalizado".
.custom {font-family: Courier; cor: vermelho; 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
Toda essa frase é vermelha e Courier
Somente a palavra teste é vermelha e Courier.
Resultado
Esta frase inteira é vermelha e Courier.
Somente a palavra teste é vermelha e Courier.
Fonte personalizada para muitas páginas
A importação de um arquivo CSS externo pode ser muito benéfica, pois permite que os usuários alterem as regras de 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. Esse arquivo pode ser carregado em mais de uma página da web, mesmo em um site inteiro.
Usando qualquer editor de texto básico, salvar o seguinte texto como um arquivo.css o preparará para importação.
@charset "utf-8";
.courier {família de fontes: Courier; cor: # 005CB9; }
Depois que o texto anterior for colocado em um arquivo.css (chamamos nosso de basic.css), você poderá vinculá-lo a partir de qualquer outra página usando uma linha semelhante ao exemplo a seguir.
Gorjeta
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 preterido, o HTMLtag ainda pode ser usado e pode ser necessário para ser usado com alguns serviços online. 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.