¿Tamaño de fuente fijo en Firefox?

Question

Quiero mantener el mismo tamaño de fuente de un menú de navegación para todos los navegadores.Configuré el tamaño de fuente del texto del menú de navegación en un tamaño de píxel específico.En IE esto funciona, pero no en FF.

El problema es que si una persona cambia el tamaño de fuente de su navegador, arruina por completo el diseño del menú en FF.

¿Hay alguna forma de ajustar esto para FF o no hay forma de evitarlo?Entiendo que es por accesibilidad, pero de lo contrario arruinaría el diseño y prefiero no usar imágenes en lugar de texto para el menú de navegación.

¡Gracias!

Answer 1

Tiene tres opciones:

1. Fije su diseño del menú de modo que sea más tolerante con diferentes tamaños de fuente. (Recomendado: un montón de usuarios que no estén de acuerdo con su elección de tamaño de la fuente - no sólo limitado a los usuarios con discapacidad visual tampoco)
2. Reemplazar texto con imágenes (con texto alternativo apropiado!); FF (e IE) sigue escalarán éstos en el modo de "zoom", pero no romperá el diseño de la página.
3. No hacer nada. Deja la disposición rota como un gran "FU" a aquellos usuarios que, de otro modo esforzarse para leer el texto de tamaño fijo.

Answer 2

Usted está luchando una pelea que no vas a ganar si se intenta mantener todo fijo y feliz sólo para sus ojos. Si el contenido si para el consumo por el público, entonces entender que la Sra Pública tiene diferentes opiniones en cuanto al tamaño de fuente correcta que debe estar leyendo.

Los navegadores han evolucionado mucho camino para detener lo que está tratando de hacer desde la prevención de la gente de ver el contenido.

evolucionar y entender que font-size debe cambiar con un CTRL + '+/-'

Answer 3

La única forma de garantía de tener este nivel de control es hacer que el texto como imágenes. Aunque esto puede funcionar bien para los menús (que no cambia con tanta frecuencia), lo he visto terriblemente abusado por los sitios donde todo el texto se hizo como imágenes.

Tengo un buen amigo que fue entrenado como un diseñador de impresión. Cuando comenzó a hacer el diseño web que casi la hizo volverse loco debido a la falta de control. Le sugerí que respirar profundamente, estudiar el modelo de caja CSS, y luego diseñar para el tamaño de la fuente "normal" +/- 1 tamaño.

Answer 4

El problema no es que alguien es el zoom, el cliente quería así y es como si quisiera, el problema es que la fuente 9pt se displaing en IE 7 y 8 y chorme pero no en ff

Answer 5

Hay otra opción:

Detecte el tamaño de fuente del usuario utilizando el siguiente script: http://www.alistapart.com/articles/fontresizing/

Luego ajuste un div contenedor en "ems" para compensar el tamaño del usuario.

Por ejemplo, si el tamaño de fuente del usuario es 22 y la base es 20, haga que su div contenedor tenga un tamaño de fuente de 20/22 (es decir, 22*(20/22)=20).:)

Nota:La razón por la que necesitarías un div contenedor es porque tu detector de eventos estaría atento a los cambios de tamaño de fuente en el cuerpo.

(Esta respuesta probablemente enojará a algunos expertos en usabilidad.Lo siento por esa gente.Tienes buenos puntos, pero una respuesta sigue siendo una respuesta.:pag)

---

PD.Creo que será mejor adjuntar mi código de implementación solo para demostrar que funciona.No he editado este código para su aplicación global.Se copia y pega... busque cosas como reemplazar mi condicional de IE (que usa clases CSS agregadas dinámicamente) con condicionales de detección de navegador convencionales (por ejemplo).

Es largo pero todo necesario:

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