Css firefox中的固定字体大小?

Css firefox中的固定字体大小?,css,firefox,navigation,font-size,Css,Firefox,Navigation,Font Size,我想让所有浏览器的导航菜单的字体大小保持相同。我将导航菜单文本的字体大小设置为特定的像素大小。在IE中,这起作用,但在FF中不起作用 问题是,如果一个人改变了浏览器的字体大小,就会完全破坏FF中的菜单布局 有没有一种方法可以调整FF,还是没有办法?我知道这是为了便于访问,但它会打乱设计,我不想在导航菜单中使用图像而不是文本 谢谢 获得此级别控制的唯一保证方法是将文本呈现为图像。虽然这对不经常更改的菜单来说可以正常工作,但我已经看到它被所有文本都作为图像处理的站点严重滥用 我有一个好朋友,他受过印

我想让所有浏览器的导航菜单的字体大小保持相同。我将导航菜单文本的字体大小设置为特定的像素大小。在IE中,这起作用,但在FF中不起作用

问题是,如果一个人改变了浏览器的字体大小,就会完全破坏FF中的菜单布局

有没有一种方法可以调整FF,还是没有办法?我知道这是为了便于访问,但它会打乱设计,我不想在导航菜单中使用图像而不是文本


谢谢

获得此级别控制的唯一保证方法是将文本呈现为图像。虽然这对不经常更改的菜单来说可以正常工作,但我已经看到它被所有文本都作为图像处理的站点严重滥用


我有一个好朋友,他受过印刷设计师的训练。当她刚开始做网页设计时,由于缺乏控制,几乎让她发疯。我建议她深呼吸,研究CSS框模型,然后设计正常的字体大小+/-1。

你有三个选择:

修正你的菜单布局,使其更能容忍不同的字体大小。建议:许多用户不会同意你的字体大小选择,而不仅仅限于视力受损的用户。 将文本替换为具有适当alt文本的图像!;FF和IE仍将在缩放模式下缩放这些内容,但不会破坏页面布局。 什么也不做。将破损的布局作为一个大FU留给那些原本会费力阅读固定大小文本的用户。
如果你试图让一切都固定下来,只为你的眼睛感到高兴,那么你正在进行一场你不会赢的战斗。如果内容是供公众使用的,那么请理解公众女士对她应该阅读的正确字体大小有不同的意见

浏览器已经发展了很长一段路来阻止你试图做的事情阻止人们看到内容


发展并理解字体大小应该随着CTRL+'+/-'的变化而变化,问题不是有人在缩放,客户希望这样,他也希望这样,问题是9pt字体在ie 7和8和chorme中显示,但在ff中不显示,还有另一种选择:

使用以下脚本检测用户的字体大小:

然后调整ems中的容器div以补偿用户大小

例如,如果用户字体大小为22,基数为20,则使容器div的字体大小为20/22,即22*20/22=20:

注意:您需要容器div的原因是因为您的事件侦听器将注意正文的字体大小更改

这个答案可能会激怒一些可用性专家。对不起那些人。你的观点不错,但答案仍然是答案p

另外,我想我最好附上我的实现代码来证明它是有效的。我还没有为全局应用程序编辑此代码。它是被复制和粘贴的…注意一些事情,比如用常规的浏览器检测条件替换使用动态添加的CSS类的IE条件

这很长,但都是必要的:

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

同意。故意破坏增加的字体大小是个坏主意。如果你的用户浏览时增加了字体大小,可能是因为他们需要这样做。唯一可以这样做的情况是,如果你使用的是一个巨大的像素大小,在这种情况下,你可以使用2个图像。我甚至不会说使用图像是好的。使用重置css,找到一个好的、可读的字体大小,并使用em进行设置。任何想要增加字体大小的人都想阅读内容,而不是看你的网站是否崩溃。但是到了什么程度呢?如果一个人把浏览器的字体设置得过大,那么像水平导航菜单这样的东西就会换行,完全破坏布局。如果他们把字体设置得过大只是为了破坏你的布局,这真的是你担心的吗?您应该记住,禁用Javascript的用户习惯于被破坏的站点,就像使用大字体的用户习惯于看起来很奇怪的布局一样。“让他们决定吧。”布莱恩如霍布斯所说。如果这个网站是供你娱乐的,那就把它保存在你的桌面上,当你想看的时候打开它。