حجم الخط ثابت في فايرفوكس؟

Question

أرغب في الاحتفاظ بحجم خط قائمة التنقل بنفس الحجم لجميع المتصفحات.لقد قمت بتعيين حجم الخط لنص قائمة التنقل على حجم بكسل محدد.في IE يعمل هذا، ولكن ليس في FF.

المشكلة هي أنه إذا قام شخص ما بتغيير حجم خط المتصفح الخاص به، فإن ذلك يدمر تخطيط القائمة في FF تمامًا.

هل هناك طريقة لضبط هذا الأمر مع FF أم أنه لا توجد طريقة للتغلب عليه؟أتفهم أن ذلك من أجل إمكانية الوصول، ولكنه قد يؤدي إلى إفساد التصميم وأنا أفضل عدم استخدام الصور بدلاً من النص في قائمة التنقل.

شكرًا!

Answer 1

لديك ثلاثة خيارات:

1. قم بإصلاح تخطيط القائمة الخاص بك بحيث يكون أكثر تسامحا من أحجام الخطوط المختلفة (الموصى بها: الكثير من المستخدمين الذين لن يوافقون على اختيارك لحجم الخط - لا يقتصر فقط على المستخدمين المعاقين بصريا أيضا).
2. استبدال النص مع الصور (مع نص ALT المناسب!)؛ سيظل FF (و IE) على نطاق واسع في وضع "التكبير"، ولكن لن يكسر تخطيط الصفحة.
3. لا تفعل شيئا. اترك التصميم المكسور ك "فو" كبيرا لأولئك المستخدمين الذين يقومون بالضغط على خلاف ذلك لقراءة النص الثابت الخاص بك.

Answer 2

أنت تقاتل معركة لن تفوز إذا حاولت الحفاظ على كل شيء ثابت وسعيد لعينيك فقط. إذا كان المحتوى إذا من أجل الاستهلاك من قبل الجمهور، فهمنا أن السيدة العامة لديها آراء مختلفة فيما يتعلق بحجم الخط الصحيح الذي يجب أن يكون عليه قراءته.

تطورت المتصفحات طريقا طويلا لوقف ما تحاول القيام به من منع الأشخاص من رؤية المحتوى.

تتطور وفهم أن حجم الخط يجب أن يتغير مع CTRL + '+/-'

Answer 3

الطريقة الوحيدة المضمونة للحصول على هذا المستوى من التحكم هي تقديم النص كصور. على الرغم من أن هذا يمكن أن يعمل موافق للقوائم (التي لا تتغير ذلك في كثير من الأحيان)، فقد رأيتها بشكل فظيع من قبل المواقع كل النص تم القيام به كصور.

لدي صديق جيد تم تدريبه كصمم طباعة. عندما بدأت لأول مرة في القيام بتصميم الويب، فإنها تسبب لها تقريبا في الذهاب مجنون بسبب عدم السيطرة. اقترحت أنها تنفس بعمق، ودراسة نموذج صندوق CSS، ثم تصميم حجم الخط "العادي" +/- حجم واحد.

Answer 4

المشكلة ليست أن شخص ما هو التكبير، أراد العميل هكذا، كما هو مطلوب، المشكلة هي أن الخط 9PT هو الاستفاضة في IE 7 و 8 و Chorme ولكن ليس في FF

Answer 5

هناك خيار آخر:

اكتشف حجم خط المستخدم باستخدام البرنامج النصي التالي: http://www.alistapart.com/articles/fontresizing/

ثم قم بضبط div الحاوية في "ems" للتعويض عن حجم المستخدم.

على سبيل المثال، إذا كان حجم خط المستخدم هو 22 والقاعدة هي 20، فاجعل حجم خط div الخاص بك هو 20/22 (أي 22*(20/22)=20).:)

ملحوظة:السبب وراء حاجتك إلى div الحاوية هو أن مستمع الحدث الخاص بك سوف يراقب التغييرات في حجم الخط في النص.

(من المحتمل أن تثير هذه الإجابة غضب بعض خبراء سهولة الاستخدام.آسف لهؤلاء الناس.لديك نقاط جيدة، ولكن الإجابة لا تزال إجابة.:ع)

---

ملاحظة.أعتقد أنه من الأفضل أن أرفق رمز التنفيذ الخاص بي فقط لإثبات أنه يعمل.لم أقم بتحرير هذا الرمز للتطبيق العالمي.لقد تم نسخها ولصقها... ابحث عن أشياء مثل استبدال شرط 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);
                }