Tamanho da fonte em CSS -% ou eles?

Question

Ao definir o tamanho das fontes em CSS, eu deveria estar usando um valor percentual (%) ou em? Você pode explicar a vantagem?

Answer 1

Há um artigo muito bom na web tipografia em A List Apart .

A sua conclusão:

texto Dimensionamento e line-height em ems, com uma percentagem especificada no corpo (e um opcional para ressalva Safari 2), foi mostrado para fornecer precisas, texto redimensionável em todos navegadores em uso comum hoje. Isto é uma técnica que você pode colocar no seu kit saco e uso como uma das melhores práticas para dimensionamento de texto em CSS que satisfaça tanto designers e leitores.

Answer 2

A partir http://archivist.incutio.com/viewlist/css-discuss/1408

%: Alguns navegadores não controla por cento para font-size, mas interpreta 150% como 150 pixels. (Algumas versões NH4, por exemplo.) IE também tem problemas com por cento em elementos aninhados. isto Parece IE usa por cento em relação ao janela, em vez da relação elemento pai. Ainda um outro problema (Embora, de acordo correcta para o W3C specs), em Moz / NS6, você não pode usar por cento em relação aos elementos com nenhuma altura especificada / largura.

em: Às vezes navegadores usar o errado tamanho de referência, mas a relação de unidades é o único com menos problemas. Você pode encontrá-lo interpretados como px às vezes embora.

pt: difere muito entre resoluções, e não deve ser utilizado para exibição. É muito seguro para imprimir utilização apesar de tudo.

px: A unidade absoluta só é confiável em tela. Pode ser erroneamente interpretados de impressão, porém, como um apontar geralmente consistem de vários pixels, e assim tudo se torna ridiculamente pequeno.

Answer 3

Tanto a ajustar o tamanho da fonte em relação ao que era. 1.5em é o mesmo que 150%. A única vantagem parece ser a legibilidade, escolha a que lhe for mais confortável.

Answer 4

Tendo em conta que (quase?) Todos os navegadores agora redimensionar a página como um todo, em vez de apenas o texto, as questões anteriores com px vs. % vs. ems em termos de redimensionamento da fonte acessível são bastante discutível.

Assim, a resposta é que ele provavelmente não importa. Use o que funciona para você.

% é bom porque permite redimensionamento relativo.

px é bom porque é bastante fácil de gerenciar as expectativas quando usá-lo.

em pode ser útil quando usado também para elementos de layout como ele pode permitir que para o dimensionamento proporcional relacionado com o tamanho do texto.

Answer 5

A verdadeira diferença vem aparente quando você usá-lo não para font-tamanhos. Definir um padding de 1em não é o mesmo que 100%. em é sempre relativa ao font-size. Mas % pode ser relativo ao tamanho da fonte, largura, altura e provavelmente algumas outras coisas que eu não sei sobre.

Answer 6

Com relação à diferença entre o % unidades css e em.

Tanto quanto eu entendo (pelo menos teoricamente / conceitualmente, mas possivelmente não como essas duas unidades pode ser implementado em navegadores) estas duas unidades são equivalentes, ou seja, se você multiplicar o seu valor em com 100 e substitua em com %-lo deve ser a mesma coisa?

Se há realmente alguma diferença real entre eles e%, em seguida, alguém pode explicar isso (ou fornecer um link para uma explicação)?

(eu queria acrescentar este comentário meu, onde ele iria pertencer, ou seja recuado logo abaixo a resposta por "Liam, answered Sep 25 '08 at 11:21" desde que eu também quero saber por que sua resposta foi downvoted, mas eu não conseguia descobrir como colocar o meu comentário lá e portanto, tinha que escrever este "fio global" resposta)

Answer 7

Como Galwegian menciona, px é o mais confiável para a tipografia da web, como tudo que você faz na página é em grande parte definidos em referência a um monitor de computador. O problema com tamanhos absoluta é que alguns navegadores (IE) não elementos de pixel de valor escala em uma página da web, então quando você tentar zoom in / out, tudo ajustes, exceto para aqueles elementos.

Eu não sei se IE8 lida com isso corretamente, mas todos os outros fabricantes de navegadores lidar com pixels muito bem e ainda é um caso de minoria, onde um usuário precisa para ampliar texto diminuir (esta caixa de texto no SO sendo talvez a exceção) /. Se você quiser ficar realmente sujo, você pode sempre adicionar uma função javascript para fazer o seu tamanho do texto maior e oferecer um botão de "pequeno" / "maior" para o usuário.

Answer 8

Yahoo usuário biblioteca de Interface ( http://developer.yahoo.com/yui/ ) tem um bom conjunto de classes base css usados ??para "redefinir" as configurações específicas do navegador de modo que a base para exibir o site é o mesmo para todos os navegadores (suportado).

Com YUI é suposto porcentagens de uso.