يلعب تصميم الويب دورا مهما في إنشاء صفحات ويب فعالة وجذابة. يمكن للخط المختار جيدا أن يزيد بشكل كبير من إدراك المحتوى ، ويمنحه طابعا مميزا ويبرزه من خلال تدفق ضخم من المعلومات.
ومع ذلك ، فإن تخصيص الخط لا يتعلق فقط باختيار النمط الذي يعجبك أكثر. من المهم أيضا مراعاة الجوانب المختلفة مثل سهولة القراءة والتوافق مع الأجهزة المختلفة ودعم اللغات المختلفة.
مع هذا الدليل ، سنساعدك على فهم المبادئ الأساسية للعمل مع الخطوط. سوف تتعرف على الأنواع المختلفة من الخطوط ، وقواعد دمجها مع بعضها البعض ، وكيفية تخصيص الخطوط على موقع الويب الخاص بك.
هل أنت مستعد للبدء? ثم دعنا نتعمق في عالم الخطوط ونكتشف كل أسرار تخصيصها!
- إعداد خطوط الموقع: خطوة بخطوة
- اختيار الخط المناسب
- تحديد الخطوط الأساسية
- استخدام خطوط النظام
- تحديد أحجام الخطوط
- إعداد الطباعة
إعداد خطوط الموقع: خطوة بخطوة
الخطوة 1: اختيار الخط
الخطوة الأولى هي اختيار الخط الرئيسي لموقع الويب الخاص بك. فئات الخطوط الرئيسية هي خطوط الرأس وخطوط النص. اختر الخطوط التي سيتم دمجها مع بعضها البعض وتطابق نمط موقع الويب الخاص بك.
الخطوة 2: ربط الخطوط
بعد تحديد الخطوط ، يمكنك توصيلها بصفحة الويب الخاصة بك باستخدام كس. قم بإنشاء كتلة داخل العلامة واستخدم خاصية عائلة الخط لتحديد الخطوط المحددة.
الخطوة 3: تعيين أحجام الخطوط
لتعيين أحجام الخطوط على صفحة الويب الخاصة بك ، استخدم الخاصية حجم الخط في المغلق. يمكنك تعيين أحجام الخطوط في كل من الوحدات المطلقة (على سبيل المثال ، وحدات البكسل) والوحدات النسبية (على سبيل المثال ، النسب المئوية أو م).
الخطوة 4: إضافة أنماط الخطوط
لإضافة أنماط إضافية إلى الخطوط الخاصة بك ، استخدم خصائص كس الأخرى مثل وزن الخط لتعيين حجم الخط ، ونمط الخط لتعيين النمط (على سبيل المثال ، مائل أو عادي) ، وزخرفة النص لإضافة شرطات سفلية أو نص يتوسطه خط.
الخطوة 5: الاختبار
لا تنس اختبار مظهر الخطوط على صفحة الويب الخاصة بك قبل النشر. تأكد من أن الخطوط تبدو جيدة وقابلة للقراءة على أجهزة وشاشات مختلفة.
في الختام ، يعد تخصيص الخط خطوة مهمة في إنشاء تصميم موقع ويب فعال وجذاب. اتبع هذا الدليل العملي لإعداد الخطوط بشكل صحيح وتحسين مظهر موقعك.
اختيار الخط المناسب
1. الغرض والجمهور من المشروع الخاص بك:
حدد أولا الغرض والجمهور الذي تفكر فيه. على سبيل المثال ، إذا كان مشروعك يستهدف جمهورا محترفا ، فقد تحتاج إلى خط كلاسيكي ورسمي. من ناحية أخرى ، إذا كنت تقوم بإنشاء موقع ويب للأطفال ، فمن المحتمل أن تختار خطا أكثر مرحا وعاطفيا.
2. سهولة القراءة:
بغض النظر عن مدى جمال الخط ، فإن ميزته الرئيسية هي سهولة القراءة. تأكد من أن الخط المحدد واضح وسهل القراءة ولا يسبب الإجهاد عند قراءة كمية كبيرة من النص. تجنب الخطوط الضيقة جدا أو الخطوط ذات أحجام النقاط الصغيرة جدا ، حيث قد يكون من الصعب قراءتها.
3. الأسلوب والتأثير العاطفي:
يجب أن يتطابق الخط مع نمط مشروعك وأن ينقل التأثير العاطفي المطلوب. تبدو بعض الخطوط جادة ورسمية ، بينما يتمتع البعض الآخر بمظهر أكثر حرية أو إبداعا أو رومانسيا. اختيار الخط الذي يسلط الضوء على لهجة ومزاج المشروع الخاص بك.
4. التوافق:
لا تنس التحقق من كيفية عرض الخط المحدد على الأجهزة وأنظمة التشغيل المختلفة. تأكد من أن الخط يحتفظ بقابلية قراءته ومظهره على الشاشات والأنظمة الأساسية المختلفة. هذا مهم بشكل خاص عندما تعمل مع موقع ويب أو مستند سيتم عرضه على أجهزة مختلفة ، بما في ذلك الهواتف الذكية والأجهزة اللوحية.
باستخدام هذه التوصيات عند اختيار الخط ، ستتمكن من إنشاء تصميم عالي الجودة وفعال لمشروعك.
تحديد الخطوط الأساسية
يمتلك مطورو الويب مجموعة واسعة من الخطوط المتاحة التي يمكنهم استخدامها لصفحات الويب الخاصة بهم. ومع ذلك ، لكي تبدو عناوينك ونصوصك متشابهة على جميع الأجهزة والمتصفحات ، يجب عليك استخدام ما يسمى "الخطوط الأساسية".
الخطوط الأساسية هي الخطوط المثبتة بالفعل في نظام تشغيل المستخدم ومضمونة لتكون متاحة على جميع الأجهزة. وتشمل هذه:
- الرقيق عبارة عن خطوط ذات نتوءات إضافية صغيرة (رقيق) في نهايات الأحرف. أمثلة على هذه الخطوط هي تايمز نيو رومان وجورجيا وبالاتينو وغيرها.
- الخطوط بلا الرقيق هي الخطوط الخالية من الرقيق مع الخطوط العريضة على التوالي ، على نحو سلس من الأحرف. هذه هي أريال ، فيردانا ، هلفتيكا وغيرها من الخطوط في هذه الفئة.
- الخطوط أحادية المسافة هي خطوط يكون فيها لجميع الأحرف نفس العرض ، مما يجعلها مفيدة لعرض التعليمات البرمجية أو النص حيث يكون من المهم الحفاظ على التنسيق. أمثلة على الخطوط أحادية المسافة هي ساعي جديد ، كونسولاس وموناكو.
- الخطوط المتصلة هي خطوط ذات نمط متصل مجاني يشبه الكتابة اليدوية. بعض الخطوط في هذه الفئة تشمل النصي مت بولد ، فرشاة النصي مت و النصي حرة.
- الخيال هو خط زخرفي بأسلوب خيالي ، غالبا ما يكون غريب الأطوار يمكن استخدامه لإنشاء عناوين رئيسية مذهلة ومعلمة. أمثلة على هذه الخطوط هي تأثير ، جوكرمان و كورلز جبل.
إذا قمت بتعريف خطوط متعددة في كس الخاص بك ، فسيستخدم متصفح الويب أول خط متاح من القائمة. إذا لم يتم العثور على أي من الخطوط في نظام تشغيل المستخدم ، يستخدم المتصفح الخط الافتراضي المحدد في كس.
فمن المستحسن لتحديد قائمة من الخطوط في كس ، بدءا من أكثر عمومية وتنتهي مع أكثر تحديدا. على سبيل المثال:
الجسم {
الخط الأسرة: أريال ، بلا الرقيق;
}
في هذا المثال ، سيتم استخدام الخط أريال إذا كان متوفرا على نظام التشغيل الخاص بالمستخدم. إذا لم يتم العثور على الخط أريال ، فإن المتصفح استخدام أي خط آخر من فئة بلا الرقيق.
استخدام خطوط النظام
في هتمل ، يمكنك تحديد قائمة خطوط النظام التي يجب استخدامها من قبل متصفح الويب عند عرض النص. يتم استخدام خاصية كس-فونت-فاميلي لهذا الغرض. يمكنك تضمين العديد من الخطوط في هذه القائمة ، وسيتم عرضها بدورها حتى يجد متصفح الويب خطا مناسبا متاحا.
مثال رمز لاستخدام خطوط النظام:
- تحديد أحجام الخطوط
- باستخدام
نص بحجم خط 80٪ من الحجم الأساسي.
- باستخدام الطبقات:
- نص مع فئة" كبيرة " وحجم خط 20 بكسل.
- ضع في اعتبارك أن أحجام الخطوط قد تختلف اعتمادا على الأجهزة والمتصفحات المختلفة. لذلك ، من المهم اختبار التغييرات على الأنظمة الأساسية المختلفة والتأكد من أن النص يبدو جيدا وقابل للقراءة للمستخدمين.
- إعداد الطباعة
- حدد الخطوط المناسبة: عند اختيار الخطوط ، تأكد من سهولة قراءتها وتطابقها جيدا مع بعضها البعض. استخدم فقط الخطوط الآمنة على الويب أو قم بتثبيت الخطوط عن طريق تنزيلها باستخدام كس.
- تعيين أحجام الخطوط: تحديد أحجام الخطوط للعناصر المختلفة على الصفحة. ضع في اعتبارك أن أحجام الخطوط يجب أن تكون كبيرة بما يكفي لتسهيل قراءة النص على شاشات الأجهزة الصغيرة.
استخدام المحارف: