0

ナビゲーションメニューのフォントサイズをすべてのブラウザで同じサイズに保ちたいのですが。ナビゲーションメニューテキストのフォントサイズを特定のピクセルサイズに設定しました。IEではこれは機能しますが、FFでは機能しません。

問題は、人がブラウザのフォントサイズを変更すると、FFのメニューレイアウトが完全に台無しになることです。

FF用にこれを調整する方法はありますか、それとも回避する方法はありませんか？アクセシビリティのためであることは理解していますが、そうしないとデザインが台無しになり、ナビゲーションメニューにテキストの代わりに画像を使用したくありません。

ありがとう！

4

5 に答える 5

7

3つの選択肢があります。

  1. さまざまなフォントサイズに耐えられるようにメニューレイアウトを修正します（推奨：視覚障害のあるユーザーだけでなく、フォントサイズの選択に同意しない多くのユーザー）。
  2. テキストを画像に置き換えます（適切な代替テキストを使用してください）。FF（およびIE）は、これらを「ズーム」モードで拡大縮小しますが、ページのレイアウトを壊すことはありません。
  3. 何もしない。壊れたレイアウトは、固定サイズのテキストを読むのに苦労するユーザーに大きな「FU」として残してください。
于 2008-12-19T17:20:24.900 に答える
2

あなたは、すべてを固定し、自分の目だけを幸せにしようとしても、勝てない戦いを戦っています. コンテンツが一般向けである場合、パブリックさんが読むべき正しいフォント サイズについてさまざまな意見を持っていることを理解してください。

ブラウザーは長い道のりを歩んできて、あなたがしようとしていることが人々がコンテンツを見るのを妨げないようにしました。

font-size は CTRL + '+/-' で変更すべきであることを進化させ、理解する

于 2008-12-19T17:47:41.710 に答える
1

このレベルの制御を保証する唯一の方法は、テキストを画像としてレンダリングすることです。これはメニュー（それほど頻繁には変更されません）では問題なく機能しますが、すべてのテキストが画像として行われているサイトでひどく悪用されているのを見てきました。

私には、プリントデザイナーとして訓練を受けた良い友達がいます。彼女が最初にウェブデザインを始めたとき、それは彼女がコントロールの欠如のためにほとんど狂気に陥る原因になりました。彼女に深呼吸をして、CSSボックスモデルを調べてから、「通常の」フォントサイズ+/-1サイズに設計することを提案しました。

于 2008-12-19T17:19:26.167 に答える
0

問題は、誰かがズームしているということではなく、クライアントがそのように望んでいたことであり、彼が望んでいたようです。問題は、9ptフォントが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 に答える