As opções de estilo simples permitem que você altere a fonte de uma página da web usando folhas de estilo em cascata. Use CSS para definir a fonte de palavras individuais, frases específicas, títulos, parágrafos inteiros e até mesmo páginas inteiras de texto. As capturas de tela abaixo se aplicam ao playground de código JSFiddle.net, mas os conceitos descritos são verdadeiros, não importa onde seu código seja implementado.
Como alterar a fonte com CSS
Faça as alterações de HTML e CSS explicadas abaixo usando qualquer editor de HTML ou editor de texto.
-
Localize o texto em que deseja alterar a fonte. Usaremos isso como exemplo: Este texto está em Arial
-
Cerque o texto com o elemento SPAN: Este texto está em Arial
-
Adicione o atributo “ para a tag span: Este texto está em Arial
-
Dentro do atributo de estilo, altere a fonte usando o família de fontes estilo.
Este texto está em Arial
Jon Fisher
-
Salve as alterações para ver os efeitos.
Dicas para usar CSS para alterar a fonte
-
A melhor abordagem é sempre ter pelo menos duas fontes em sua pilha de fontes (a lista de fontes), de forma que, se o navegador não tiver a primeira fonte, ele possa usar a segunda fonte. Separe as opções de fontes múltiplas com uma vírgula, assim: font-family: Arial, Geneva, Helvetica, sans-serif;
-
O exemplo descrito acima usa estilo embutido, mas o melhor tipo de estilo usa uma folha de estilo externa para modificar mais do que apenas um elemento. Use uma classe para definir o estilo em blocos de texto.
Este texto está em Arial
Neste exemplo, o arquivo CSS para definir o estilo do HTML acima teria a seguinte aparência: .arial {font-family: Arial; }
Jon Fisher
-
Sempre termine os estilos CSS com um ponto e vírgula (;). Não é obrigatório quando há apenas um estilo, mas é um bom hábito para começar.
