ثابت حجم الخط عبر المتصفحات (تطوير الشبكة)

StackOverflow https://stackoverflow.com/questions/521832

  •  22-08-2019
  •  | 
  •  

سؤال

عند إنشاء صفحات ويب كيف يمكننا تحقيق حجم خط ثابت عبر المتصفحات. ولقد استخدمت شيء من هذا القبيل "font-size: 11pt; font-family: Helvetica,'Lucida Grande'" في بلدي CSS، ولكن النص تبدو مختلفة في فايرفوكس، IE، جوجل كروم وسفاري (وهذا ليس حتى على منصات مختلفة). أساسا على نفس الجهاز، يعمل بنظام التشغيل ويندوز فيستا، وأحصل على نظرة مختلفة والمظهر تحت متصفحات مختلفة.

وكيف يمكن حل هذه بحيث يكون حجم النص يظهر نفسه على جميع المتصفحات المختلفة.

هل كانت مفيدة؟

المحلول

استخدم بكسل (بكسل) بدلا من حزب العمال (نقطة) وحدات حجم الخط الخاص بك. ثم عليك أن تتعامل مع أحجام بكسل.

وحذار ومع ذلك، اعتمادا على كيفية استخدام موقع الويب الخاص بك. كانت هناك دعاوى قضائية (في الولايات المتحدة) على المسائل المتعلقة بإمكانية الوصول على المواقع التي تنجم عن "ترميز بجد" حجم الخط.

نصائح أخرى

وسوف ترغب في استخدام إعادة تعيين CSS في محاولة للحصول على سلوك متناسقة عبر جميع المتصفحات.

http://meyerweb.com/eric/tools/css/reset/

http://developer.yahoo.com/yui/reset/

<اقتباس فقرة>   

عند إنشاء صفحات ويب كيف يمكننا تحقيق حجم خط ثابت عبر المتصفحات

لنص الجسم الرئيسي، كنت لا. بعض الناس يريدون النص أكبر حتى يتمكنوا من قراءتها بسهولة أكبر. تقف في وجههم على مسؤوليتك. استخدام أحجام الخطوط النسبية في وحدات مثل 'م' أو '٪'.

لكميات صغيرة من النص بالعرض حيث كنت بحاجة إلى حجم النص لتتناسب مع عناصر بكسل الحجم على الشاشة، استخدم "بكسل" وحدة. لا تستخدم "حزب العمال" - أن يكون له معنى فقط للطباعة، وأنها سوف تغيير حجم أكثر أو أقل بشكل عشوائي عند عرضها على الشاشة

وأنت لا تزال لم تحصل على النص بالضبط نفس الحجم لأن خطوط تختلف عبر منصات وسدا غراندي وهلفتيكا تبدو مختلفة جدا بطبيعة الحال.

ومع هذه الإعدادات اثنين، يمكنك الوصول بالضبط نفس مظهر الخط:

font-size: 70%; // better than px

line-height: 110%; // required to make line heights the same

واختبار: IE9، فايرفوكس، جوجل كروم

وهذا هو غير الإجابة، كما أن هناك وسائل لتحقيق ما تحتاجه، ولكن أنا لست أيضا على دراية جيدة في نفوسهم. نبدأ مع "إعادة تعيين" أن أطر مثل مخطط عادة ما توفر والذهاب من هناك.

وعادة ما يكون أسهل بكثير وأكثر ذكاء لدينا تصاميم وتكون مرنة بما فيه الكفاية بحيث الخلافات الصغيرة عبر المتصفحات لا تلعب دورا كبيرا جدا.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top