Como você especificar tamanhos de fonte na CSS para que eles correspondam maquetes e permitir o redimensionamento?

StackOverflow https://stackoverflow.com/questions/213128

  •  03-07-2019
  •  | 
  •  

Pergunta

Nós estamos correndo em problemas com a forma como especificar tamanhos de fonte. Se especificar os tamanhos de fonte usando pt, eles nem sempre têm a mesma aparência em todos os navegadores / plataformas. Se especificar tamanhos de fonte usando px, os usuários do IE6 não é possível redimensionar o texto.

Foi útil?

Solução

Um artigo sobre A List Apart (Novembro de 2007) explorou isso em profundidade em vários navegadores e concluiu:

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

Eles forneceram capturas de tela de como esta técnica aparência na maioria dos navegadores populares. Aqui está o código que usaram: 

<style type="text/css">`
body {
    font-size:100%;
    line-height:1.125em;
}

.bodytext p {
    font-size:0.875em;
}

.sidenote {
    font-size:0.75em;
}
</style>

<!--[if !IE]>-->

<style type="text/css">
body {
    font-size:16px;
}
</style>

<!--<[endif]-->

Outras dicas

ao contrário do que outros já respondida, você nunca deve usar pixels para tamanhos de fonte. Internet Explorer 6 ainda tem um grande pedaço da torta mercado de navegadores e absolutamente não vai redimensionar o texto que é especificado com um tamanho de pixel (como mencionado na pergunta). você deve sempre se esforçar para usar "em" s.

i usar uma técnica semelhante ao que os outros têm sugerido aqui em que eu "reset" os estilos CSS através da placa para remover quaisquer inconsistências do navegador com o dimensionamento da fonte e posicionamento. i como redefinir eric de Meyer recarregado estilos como base. você também pode usar o href="http://developer.yahoo.com/yui/reset/" rel="nofollow noreferrer"> redefinição yahoo método css

Em seguida, eu usar Owen Briggs' sane css tipografia modelo . você pode perceber que ele não foi atualizado desde 2003, mas ainda é absolutamente sólida com navegadores de hoje.

Uma vez que você começar esta base, é uma simples questão de mudar a percentagem fonte no tag <body> que facilmente dimensionar todas as fontes através de seu site da mesma forma.

para os impacientes, aqui está Reset CSS Eric Meyer e Owen Briggs' css tipografia purê juntos (analisado através de este excelente css formatador ): 

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}
:focus{outline:0;}
body{line-height:1;font-family:verdana, arial, helvetica, sans-serif;font-size:76%;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:400;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
a{text-decoration:none;font-weight:700;color:#000;}
a:hover{text-decoration:underline;}
h1{font-size:2em;font-weight:400;margin-top:0;margin-bottom:0;}
h2{font-size:1.7em;font-weight:400;margin:1.2em 0;}
h3{font-size:1.4em;font-weight:400;margin:1.2em 0;}
h4{font-size:1.2em;font-weight:700;margin:1.2em 0;}
h5{font-size:1em;font-weight:700;margin:1.2em 0;}
h6{font-size:.8em;font-weight:700;margin:1.2em 0;}
img{border:0;}
ol,ul,li{font-size:1em;line-height:1.8em;margin-top:.2em;margin-bottom:.1em;}
p{font-size:1em;line-height:1.8em;margin:1.2em 0;}
li > p{margin-top:.2em;}
pre{font-family:monospace;font-size:1em;}
strong,b{font-weight:700;}

Você deve sempre usar unidades relativas para tamanhos de fonte, como em.

http://developer.yahoo.com/yui/fonts/#fontsize (edit:. Eu acredito que este assume o seu CSS base, mas está assumindo um tamanho de base de 13px; Eu acredito mesmo IE redimensiona corretamente texto de tamanho cento-onde os percentuais são medidos contra um tamanho px)

Dito isso, você nunca vai conseguir o dimensionamento da fonte de pixel-perfect, especialmente se você está tentando combinar uma maquete gráfica, mas até mesmo navegador para navegador, as coisas serão diferentes na renderização de texto.

Você sempre vai ter maquetes correspondentes problemas a menos que você use px. http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/ < br> Eu não sinto que há nada particularmente errado com o uso px para suas páginas web. Especialmente desde que quase todos os navegadores modernos - para salvar webkit - uso de zoom em oposição ao texto-redimensionamento por padrão.

Eu ainda pode ficar com o que Nathan sugere, pois permite-lhe mais agilidade design, como você pode rapidamente dimensionar tamanhos de fonte de todo o site, alterando apenas um deles. Mas se você é preguiçoso ou quer realmente spot-on, então você não tem que ter medo de px.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top