固定在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); 
       }