0

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

问题是，如果一个人改变了他们浏览器的字体大小，那么它会完全破坏 FF 中的菜单布局。

有没有办法为 FF 调整这个或者没有办法解决它？我知道它是为了可访问性，但否则会弄乱设计，我宁愿不使用图像而不是导航菜单的文本。

谢谢！

4

5 回答 5

7

你有三个选择：

  1. 修复您的菜单布局，使其更能容忍不同的字体大小（建议：很多用户不同意您选择的字体大小 - 不仅限于视障用户）。
  2. 用图像替换文本（使用适当的替代文本！）；FF（和 IE）仍会在“缩放”模式下缩放它们，但不会破坏页面的布局。
  3. 没做什么。将损坏的布局作为一个大的“FU”留给那些否则会费力阅读您的固定大小文本的用户。
于 2008-12-19T17:20:24.900 回答
2

如果你试图让一切都固定下来，只为你的眼睛感到高兴，那么你正在打一场你不会赢的战斗。如果内容是供公众消费的，那么请理解公众女士对于她应该阅读的正确字体大小有不同的看法。

浏览器已经发展了很长时间，以阻止您试图阻止人们看到内容。

发展并理解字体大小应该用 CTRL + '+/-' 改变

于 2008-12-19T17:47:41.710 回答
1

获得这种控制级别的唯一保证方法是将文本呈现为图像。虽然这对于菜单（不经常更改）来说可以正常工作，但我已经看到它被所有文本都作为图像完成的网站可怕地滥用。

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

于 2008-12-19T17:19:26.167 回答
0

问题不在于有人在缩放，客户想要那样，就像他想要的那样，问题是 9pt 字体在 ie 7 和 8 和 chorme 中显示，但在 ff 中没有

于 2009-11-25T17:32:41.343 回答
0

还有另一种选择：

使用以下脚本检测用户的字体大小：http ://www.alistapart.com/articles/fontresizing/

然后在“ems”中调整一个容器 div 以补偿用户大小。

例如，如果用户 font-size 为 22，base 为 20，则让您的容器 div 的 font-size 为 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);
                }
于 2010-07-30T11:35:04.277 回答