ما هو "الخط المكدس"؟

في حين أن الصور تحصل على الكثير من الحب عندما يتعلق الأمر بالمواقع الإلكترونية ، فإن الكلمة المكتوبة تناشد محركات البحث وتحمل محتوى معظم المواقع. على هذا النحو ، فإن التصميم المطبوع هو جزء بالغ الأهمية من تصميم الموقع. مع أهمية وجود نص في الموقع ، يجب التأكد من أنه يبدو جيدًا وسهل القراءة. يتم ذلك مع تصميم CSS (Cascading Style Sheets).

بعد اتباع معيار تصميم الويب الحديث ، عندما ترغب في إملاء مظهر محتوى موقع الويب ، ستفعل ذلك باستخدام CSS. هذا يفصل هذا النمط CSS من بنية HTML للصفحة. على سبيل المثال ، إذا كنت ترغب في تعيين خط الصفحة إلى "Arial" ، فيمكنك القيام بذلك عن طريق إضافة قاعدة النمط التالية إلى CSS (لاحظ أنه من المحتمل أن يتم ذلك في ورقة أنماط CSS خارجية تقوم بتشغيل الأنماط لكل صفحة على الموقع):

الجسم {font-family: Arial؛ }

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

رزمة الخط هي قائمة من الخطوط في تعريف عائلة خطوط CSS. يتم سرد الخطوط حسب الترتيب الذي ترغب في ظهوره على الموقع في حالة حدوث مشكلة مثل عدم تحميل الخط. تسمح حزمة الخط لمصمم بالتحكم في شكل الخطوط على صفحة الويب حتى إذا لم يكن الكمبيوتر يحتوي على الخط المبدئي الذي اتصلت به.

إذن كيف تبدو كومة الخط؟ هنا مثال:

body {font-family: Georgia، "Times New Roman"، serif؛ }

هناك بعض الأشياء التي يجب ملاحظتها هنا.

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

من حيث الخط التالي ، لاحظ كيف تتم كتابتها في المكدس. يتم وضع اسم "Times New Roman" في علامات اقتباس مزدوجة. هذا لأن اسم الخط يحتوي على عدة كلمات. يجب أن يكون لدى أسماء الخطوط التي تحتوي على أكثر من كلمة واحدة (Trebuchet MS، Courier New، etc.) الاسم بين علامتي اقتباس مزدوجتين بحيث يعلم المتصفح أن كل هذه الكلمات جزء من اسم خط واحد.

وأخيرًا ، سننهي رصة الخطوط بـ "serif" ، وهو تصنيف خط عام. في المثال غير المحتمل أن أيًا من الخطوط التي قمت بتسميةها في مكدس الذاكرة الخاص بك غير متوفرة ، سيجد المتصفح بدلاً من ذلك خطًا يقع على الأقل في التصنيف المناسب الذي اخترته. على سبيل المثال ، إذا كنت تستخدم خطوط sans-serif مثل Arial و Verdana ، من إنهاء مجموعة مكدس مع تصنيف "sans-serif" ، فسيتم الحفاظ على الخط في هذه العائلة بشكل عام إذا كانت هناك مشكلة في التحميل. من المسلم به أنه من النادر للغاية ألا يتمكن المتصفح من العثور على أي من الخطوط المدرجة في المكدس ويجب عليه بدلاً من ذلك استخدام هذا التصنيف العام ، ومن أفضل الممارسات تضمينه على أية حال لمجرد أنه آمن بشكل مضاعف.

الخط الأكوام وخطوط الويب

تستخدم العديد من مواقع الويب اليوم خطوط الويب التي يتم تضمينها على الموقع بالإضافة إلى موارد أخرى (مثل صور الموقع ، ملف Javascript ، إلخ) أو مرتبطة بموقع خط خارج الموقع مثل Google Fonts أو Typekit. في حين يجب أن يتم تحميل هذه الخطوط منذ أن تقوم بالارتباط بالملفات نفسها ، فأنت لا تزال ترغب في استخدام مكدس خط للتأكد من أن لديك بعض التحكم في أي مشاكل قد تنشأ. وينطبق الشيء نفسه على الخطوط "الآمنة للويب" التي يجب أن تكون موجودة على جهاز كمبيوتر شخص ما (لاحظ أن الخطوط التي استخدمناها كأمثلة في هذه المقالة ، بما في ذلك Arial و Verdana و Georgia و Times New Roman ، كلها خطوط آمنة على الويب يجب أن تكون على كمبيوتر الشخص). على الرغم من أن احتمال فقدان أحد الخطوط منخفض للغاية ، إلا أن تحديد كومة الخط سيساعد على مقاومة تصميم المطبوعات في الموقع قدر الإمكان.

المقالة الأصلية لجنيفر كرينين. حرره جيريمي جيرارد في 8/9/17