Corretta la dimensione del carattere in Firefox?

Question

Desidero mantenere la dimensione del carattere di un menu di navigazione la stessa dimensione per tutti i browser.Ho impostato la dimensione del carattere del testo del menu di navigazione su una dimensione in pixel specifica.In IE funziona, ma non in FF.

Il problema è che se una persona modifica la dimensione del carattere del proprio browser, rovina completamente il layout del menu in FF.

C'è un modo per regolarlo per FF o non c'è modo di aggirarlo?Capisco che sia per l'accessibilità, ma altrimenti rovinerebbe il design e preferirei non utilizzare immagini al posto del testo per il menu di navigazione.

Grazie!

Answer 1

Sono disponibili tre scelte:

1. Fissare il layout del menu in modo che sia più tollerante di diverse dimensioni dei caratteri. (Consigliato: un sacco di utenti che non saranno d'accordo con la vostra scelta di dimensione dei caratteri - non solo limitato per gli utenti non vedenti o)
2. Sostituire il testo con le immagini (con appropriato alt text!); FF (e IE) saranno ancora scalare questi in modalità "Zoom", ma non si rompe il layout della pagina.
3. Non fare nulla. Lasciare il layout rotto come un grande "FU" per quegli utenti che altrimenti sforzo per leggere il testo fisso di dimensioni.

Answer 2

Stai combattendo una battaglia che non stai andando a vincere se si tenta di tenere tutto fisso e felice per i vostri occhi. Se il contenuto, se per il consumo da parte del pubblico, poi capire che la signora pubblico ha opinioni diverse per quanto riguarda la dimensione del carattere corretto dovrebbe essere la lettura.

I browser sono evoluti un lungo cammino per interrompere quello che stai cercando di fare da impedire alle persone di vedere il contenuto.

evolversi e capire che font-size dovrebbe cambiare con un CTRL + '+/-'

Answer 3

Il modo garantito solo per avere questo livello di controllo è quello di rendere il testo come immagini. Anche se questo può funzionare bene per i menu (che non cambiano spesso), ho visto orribilmente abusato da siti dove tutti i testi è stato fatto come immagini.

Ho un buon amico che è stato addestrato come designer di stampa. Quando ha iniziato a fare il web design quasi la fece impazzire a causa della mancanza di controllo. Le ho suggerito di respirare profondamente, studiare il box model, e quindi progettare per le dimensioni "normali" carattere +/- 1 dimensioni.

Answer 4

Il problema non è che qualcuno è lo zoom, il cliente ha voluto così e che è come lui voleva, il problema è che tipo di carattere 9pt è displaing in IE 7 e 8 e chorme ma non in FF

Answer 5

C'è un'altra opzione:

Rileva la dimensione del carattere dell'utente utilizzando il seguente script: http://www.alistapart.com/articles/fontresizing/

Quindi regola un div del contenitore in "ems" per compensare le dimensioni dell'utente.

Ad esempio, se la dimensione del carattere dell'utente è 22 e la base è 20, imposta il div del contenitore con una dimensione del carattere di 20/22 (ovvero 22*(20/22)=20).:)

Nota:Il motivo per cui avresti bisogno di un div contenitore è perché il tuo ascoltatore di eventi farebbe attenzione alle modifiche della dimensione del carattere nel corpo.

(Questa risposta probabilmente farà incazzare alcuni esperti di usabilità.Mi dispiace per quelle persone.Hai dei buoni punti, ma una risposta è pur sempre una risposta.:P)

---

PS.Immagino che sia meglio allegare il mio codice di implementazione solo per dimostrare che funziona.Non ho modificato questo codice per l'applicazione globale.È copiato e incollato... fai attenzione a cose come la sostituzione del mio condizionale IE (che utilizza classi CSS aggiunte dinamicamente) con condizionali convenzionali di rilevamento del browser (ad esempio).

È lungo ma tutto necessario:

updateBaseFontSize : function(fontSize,reloadBool){
                /*Format 1 is fed from the plug; format2 is the body size equiv
                 *examples:
                 *Frmt 1 (all/IE) | Frmt 2 (all/IE)
                 *20/18           | 16px/16px
                 *21/21           | 17.6px/19px
                 *22/23           | 19.2px/22px
                 *
                 *Purpose of updateBaseFontSize is:
                 * 1. convert format 1 figures to format 2
                 * 2. modify the all containing div 'fontbodyreadjust'
                 *    to compensate for the new user defined body font size
                 */

                var format1Base;
                var format1Size = fontSize; //equals new size in pixels
                var reloadPage = reloadBool; //prevents reload on 1st visit

                var baseConverter;
                var changeConverter;

                if ($('body').hasClass('browserIE')) {
                    format1Base = 19; //expected base size value for IE
                    baseConverter=16/19; //converts from format 1 to 2 for IE
                    changeConverter=1.5; //ditto for the difference from base size for IE
                } else {
                    format1Base = 20;//expected base size value for all other browsers
                    baseConverter=16/20; //converts from format 1 to 2 for all others
                    changeConverter=1.6; //ditto for the difference from base size for all others
                }


                //Find modifiedSize, how much to compensate for the new body size
                var format2Base = format1Base * baseConverter;

                var format2SizeChange = (format1Size-format1Base)*changeConverter;
                var format2NewSize = format2SizeChange + format2Base;

                var modifiedSize = format2Base/format2NewSize;


                //Allow text resizing for shrinking text and very very large text
                //Only works for safari. meant to prevent odd behavior at math extremes
                if ((format2NewSize >= format2Base)&&(modifiedSize>.6)){
                    $('#fontbodyreadjust').css('font-size',modifiedSize+'em');
                }

                //reloadPage boolean in place so that reload doesn't occur on first visit
                if (reloadPage){
                    window.location.reload()
                }
    },

    initHome : function(){


        // UNHIDE HOME PAGE CONTENT AFTER IT'S LOADED. OTHERWISE, LAYERED AND MESSY
        $('#slider').css('display', 'block');


                // PREVENT VARIOUS USER BROWSER-FONT RESIZE SCENARIOS
                // Note: irrelevant for browsers that zoom all elements simultaneously
                window.initFontResizeDetector = function(){
                        var iBase = TextResizeDetector.addEventListener(onFontResize,null);

                        //Don't run the updateBaseFontSize if font size is not larger than usual
                        if (iBase>20){
                            var reloadBoolean = false;
                            window.updateBaseFontSize(iBase,reloadBoolean);
                        }
                }

                //id of element to check for and insert control
                TextResizeDetector.TARGET_ELEMENT_ID = 'bodyContent';
                //function to call once TextResizeDetector has init'd
                TextResizeDetector.USER_INIT_FUNC = window.initFontResizeDetector;

                window.onFontResize = function(e,args) {
                        var iSize = args[0].iSize; //get new user defined size
//                        var iDelta = args[0].iDelta; //get new user defined size
//                        var iBase = args[0].iBase; //get new user defined size
                        var reloadBoolean = true;
//                        console.log(iSize,iDelta,iBase);
                        window.updateBaseFontSize(iSize,reloadBoolean);
                }