من أي أنظمة التشغيل أو المتصفحات هي أسماء أسرة خطوط CSS حساسة للحالة

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

سؤال

وفق sitepoint (مصدر أثق به بشدة) عند تحديد font-family أسماء بعض أنظمة التشغيل/المتصفحات مايو يكون حساسية الموضوع.

عادةً ما أستخدم قيم الحالة المختلطة دائمًا ، لكنني أتساءل عما إذا كانت القيم ذات الحالة المنخفضة ستعمل كما هي؟

ليس لدي تفضيل هائل في كلتا الحالتين - لكنني أكره أن تقدم صفحة مختلفة لأنني كتبت حالة أقل "v" ضد. "V" في مكان ما في ملف CSS.

على سبيل المثال ، هل هناك أي حالات معروفة حيث 2 divs مع foo و bar الفصول أدناه ستقدم بالفعل بخط مختلف؟

div.foo{
  font-family:Verdana, Arial, Helvetica;
}

div.bar{
  font-family:verdana, arial, helvetica;
}
هل كانت مفيدة؟

المحلول

لي خمن هو أن هذا سيكون مشكلة محتملة فقط على أنظمة Linux/UNIX ، حيث يكون نظام الملفات حساسًا للحالة. سأكون مندهشًا إذا كان لدى أي متصفح Windows مشكلة في هذا ، نظرًا لأن الخطوط مجرد ملفات في دليل C: Windows Fonts.

يمكنك محاولة إنشاء صفحة مع نص اختبار بخط معروف مثل Courier جديد ، ولكن تهجئها مضحكة مثل "Courier New" ، ثم انتقل إلى http://browsershots.org/ حيث ستولد لقطات من أطنان من المتصفحات. تأكد من جعل الخط كبيرًا جدًا أيضًا ، لأن لقطات الشاشة صغيرة.

شيء من هذا القبيل:

<html>
<head>
<style type="text/css">
#proper   { font: bold 48px "Courier New",Courier; }
#improper { font: bold 48px "CoUrIEr nEW",CoUrIEr; }
</style>
</head>
<body>
<p id="proper">Test1 - proper caps</p>
<p id="improper">Test2 - improper caps</p>
</body>
</html>

إذا واحد فقط يظهر الخط في البريد السريع ، ثم أن المتصفح حساس للحالة.


يحرر: لقد اختبرت HTML نشرت أعلاه في المتصفحات. لم أجد أي متصفح لم ينجح. لم يعجب Dillo 2.1.1 لـ Ubuntu Linux أي من الخطين (ربما كان هذا النظام يفتقر إلى كل من Courier New و Courier؟) ، أظهر جميع الآخرين كلا الخطين في Courier أو Courier New. لا تزال هناك متصفحات متنقلة لم يتم اختبارها ، لذلك يجب أن تسعى جاهدين لاستخدام الرسملة المناسبة فقط في حالة.

نصائح أخرى

على الرغم من أن نظرة عامة على بناء الجملة CSS يقول

القواعد التالية تتمثل دائمًا: جميع أوراق نمط CSS غير حساسة للحالة ، باستثناء الأجزاء التي لا تخضع لسيطرة CSS. على سبيل المثال ، حساسية حالة لقيم سمات HTML "معرف" و "فئة" ، من أسماء الخطوط, و أوريس يكمن خارج نطاق هذه المواصفات. لاحظ على وجه الخصوص أن أسماء العناصر غير حساسة للحالة في HTML ، ولكنها حساسة للحالة في XML.

ال الوحدة النمطية CSS3 يفرض القسم مقارنة غير حساسة للحالة:

بالنسبة لأسماء العائلة الأخرى ، يحاول وكيل المستخدم العثور على اسم العائلة بين الخطوط المحددة عبر قواعد font-face ومن ثم بين خطوط النظام المتاحة ، والأسماء المطابقة مع مقارنة غير حساسة للحالة.

لذلك تتطلب مواصفات CSS3 أن يتم التعامل مع أسماء الخطوط بشكل غير متوقع.

يبدو أن هذا الرجل لديه مشاكل عند استخدام Flex ، لذلك يبدو أن هناك بعض الحقيقة في هذا:

عند استخدام CSS في مكونات Flex to Style ، يمكن أن تكون خاصية عائلة الخط حساسة لحالة الأحرف على بعض أنظمة التشغيل. على سبيل المثال ، لن تعمل CSS التالية على متصفح Safari مع Flash Player 10:

.content{font-family: arial;}

لكن هذا سيعمل:

.content{font-family: Arial;}

مصدر

ألقِ نظرة أيضًا على هذه الصفحة التي يمكنك استخدامها للتحقق من ذلك في المتصفحات/نظام التشغيل الخاص بك:

http://meyerweb.com/eric/css/tests/font-name-case-test.html

سؤال لطيف بالفعل. أنا شخصياً لم أسمع عن أي قضايا لها علاقة بحساسية الحالة.

ما يجب أن تقلق بشأن المزيد هو حول وجود هذه الخطوط على الأنظمة المختلفة. Verdana و Arial غير متوفرة على Mac. Helvetica غير متوفر على Windows. لقد حددت مجموعتين مع منطقة تقاطع صفر في أبعاد WIN/MAC.

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