固定在Firefox中的字体大小？

Question

我想让所有浏览器的导航菜单的字体大小保持不变。我将导航菜单文字的字体大小设置为特定的像素大小。在IE浏览器这个工程，但不是在FF。

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

是否有办法来调整这个法郎或有没有办法解决它？我明白这是为了可访问性，但它会让设计变得糟糕，我宁愿不在导航菜单中使用图像代替文本。

谢谢！

Answer 1

你有三种选择：

1. 修复您的菜单布局，使得它更加宽容不同的字体大小的（建议：大量的用户谁也不会与你选择的字体大小的同意 - 不只是局限于视力受损的用户）。
2. 用图像替换文本（使用适当的替代文本！ FF（和IE）仍然可以在“缩放”模式下缩放它们，但不会破坏页面的布局。
3. 什么都不做。将破碎的布局作为一个大的“FU”放置给那些会以其他方式读取固定大小文本的用户。

Answer 2

唯一可以保证的方式有这种水平的控制是呈现文本为图像。虽然这可以在菜单中正常工作（不会经常更改），但我看到它被可怕的滥用，其中所有文字都以图片形式完成。

我谁是一位训练有素的打印设计师的好朋友。当她第一次开始网页设计时，由于缺乏控制，几乎导致她精神崩溃。我建议她深呼吸，研究CSS盒模型，然后设计“正常”字体大小+/- 1的大小。

Answer 3

如果你试图让所有的东西都保持固定并且只对你的眼睛感到满意，那么你就不会赢得胜利。如果内容如果供公众使用，那么明白公众对她应该阅读的正确字体大小有不同意见。

浏览器已经发展很长的路要走停止你正在试图从阻止人们看到的内容做什么。

发展和理解，字体大小应该用CTRL +更改“+/-”

Answer 4

问题不在于有人变焦，客户希望这样的，它像他想的问题是，宋体字体displaing在IE 7和8 chorme但不能在FF

Answer 5

还有另一种选择：

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

然后在调整div容器“ EM s“来补偿用户的大小。

例如，如果用户字体大小为22和底座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); 
       }