Фиксированный размер шрифта в Firefox? - PullRequest
0 голосов
/ 19 декабря 2008

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

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

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

Спасибо!

Ответы [ 5 ]

7 голосов
/ 19 декабря 2008

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

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

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

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

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

1 голос
/ 19 декабря 2008

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

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

0 голосов
/ 30 июля 2010

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

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

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

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

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

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


PS. Я полагаю, что лучше всего присоединить свой код реализации, чтобы доказать, что он работает. Я не редактировал этот код для глобального применения. Он скопирован и вставлен ... обратите внимание на такие вещи, как замена моего условного 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);
                }
0 голосов
/ 25 ноября 2009

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

...