No passado, modificar a fonte de uma página web geralmente significava aninhar texto relevante na tag <tag> e usar atributos para controlar sua cor, tamanho e estilo. Hoje, essa abordagem não é mais reconhecida porque mistura estilo visual com marcação de conteúdo real. Hoje recomendamos o método de concentrar informações de estilo de fonte em um arquivo separado chamado Cascading Style Sheet (CSS).
Concentrar informações de fontes em um único arquivo CSS tem muitas vantagens óbvias: é fácil de operar, não requer nenhum software especial e funciona uniformemente na maioria dos principais navegadores. Além do mais, como as informações estão centralizadas em um único local, é fácil modificar a aparência visual de uma página web: você pode simplesmente alterar a fonte ou a cor da folha de estilo principal e as alterações serão instantaneamente "em cascata" por todo o seu site. site.
Parece divertido, certo? Portanto, continue lendo porque neste artigo discutirei a propriedade CSS font, que foi projetada para substituir o antigo elemento <font>. Se você precisar de controle centralizado sobre a fonte, cor, tamanho do texto e espaçamento de sua página HTML, é. Uma ferramenta poderosa para aproveitar.
tipo de controle
O atributo font define a fonte usada pelo elemento correspondente. Essa propriedade geralmente contém uma lista separada por vírgulas de nomes de fontes contendo espaços em branco que podem ser colocados entre aspas. Quando aplicado, o navegador usará a primeira fonte encontrada na lista ou a fonte padrão do navegador se nenhuma fonte válida for encontrada.
A Listagem A é um exemplo de aplicação desta instrução:
Lista A
<html> <cabeça> <style type="texto/css"> .citar { família de fontes: "Bookman Old Style", "Verdana"; } </estilo> </head> <corpo> <div class="quote">Ser ou não ser, eis a questão.</div> </body> </html> |
A Figura A mostra a saída.
Figura A
Família_de_fontes
É importante lembrar que esta diretiva é muito dependente das fontes exibidas pelo sistema cliente no exemplo acima, caso o sistema não exiba as fontes Bookman Old Style e Verdana, será utilizada a fonte padrão do navegador; Para evitar esse problema, é melhor adicionar uma lista de nomes de fontes genéricas, como serif, sans-serif ou cursiva, após a lista de nomes de fontes especiais. Isso informa ao navegador para usar a fonte que melhor corresponde nessa classe de fonte; . A Listagem B é uma versão revisada do exemplo acima que resolve exatamente o problema acima.
Lista B
<html> <cabeça> <style type="texto/css"> .citar { família de fontes: "Bookman Old Style", "Verdana", "cursiva"; } </estilo> </head> <corpo> <div class="quote">Ser ou não ser, eis a questão.</div> </body> </html> |