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