في الماضي، كان تعديل خط صفحة الويب يعني عادةً دمج النص ذي الصلة في علامة <tag> واستخدام السمات للتحكم في لونه وحجمه ونمطه. اليوم، لم يعد هذا النهج معروفًا لأنه يمزج بين النمط المرئي وترميز المحتوى الفعلي. نوصي اليوم بطريقة تركيز معلومات نمط الخط في ملف منفصل يسمى ورقة الأنماط المتتالية (CSS).
إن تركيز معلومات الخط في ملف CSS واحد له العديد من المزايا الواضحة: فهو سهل التشغيل، ولا يتطلب أي برامج خاصة، ويعمل بشكل موحد في معظم المتصفحات الرئيسية. علاوة على ذلك، نظرًا لأن المعلومات مركزية في مكان واحد، فمن السهل تعديل المظهر المرئي لصفحة الويب: يمكنك ببساطة تغيير خط أو لون ورقة الأنماط الرئيسية، وسوف "تتتالي" التغييرات على الفور خلال موقعك بالكامل موقع.
يبدو متعة، أليس كذلك؟ لذا يرجى مواصلة القراءة لأنني سأناقش في هذه المقالة خاصية خط CSS، والتي تم تصميمها لتحل محل عنصر <font> القديم، إذا كنت بحاجة إلى تحكم مركزي في الخط واللون وحجم النص والتباعد في صفحة HTML الخاصة بك، فهي كذلك أداة قوية للاستفادة منها.
نوع التحكم
تحدد سمة الخط الخط الذي يستخدمه العنصر المقابل. تحتوي هذه الخاصية عادةً على قائمة مفصولة بأسماء الخطوط؛ ويمكن وضع الأسماء التي تحتوي على مسافات بيضاء بين علامتي اقتباس. عند التطبيق، سيستخدم المتصفح الخط الأول الذي يجده في القائمة، أو خط المتصفح القياسي الافتراضي في حالة عدم العثور على خط صالح.
القائمة أ هي مثال تطبيقي لهذه التعليمات:
القائمة أ
<أتش تي أم أل> <الرأس> <نمط النوع = "نص/CSS"> .يقتبس { عائلة الخطوط: "Bookman Old Style"، "Verdana"؛ } </نمط> </الرأس> <الجسم> <div class="quote">أكون أو لا أكون، هذا هو السؤال.</div> </الجسم> </html> |
ويبين الشكل (أ) الإخراج.
الشكل أ
Font_family
من المهم أن تتذكر أن هذا التوجيه يعتمد بشكل كبير على الخطوط التي يعرضها نظام العميل؛ في المثال أعلاه، إذا لم يعرض النظام خطوط Bookman Old Style وVerdana، فسيتم استخدام خط المتصفح الافتراضي. لتجنب هذه المشكلة، من الأفضل إضافة قائمة بأسماء الخطوط العامة، مثل serif، أو sans-serif، أو cursive، بعد قائمة أسماء الخطوط الخاصة، مما يخبر المتصفح باستخدام أفضل خط مطابق في فئة الخطوط تلك . القائمة ب هي نسخة منقحة من المثال أعلاه والتي تحل المشكلة المذكورة أعلاه تمامًا.
القائمة ب
<أتش تي أم أل> <الرأس> <نمط النوع = "نص/CSS"> .يقتبس { عائلة الخطوط: "Bookman Old Style"، "Verdana"، "مخطوطة"؛ } </نمط> </الرأس> <الجسم> <div class="quote">أكون أو لا أكون، هذا هو السؤال.</div> </الجسم> </html> |