Исправлен размер шрифта в Firefox?

Question

Я хочу, чтобы размер шрифта навигационного меню был одинаковым для всех браузеров.Я установил размер шрифта текста меню навигации на определенный размер в пикселях.В IE это работает, а в FF нет.

Проблема в том, что если человек меняет размер шрифта своего браузера, это полностью портит макет меню в FF.

Есть ли способ настроить это для FF или нет никакого способа обойти это?Я понимаю, что это сделано для доступности, но в противном случае это испортило бы дизайн, и я бы предпочел не использовать изображения вместо текста в меню навигации.

Спасибо!

Answer 1

У вас есть три варианта:

1. Исправьте макет меню так, чтобы оно было более терпимым к разным размерам шрифтов (рекомендуется:множество пользователей, которые не согласятся с вашим выбором размера шрифта (не только пользователи с нарушениями зрения).
2. Заменить текст изображениями (с соответствующим альтернативным текстом!);FF (и IE) по-прежнему будет масштабировать их в режиме масштабирования, но не нарушит макет страницы.
3. Ничего не делать.Оставьте сломанный макет большим «ФУ» для тех пользователей, которым в противном случае пришлось бы напрягаться при чтении текста фиксированного размера.

Answer 2

Вы ведете битву, в которой не выиграете, если будете стараться, чтобы все было исправлено и радовало только ваши глаза.Если контент предназначен для потребления публикой, то поймите, что г-жаУ общественности разные мнения относительно правильного размера шрифта, который ей следует читать.

Браузеры прошли долгий путь развития, чтобы помешать тому, что вы пытаетесь сделать, не мешать людям видеть контент.

Развивайтесь и поймите, что размер шрифта ДОЛЖЕН меняться с помощью CTRL + '+/-'

Answer 3

Единственный гарантированный способ получить такой уровень контроля — это отобразить текст в виде изображений.Хотя это может работать нормально для меню (которые меняются не так часто), я видел, как этим ужасно злоупотребляют сайты, где весь текст было сделано в виде изображений.

У меня есть хороший друг, который учился на полиграфиста.Когда она впервые начала заниматься веб-дизайном, она чуть не сошла с ума из-за отсутствия контроля.Я предложил ей глубоко вздохнуть, изучить блочную модель CSS, а затем разработать дизайн для «нормального» размера шрифта +/- 1 размер.

Answer 4

Проблема не в том, что кто-то масштабирует, клиент так хотел и так и есть, проблема в том, что шрифт 9pt отображается в т.е. 7 и 8 и chorme, а в ff нет.

Answer 5

Есть еще один вариант:

Определите размер шрифта пользователя, используя следующий скрипт: http://www.alistapart.com/articles/fontresizing/

Затем настройте контейнер div в «ems», чтобы компенсировать размер пользователя.

Например, если размер пользовательского шрифта равен 22, а базовый размер — 20, тогда размер шрифта вашего контейнера будет равен 20/22 (т. е. 22*(20/22)=20).:)

Примечание:Причина, по которой вам понадобится контейнер div, заключается в том, что ваш прослушиватель событий будет следить за изменениями размера шрифта в теле.

(Этот ответ, вероятно, разозлит некоторых экспертов по юзабилити.Извините этих людей.У вас есть хорошие стороны, но ответ остается ответом.:п)

---

ПС.Я полагаю, что лучше всего приложить свой код реализации, чтобы доказать, что он работает.Я не редактировал этот код для глобального применения.Он скопирован и вставлен... обратите внимание на такие вещи, как замена моего условия IE (который использует динамически добавляемые классы CSS) на обычные условия обнаружения браузера (например).

Это долго, но все необходимо:

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