Como anular o estilo definido pelas tags Font

Mesmo trabalhando somente dentro dos padroes web, algumas vezes chega um ou outro HTML feito nos moldes antigos para trabalhar o layout. E nas situacoes mais criticas, esses codigos estao tao sujos que fica impossivel controlar os estilos usando um CSS de fora. Boa parte das propriedades CSS tem uma definicao chamada Inherit, que e nada menos que pedir que o objeto absorva as propriedades do pai, ou seja, pegue as caracteristicas da tag de cima por heranca.
p { color: inherit; }
/* tag p herdara as cores do objeto de nivel maior */
Tentaremos agora anular as caracteristicas que todas as tags font usam para alterar layout de dentro do HTML.
Exemplo de codigo HTML:
<font  size="1" color="black" face="verdana">
Lorem Ipsum Sit Dolor Amet
</font>
Em um mundo perfeito e dentro dos padroes, bastaria colocar este css para anular as tags font em todos os browsers:
font {
color: inherit;
font-family: inherit;
font: inherit; /* fix para Opera, que nao aceita font-family inherit */ }
Mas como trabalhamos com browsers AND Internet Explorers, nosso trabalho tem que continuar ate que todos estejam felizes. As CSS expressions foram inseridas a partir do IE 5.0 e permitem controlar (no IE) propriedades CSS atraves de JavaScript. Vamos ver entao como ficara o codigo para IE:
font {
color: expression(this.parentNode.currentStyle['color']);
font-family: expression(this.parentNode.currentStyle['fontFamily']);
}
Para padronizar o tamanho da font, gracas a deus todos os browsers aceitam o font-size: 100% e nao teremos problemas com isso. Entao nosso fix esta pronto! Veja como ficou:
font {
color: inherit;
font-family: inherit;
font: inherit; /* fix para Opera, que nao aceita font-family inherit */
color: expression(this.parentNode.currentStyle['color']);
font-family: expression(this.parentNode.currentStyle['fontFamily']);
font-size: 100%; }
Prontinho. Agora temos liberdade completa para dar estilo as tags font do codigo! =)

Quer mais code & design? Siga-me no Twitter @richardbarros

4 comentá em “Como anular o estilo definido pelas tags Font

  1. ze 29/10/2008 12:48

    Amigo, estou com problema no meu blogue.
    Quero mostrar cdigo como e outros mas sempre que coloco no poste ele faz disso cdigo e no mostra.

    Sabe como conseguir isso?

    estou usando blogger!

    Agradeo!

    Responder

  2. Deniw 25/10/2009 01:47

    Ol, achei muito e interessante as suas dicas, principalmente sobre processos relativamente simples, que as vezes passam por despercebidos, e em muitas situaes os iniciantes aprendem coisas at mais complexas mas acabam esbarrando nas simples… gostaria de ver aqui um post explicando como trabalhar com pargrafos (espaamento entre ttulos e textos, para ser mais especfico), Houve uma situao comico onde eu no conseguia diminuir a distncia de um ttulo do restante do texto, acabei fazendo o ttulo como imagem, pra resolver… E ainda houve aquele espao no final da div depois da ltima linha de texto que no saia! Poderia exclarecer essas pequenas dvidas… obrigado!!

    Responder

  3. Vitor Melo 05/03/2010 09:35

    Adorei esse tutorial, era outra questo que sempre eu batia, conseguia herdar quase todas as fontes do seletor “body”, algumas como as do seletor “textarea” e “input[type=”text”] nunca herdavam o elemento body ou at mesmo do *. Mas com essa tcnica funcionou.

    Por que alguns atributos de fontes mesmo sendo de origem geral *, no so herdados no text-area?

    Responder

Faça um comentário

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>