Come si specificano le dimensioni dei caratteri nei CSS in modo che corrispondano ai modelli e consentano il ridimensionamento?

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

  •  03-07-2019
  •  | 
  •  

Domanda

Stiamo riscontrando problemi con il modo in cui specifichiamo le dimensioni dei caratteri. Se specifichiamo le dimensioni dei caratteri utilizzando pt, non sempre avranno lo stesso aspetto su browser / piattaforme. Se specifichiamo le dimensioni dei caratteri utilizzando px, gli utenti di IE6 non possono ridimensionare il testo.

È stato utile?

Soluzione

Un articolo su A List Apart (novembre 2007) ha approfondito questo argomento in vari modi browser e concluso:

  

Dimensionamento del testo e dell'altezza della linea in ems, con una percentuale specificata sul corpo (e un avvertimento opzionale per Safari 2), è stato mostrato per fornire testo accurato e ridimensionabile su tutti i browser di uso comune oggi. Questa è una tecnica che puoi mettere nella borsa del kit e utilizzare come best practice per il dimensionamento del testo nei CSS che soddisfa sia i designer che i lettori.

Hanno fornito schermate dell'aspetto di questa tecnica nei browser più diffusi. Ecco il codice che hanno usato: 

<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]-->

Altri suggerimenti

Contrariamente a quanto gli altri hanno risposto, non dovresti mai usare i pixel per le dimensioni dei caratteri. Internet Explorer 6 ha ancora una grande fetta della torta di mercato del browser e non ridimensionerà assolutamente il testo specificato con una dimensione in pixel (come indicato nella domanda). dovresti sempre cercare di usare " em " s.

uso una tecnica simile a quella che altri hanno suggerito qui per cui " reset " gli stili CSS su tutta la linea per rimuovere eventuali incoerenze del browser con il dimensionamento e il posizionamento dei caratteri. mi piace eric il ripristino di Meyer ricaricato gli stili come base. potresti anche usare il metodo yahoo reset css se volessi scavare nell'intera libreria.

successivamente, utilizzo il modello di tipografia css di owen briggs . potresti notare che non è stato aggiornato dal 2003 ma è ancora assolutamente solido con i browser di oggi.

una volta ottenuta questa base, è semplice cambiare la percentuale di font sul tag <body> che ridimensionerà facilmente tutti i font sul tuo sito Web allo stesso modo.

per l'impaziente, ecco il reset css di eric meyer e la tipografia css di owen briggs combinati insieme (analizzati attraverso questo eccellente formattatore css ): 

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;}

Dovresti sempre usare le unità relative per le dimensioni dei caratteri, come em.

http://developer.yahoo.com/yui/fonts/#fontsize (modifica: credo che questo assuma il loro CSS di base, ma presuppone una dimensione di base di 13px; credo che anche IE ridimensiona correttamente il testo in percentuale in cui le percentuali sono misurate rispetto a una dimensione px.)

Detto questo, non otterrai mai un dimensionamento dei caratteri perfetto per i pixel, specialmente se stai cercando di abbinare un mockup grafico, ma anche solo browser per browser, le cose differiranno nel rendering del testo.

Avrai sempre problemi ad abbinare i modelli a meno che tu non usi px. http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/ < br> Non credo che ci sia qualcosa di particolarmente sbagliato nell'usare px per le tue pagine web. Soprattutto perché quasi tutti i browser moderni, ad eccezione del webkit, utilizzano lo zoom invece del ridimensionamento del testo per impostazione predefinita.

Potrei ancora attenermi a ciò che Nathan suggerisce in quanto ti consente una maggiore agilità di progettazione, in quanto puoi ridimensionare rapidamente le dimensioni dei caratteri dell'intero sito modificandone solo uno. Ma se sei pigro o lo vuoi davvero perfetto, non devi aver paura di px.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top