حجم الخط CSS:نسبي مقابلالقيم المطلقة.أي استخدام؟[مغلق]

Question

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

Answer 1

أي استخدام؟

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

بالنسبة للأقارب، فإن "%" و"em" جيدان بنفس القدر.

للحصول على المطلق، استخدم دائمًا "px".لا تستخدم أبدًا "pt" للاستخدام على الشاشة، فهو مناسب فقط لأوراق أنماط الطباعة.من المؤسف أن "pt" تعتبر الوحدة الافتراضية للتعامل مع الخطوط لأنها على الويب هي أسوأ خيار ممكن.

(الوقت المتوقع للوصول:لاحظ أنه منذ هذه الإجابة، أصبح CSS3 إعادة تعريف "الوحدات المادية" لذلك px و pt دائما متناسبة.لذلك لم تعد هذه المشكلة مهمة إلا إذا كنت قلقًا بشأن المتصفحات القديمة جدًا.)

بعض الأشخاص لا يحبون التأثير "المركب" لأحجام الخطوط النسبية.الحيلة، في الواقع، هي استخدام أقل عدد ممكن من التغييرات في حجم الخط، لتجنب الكثير من عمليات التداخل.هو - هي يجب سيكون من الممكن الحصول على السلوك النسبي للحجم المفضل للمستخدم دون السلوك المركب باستخدام الكلمات الأساسية لحجم الخط "small"/"medium"/"xx-large"/إلخ، ولكن لسوء الحظ لا تفعل ذلك بهذه الطريقة" لا تحصل على الكثير من التفاصيل، ولا تزال هناك اختلافات حتى اليوم بين كيفية تعامل المتصفحات معها.

Answer 2

أحتفظ بحجم الخط باعتباره الحجم الافتراضي الذي اختاره المستخدم، ثم استخدم الحجم النسبي:

body {
    font-size: 100%;
}

p {
    font-size: 1em;
}

h1 {
    font-size: 1.8em;
}

تحترم هذه الطريقة اختيار المستخدم لحجم الخط في متصفحه، والذي يتم ضبطه عادةً على 16 بكسل.

Answer 3

أنا شخصياً قمت بتعيين حجم الخط المطلق على body ومن هناك قم بتعيين كل شيء بالنسبة لذلك.على سبيل المثال:

body {
    font-size: 10px;    /* or pt if you want */
}
h1 {
    font-size: 200%;
}

فقط حاول تجنب الجمع بين الأحجام النسبية المركبة:

body {
    font-size: 10px;
}
p {
    font-size: 80%; /* 8px, right? */
}
div {
    font-size: 150%;
}
/* what size is a "div > p" ? */

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

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

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

Answer 4

قامت A List Apart بعمل كتابة واسعة النطاق حول كيفية عمل أحجام الخطوط في المتصفحات المختلفة.اتضح أن الأمر أكثر تعقيدًا مما تتوقع، تمامًا مثل كل شيء آخر في CSS.يبدو أن الإجماع يميل نحو استخدام ems، لأن ذلك يمنح المستخدم مزيدًا من التحكم في ضبط حجم الخط في المتصفح.

Answer 5

أفضّل القيم النسبية نظرًا لأن Internet Explorer (<7؟) لا يمكنه قياس القيم المطلقة أو قيم البكسل.

Answer 6

أحد الأشياء التي رأيت الناس يستخدمونها هو تحديد حجم الخط الأساسي في نص CSS (على سبيل المثال، 12 نقطة) ثم تكون جميع أحجام الخطوط الأخرى عبارة عن نسب مئوية من ذلك (على سبيل المثال، 140% للعناوين، و80% للعناوين الصغيرة، وما إلى ذلك).

إذا كنت تستخدم pt، فستكون لديك اختلافات في العرض بناءً على DPI التي حددها المستخدم، ولكنها ستكون تحت سيطرة المستخدم، ربما.

إذا كنت تستخدم px، فستواجه مشكلات على أجهزة DPI العالية جدًا.

يعد Em و pt مناسبين لـ CSS للطباعة.

هناك الكثير من الأشياء التي يمكنك القيام بها ومعرفة ما سيحدث بشأن الخطوط وCSS.

Answer 7

إذا كنت تستخدم الأحجام المطلقة، فقد يجد أي قارئ ضعاف البصر صعوبة في القراءة.إذا كنت تستخدم أحجامًا نسبية، فأنت تحدد فقط النص الأكبر/الأصغر من النص الآخر في صفحتك، وكل ذلك يتعلق بحجم النص الافتراضي للمستخدم والذي قد يكون كبيرًا (إذا كان ضعيفًا) أو صغيرًا (إذا كان غريبًا بعض الشيء).

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

Answer 8

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

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

تواجه بعض المتصفحات مشكلات في تغيير حجم أنواع الخطوط ذات الحجم الثابت (px وpt)، وبالتالي لا تكون جيدة جدًا لخط الويب حيث قد يحتاج بعض المستخدمين إلى زيادة حجم الخط باستخدام مكبر الشاشة أو عجلة الماوس فقط .

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

في رأيي، تهدئة المصممين الذين يجب أن يعرفوا بشكل أفضل ليس سببًا كافيًا لاستخدام الخطوط الثابتة في تطوير الويب.

Answer 9

يعد استخدام مقياس EM أكثر تنوعًا مع الخطوط.كما أنه أكثر سهولة في الوصول إليه.

إذا لم تكن قد عملت مع هذا من قبل، أداة مثل حاسبة م يمكن أن يكون مفيدًا جدًا لفهم كيفية عمل العلامة/النموذج.

Answer 10

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

Answer 11

إذا كان بإمكانك إسقاط الدعم لـ IE8 فأنا أقترح استخدام rem وحدات.إنها وحدات نسبية مثل em ولكنها لا تتوالى إلى العناصر الفرعية مما يجعلها أسهل بكثير في العمل معها

em معقدة

p {
  font-size: 2.5em;
  span {
    font-size: 1.5 em;
    /* font size comes out to 3.75 root em*/
  }
}

rem هي أبسط

p {
  font-size: 2.5rem;
  span {
    font-size: 1.5 rem;
    /* font size comes out to 1.5 root em*/
  }
}

Answer 12

معظم خلفيتي البرمجية هي تطبيقات سطح المكتب، لكنني كنت أقرأ قدرًا لا بأس به لتطوير الويب مؤخرًا، والكتب التي صادفتها تقترح استخدام مواصفات حجم خط الكلمة الرئيسية (صغير، متوسط، إلخ) ثم توسيع نطاق ذلك أو لأسفل بنسبة مئوية أو م.

إذا تم تحديد حجم الخط الخاص بك بالبكسل، فلن يتمكن مستخدمو الإصدارات القديمة من IE من تجاوز حجم النص، أي لن يتمكنوا من تكبيره أو تصغيره ليناسب تفضيلاتهم.

ومع ذلك، IE5 يطرح أيضًا مشكلة عندما يتم تحديد حجم الخط الخاص بك عن طريق الكلمة الأساسية:بالنسبة للمتصفحات الأخرى، يعرض IE5 النص بمقدار خطوة واحدة أكبر.