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