Tamanho da fonte em CSS -% ou em?

112

Ao definir o tamanho das fontes em CSS, devo usar um valor percentual ( %) ou em? Você pode explicar a vantagem?

css fonts font-size

— Esteiras
fonte

1

Na minha opinião, em 2016 não há diferença entre em e%. Se eu inserir 1,2 em todos os navegadores modernos acha que usei 120% e, por exemplo, se eu usar 0,7 em todos os navegadores modernos, acha que usei 70% ... Isso é o que eu experimentei em CSS

— Mahdi Jazini

79

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

A conclusão deles:

O tamanho do texto e da altura da linha em ems, com uma porcentagem especificada no corpo (e uma advertência opcional para o Safari 2), foi mostrado para fornecer texto redimensionável e preciso em todos os navegadores de uso comum hoje. Essa é uma técnica que você pode colocar na sacola do kit e usar como prática recomendada para dimensionar texto em CSS que satisfaça designers e leitores.

— Glenn Slaven
fonte

29

Na verdade, line-heightssão melhor escritos sem nenhuma unidade. Isso é permitido pela especificação e evita completamente certas peculiaridades do navegador realmente irritantes quando se trata emde alturas de linha baseadas

— Már Örlygsson

16

Quero deixar as pessoas cientes de que este artigo é de 2007. Desde então, os navegadores modernos se tornaram mais comuns, e os navegadores modernos geralmente aumentam o zoom em vez de aumentar o tamanho da fonte como padrão. Por causa disso, 'px' se tornou mais comum e, em minha opinião, uma abordagem melhor. Claro que isso é discutível, mas eu pessoalmente encontrei problemas em projetos devido ao aninhamento de em.

— Mohag519 de

5

@ Mohag519 aninhamento deles é uma armadilha perigosa. :)

— Vishnudev K

@ Mohag519 o px não vai dar a você algo muito menor do que o pretendido com dispositivos móveis que possuem alta densidade de pixels? Não acho que queremos que nossos sites sejam exatamente como os computadores, mas superminúsculos no celular;)

— johnb003

@ johnb003 Esses dispositivos móveis têm uma proporção de pixels do dispositivo maior que 1. Por exemplo, o iPhone 4 tem uma largura de tela física de 640 px, mas aparece como 320 pixels "CSS" (DPR = 2). Portanto, o site não parece menor!

— Benjamin

14

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

%: Alguns navegadores não lidam com a porcentagem para o tamanho da fonte, mas interpretam 150% como 150px. (Algumas versões do NN4, por exemplo.) O IE também tem problemas com porcentagem em elementos aninhados. Parece que o IE usa porcentagem em relação à janela de visualização em vez de em relação ao elemento pai. Outro problema (embora correto de acordo com as especificações do W3C), no Moz / Ns6, você não pode usar porcentagem em relação a elementos sem altura / largura especificada.

em: Às vezes, os navegadores usam o tamanho de referência errado, mas das unidades relativas é o que tem menos problemas. Você pode achar que às vezes é interpretado como px.

pt: difere muito entre as resoluções e não deve ser usado para exibição. É bastante seguro para uso em impressão.

px: A única unidade absoluta confiável na tela. Pode ser mal interpretado na impressão, já que um ponto geralmente consiste em vários pixels e, portanto, tudo se torna ridiculamente pequeno.

— Galuego
fonte

Sobre a coisa do pt. Tive uma grande discussão sobre /. sobre isso (e perdido). Eu tinha o mesmo ponto de vista que você, bom saber que alguém compartilha esse pov :)

— Vincent McNabb

12

Você está realmente dizendo que alguns usuários do Netscape Navigator 4 podem não conseguir visualizar minha página corretamente se eu usar porcentagens para tamanhos de fonte?

— novato

4

A discussão citada é de 2002. Isso ainda é relevante? Há algum navegador em uso ativo com em ou% bugs?

— Beni Cherniavsky-Paskin

1

Citar bugs de 20 anos em navegadores não é uma resposta útil.

— d512

7

Ambos ajustam o tamanho da fonte em relação ao que era. 1.5em é o mesmo que 150%. A única vantagem parece ser a legibilidade, escolha aquela com a qual você se sentir mais confortável.

— Liam
fonte

Alguém pode me explicar por que isso está sendo rejeitado? É exatamente assim que entendi a diferença entre em e porcentagem. Hoje em dia não há vantagem em usar um sobre o outro. O importante é que você use um tamanho relativo a um tamanho de fonte base.

— Lee Theobald,

1

Obrigado Lee, acabei de testar isso no IE6, IE7, Firefox 3, Safari 3, Opera 9.5 e Google Chrome, todos no Windows e todos parecem iguais para mim! <p style = "font-size: 0.6em;"> isto é um teste </p> <p style = "font-size: 60%;"> isto é um teste </p>

— Liam

7

A diferença real fica aparente quando você não o usa para tamanhos de fonte. Definir um paddingde 1emnão é o mesmo que 100%. emé sempre relativo ao tamanho da fonte. Mas %pode ser relativo ao tamanho da fonte, largura, altura e provavelmente algumas outras coisas que eu não conheço.

— Björn Tantau
fonte

5

Dado que (quase?) Todos os navegadores agora redimensionam a página como um todo, em vez de apenas o texto, os problemas anteriores com pxvs. %vs. ems em termos de redimensionamento de fonte acessível são bastante discutíveis.

Portanto, a resposta é que provavelmente não importa. Use o que funcionar para você.

% é bom porque permite um redimensionamento relativo.

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

em pode ser útil quando também usado para elementos de layout, pois pode permitir o dimensionamento proporcional relacionado ao tamanho do texto.

— DA.
fonte

Resposta enganosa, especialmente para aqueles que não sabem muito sobre CSS. Desconsiderando o fato de que CSS define pixels lógicos, o que foi uma ideia terrível com base em uma decisão sem dúvida apressada de acomodar o ataque de dispositivos móveis compatíveis com CSS há uma década, os pixels ficam inteiramente a critério dos navegadores e usuários quanto ao tamanho da fonte padrão , finalmente. Além disso, agora temos proporções de tela amplamente diferentes (e nem sempre dispositivos com tela) e resoluções que variam de 240p a 2400p. Usar pixels em CSS sem JavaScript é quase inútil.

— amn

@amn bem, note que esta resposta tem 8 anos. É muito tempo no tempo da Internet. Dito isso, os pixels ainda estão bons, senão ideais. A maioria (todos?) Dos navegadores acomoda o tamanho da fonte de pixel adequadamente no dispositivo específico. Hoje, porém, eu normalmente usaria rem como minha unidade de medida.

— DA.

Talvez eu esteja faltando alguma coisa, mas qual o benefício, se houver algum, com comprimentos de pixel? Por que eles são "bons" ou "ideais"? Versus em, por exemplo. Além disso, acho que as respostas sobre SO devem se esforçar para ser atemporais - afinal, é uma base de conhecimento. Wikipedia de programação :) Como a Wikipedia é atualizada para refletir os fatos, o mesmo deve acontecer com as respostas, na minha humilde opinião.

— amn

@amn Eu não disse que eles eram ideais ou tinham algum benefício real importante. Eu estava respondendo à pergunta dos OPs. Quanto a se esforçar para ser atemporal, se você pode prever o futuro da web daqui a 8 anos, mais poder para você! Mas não tenho tempo para atualizar constantemente as minhas respostas aqui de uma década. Esperançosamente, as pessoas sabem o suficiente para olhar as marcas de tempo nas respostas e levar isso em consideração.

— DA.

0

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

Tanto quanto eu entendo (pelo menos teoricamente / conceitualmente, mas possivelmente não como essas duas unidades podem ser implementadas em navegadores) essas duas unidades são equivalentes, ou seja, se você multiplicar seu emvalor por 100e depois substituir empor %ele, deve ser a mesma coisa?

Se realmente houver alguma diferença real entre em e%, alguém pode explicá-la (ou fornecer um link para uma explicação)?

(Eu queria adicionar este meu comentário onde ele deveria pertencer, ou seja, recuado logo abaixo da resposta por, "Liam, answered Sep 25 '08 at 11:21"pois também quero saber por que sua resposta foi rejeitada, mas não consegui descobrir como colocar meu comentário lá e, portanto, tive que escrever esta resposta do "tópico global")

— user743436
fonte

-1

Como Galwegian menciona, px é o mais confiável para a tipografia da web, já que tudo o mais que você faz na página é apresentado principalmente em referência a um monitor de computador. O problema com tamanhos absolutos é que alguns navegadores (IE) não escalam elementos de valor de pixel em uma página da web, então quando você tenta aumentar / diminuir o zoom , tudo se ajusta, exceto para esses elementos.

Não sei se o IE8 lida com isso corretamente, mas todos os outros fornecedores de navegador lidam com pixels muito bem e ainda é um caso minoritário em que um usuário precisa aumentar / diminuir o texto (esta caixa de texto no SO talvez seja a exceção). Se você quiser realmente sujar, pode sempre adicionar uma função javascript para aumentar o tamanho do texto e oferecer um botão "pequeno" / "maior" ao usuário.

— Christian P.
fonte

1

O IE7 dimensiona bem os valores de pixel, se você usar o zoom. O IE6 não tinha zoom, apenas tamanho de texto. O zoom tornou-se um requisito devido aos designers que usavam escalas fixas de pixels em vez de permitir que a página reflua com alterações no tamanho do texto.

— Mike Dimmick,

Ainda é um problema com o IE6, mas, novamente, TUDO ainda é um problema com o IE6. Embora eu tenha evitado o px no passado por causa disso, o conceito de zoom da página da web como um todo (em comparação com apenas o texto) tornou-se padrão e comecei a usar o px com muito mais frequência.

— DA.

-1

A biblioteca de interface do usuário do Yahoo ( http://developer.yahoo.com/yui/ ) tem um bom conjunto de classes css básicas usadas para "redefinir" as configurações específicas do navegador para que a base para a exibição do site seja a mesma para todos (compatível) navegadores.

Com YUI, deve-se usar porcentagens.

— kosoant
fonte

Eu tenho usado a redefinição YUI, mas depois percebi que as configurações de tamanho de texto do navegador NÃO FUNCIONAM! Não vejo nenhum ponto em usar% se você tiver px definido no corpo, pois isso quebra as configurações de tamanho do texto.

— Jason