نمط خط الويب الافتراضي

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

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

في المستقبل، استعد لاستخدام نمط الخط الافتراضي التالي:

 body{ font: 12px/1.5 arial; }

الخط: اريال

معظم أحرف المحتوى الموجودة على صفحاتنا باللغة الصينية ولا شك أن الخط الأكثر استخدامًا والأكثر شيوعًا لعرض اللغة الصينية على صفحات الويب هو Song Dynasty، لكن Song Dynasty سيئ جدًا في عرض اللغة الإنجليزية والأرقام والرموز الإنجليزية . مثل الحرف ©، لذلك نتوقع بشكل عام عرضها بأنماط خطوط أفضل من خلال CSS، ثم استخدام Song Dynasty لعرض الرموز الصينية والصينية. سبب اختياري للريال هو:

1. تم تثبيت هذا الخط مسبقًا على نظامي التشغيل Windows وMac، ويجب أن يكون خط الويب الأكثر استخدامًا. منافسيها المحتملين tahoma helvetica ليسوا محظوظين جدًا.
2. قد يعتقد محترفو التصميم المرئي أنه من الأفضل استخدام tahoma في Windows وhelvetica في Mac . على سبيل المثال، نمط الخط الافتراضي في Taobao هو font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif;
يعد هذا اختيارًا جيدًا جدًا، ولكنك ستجد أيضًا أن الإصدارات الجديدة من Google وYAHOO وYoutube وBing وحتى MSN تستخدم arial كأول خط افتراضي. لذلك يجب أن يكون arial مقبولاً تمامًا من حيث الجمال وسهولة القراءة.
3. بشكل عام، عند تعيين عائلة الخطوط، سيتم تعيين عائلة خطوط عالمية في النهاية لضمان أمانها. على سبيل المثال، إعداد Google هو font-family:arial,sans-serif; ولكن على الأقل في الإصدار غير الصيني. عندما يكون الترميز Win7 هو GBK، سيعرض IE8 خط Song بسبب sans-serif ، مما يتسبب في تشويه الخط، ولهذا السبب يحتاج Taobao إلى إضافة خط Song قبل sans-serif ولكن Google لا تحتاج إلى القيام بذلك.
4. نظرًا لأن اختيار الخطوط الصينية محدود للغاية، فقد تم تعيين جميع المتصفحات الرئيسية الحالية لاستخدام Song Dynasty لعرض اللغة الصينية. تستخدم الصفحة الرئيسية وصفحة نتائج البحث في Baidu font-family:arial; والذي يمكن أن يوضح مدى أمان القيام بذلك. ربما لاحظ بعض الأشخاص أن الخط الصيني الافتراضي المعروض في Firefox China هو Microsoft Yahei وذلك لأن شبكة Mouzhi قامت بتعديل النمط المحدد من قبل المستخدم دون إذن ولا تسمح لنمط صفحة الويب بتجاوز النمط الذي حدده المتصفح. . وبسبب المواقف المماثلة أيضًا، من المهم جدًا بالنسبة لنا تصميم صفحات الويب بمرونة.

إحدى المشاكل الناجمة عن استخدام الخطوط الإنجليزية كخط افتراضي أول هي مشكلة المحاذاة عندما يتم خلط الرموز الصينية والإنجليزية . يمكن حل معظم المواقف عن طريق تحديد ارتفاع الخط و hasLayout، ولكن لن يكون الأمر مثاليًا إذا قمت بالتغيير الخط يمكن أن يؤدي تغييره إلى "Song Ti" إلى حل المشكلة تمامًا. يبدو أن هذه المشكلة تحدث فقط على IE. لذلك، إذا كان موقع الويب الخاص بك نادرًا ما يستخدم اللغة الإنجليزية والأرقام والرموز الإنجليزية، فإن الإعداد المباشر {font-family:5b8b4f53;} يعد أيضًا خيارًا معقولًا.

الحجم: 12 بكسل

1. 12 بكسل هو الحد الذي يمكن لـ Song Dynasty عرضه. على الرغم من أن Microsoft Yahei يمكنه عرض خطوط أصغر ، إلا أن بيئة التطبيق الحالية لم تنضج بعد. نظرًا لأن Songti هو خط الويب العالمي الوحيد المستخدم حاليًا لعرض اللغة الصينية، فإن 12 بكسل يصبح حجم الخط الأكثر استخدامًا. بالطبع يمكننا تعديل هذه القيمة الافتراضية وفقًا لاحتياجات المنتج.
2. لا تقلق بشأن التصميم بناءً على حجم الخط (em) .
3. في الإصدار الصيني بعد Chrome 3.0، الحد الأدنى لحجم الخط هو 12 بكسل. على سبيل المثال، إذا قمت بتعيين الحد الأدنى لحجم الخط على 10 بكسل، فسيصبح في النهاية 12 بكسل.

ارتفاع الصف: 1.5x

1. هذه هي قيمة الخبرة، وقد يكون لدى المنتجات المختلفة متطلبات مختلفة لهذه القيمة، ولكننا بشكل عام نقوم بتعيين القيمة الأكثر استخدامًا كقيمة افتراضية. على سبيل المثال، خط YUI هو font:13px/1.231 arial,helvetica,clean,sans-serif; أي أن حجم الخط الافتراضي هو 13px، وارتفاع الخط هو 13*1.231=16.003px، وارتفاع الخط الافتراضي هو 1.231 مرة. الخط الافتراضي. بالنسبة للغة الصينية، أحجام الخطوط شائعة الاستخدام هي 12px و14px و16px و18px والأحجام الزوجية الأخرى. يمكن أن يؤدي تعيين ارتفاع الخط إلى رقم زوجي في IE6 وIE7 إلى حل مشكلة محاذاة الخط في بعض الحالات الخاصة.
2. في IE6 وIE7، يجب أن تكون قيمة ارتفاع الخط أكبر من 2 بكسل للخط لضمان عرض الخط بالكامل أو إمكانية عرض التسطير بشكل فعال عند استخدامه كارتباط.
3. عند تعيين line-height ، احرص على عدم استخدام الوحدات (بما في ذلك %) ، لأن العقد الفرعية سترث قيمة ارتفاع الخط المحسوبة، لذلك عند استخدام الوحدات، سيحسب المتصفح line-height باعتباره القيمة المحددة الأولى لا تتغير القيمة مع تغير حجم الخط، والقيمة بدون وحدة هي مضاعف font-size الحاوية، لذا فإن تعيينها على قيمة بدون وحدة هو الخيار الأفضل.
4. إن إلقاء نظرة متعمقة على ارتفاع خط CSS مفيد جدًا في فهم line-height ويستحق القراءة.

الأداء والكفاءة

1. تحتوي معظم الأنظمة الأساسية على arial لتقليل وقت البحث في المتصفح.
2. الكود بسيط وسهل الكتابة. arial هو في الأساس الخط ذو الاسم الأقصر، والذي يمكنه حفظ حجم CSS.
3. جميع الحروف صغيرة، وهو ما تفعله Google حاليًا وتتمثل الميزة في أنه يمكنه الكتابة بشكل أسرعوتحسين كفاءة ضغط Gzip .
4. من الأفضل التعبير عن اللغة الصينية باستخدام الكود الموحد . على سبيل المثال، عند استخدام Song Dynasty، تكون {font-family:5b8b4f53;} ، وعند استخدام Microsoft Yahei، تكون {font-family:5fae8f6f96c59ed1;} يتمتع هذا بميزة تجنب مشكلة التشفير، ويمكن دعمه بواسطة جميع المتصفحات الرئيسية في نفس الوقت.
5. استخدم نوع الخط الصحيح وتجنب استخدام علامات الاقتباس لتقليل حجم CSS الخاص بك. يمكن كتابة الخطوط الصينية حسب الطريقة السابقة.

مستقبل

1. من خلال اختبار المزج بين الصينية والإنجليزية والرموز ، وجدت أن أداء Microsoft Yahei كان جيدًا بالفعل، بما في ذلك الأرقام الإنجليزية والأحرف الإنجليزية، بالإضافة إلى تأثير العرض في IE6 وIE7، ومع ذلك، فإن الأسف الوحيد هو أنه إذا كان Microsoft Yahei كذلك مثبتة تحت نظام XP إذا لم يقوم المستخدمون ذوو الخطوط السوداء بتشغيل خيار "استخدام تجانس خطوط الشاشة"، فسيكون النص ضبابيًا للغاية ويصعب قراءته في Firefox وSafari وOpera، وخاصة IE6. لا يوجد حاليًا حل جيد لهذه المشكلة، لذلك لا يمكن استخدامه رسميًا إلا عندما تكون نسبة استخدام IE6 صغيرة جدًا. ربما سيستغرق الأمر حتى عام 2014، عندما يموت XP.
2. على الرغم من أن @font-face موجود منذ فترة طويلة، إلا أن دعم المتصفح وسرعة الشبكة ومشكلات العمل أدت إلى نادرًا ما يتم استخدامه. والخبر السار بشأن الخطوط مؤخرًا هو أن Firefox 3.6 سيدعم Web Open Font Forma . للحصول على معلومات ذات صلة حول مستقبل خطوط الويب، راجع مستقبل خطوط الويب ، وحول خطوط الويب: الوضع الحالي والمستقبل ، وإعادة النظر في الوضع الحالي ومستقبل خطوط الويب .