يعد اختيار الخط جانبا مهما من تصميم الويب ، لأن الخط المختار جيدا يمكن أن يحسن قابلية قراءة الموقع ويخلق الانطباع المطلوب لدى المستخدمين. في هذه المقالة ، سننظر في كيفية تثبيت خط على صفحة ويب. سنتحدث عن طرق مختلفة ، بما في ذلك استخدام الخطوط المضمنة ، وربط الخطوط باستخدام كس ، واستخدام خدمة خطوط جوجل.
الطريقة الأولى هي استخدام الخطوط المضمنة المثبتة مسبقا على معظم أجهزة الكمبيوتر. عادة ما تكون هذه الخطوط مناسبة لعناصر النص العادية على الموقع. تتضمن أمثلة هذه الخطوط أريال, تايمز نيو رومانو و فيردانا. لاستخدام الخط المدمج ، ما عليك سوى تحديد اسمه في خاصية عائلة الخط المغلق للعناصر المقابلة على الصفحة.
الطريقة الثانية هي توصيل الخطوط باستخدام كس. يتيح لك ذلك استخدام أي خطوط متوفرة على الإنترنت ، دون الحاجة إلى تثبيتها على جهاز الكمبيوتر الخاص بالمستخدم. للقيام بذلك ، قم بتنزيل ملف الخط من موقع الويب المناسب وقم بتوصيله بالصفحة باستخدام قاعدة @فونت-فيس في كس. ثم يمكنك استخدام الخط الجديد في خاصية عائلة الخط للعناصر المطلوبة.
خدمة الخطوط جوجل الخط هو الطريقة الثالثة لتثبيت الخط على صفحة ويب. تقدم جوجل الخطوط مجموعة كبيرة من الخطوط المجانية التي يمكن توصيلها بسهولة إلى موقع الويب الخاص بك. للقيام بذلك ، يكفي إضافة رمز هتمل خاص إلى بداية مستند هتمل وتحديد الخطوط الضرورية في كس. ستقوم خطوط جوجل بتوصيل الخطوط تلقائيا ، مما يجعل عملية التثبيت سريعة وسهلة للغاية.
وبالتالي ، يمكن أن يكون تثبيت خط على صفحة ويب مهمة سهلة ومريحة. من خلال اختيار الطريقة المناسبة ، يمكنك تحسين الانطباع المرئي لموقعك وتعزيز تفرده.
- اختيار الخط المناسب لصفحة ويب
- الخطوة 1: استكشاف موضوع والغرض من صفحة الويب
- الخطوة 2: معرفة أنواع الخطوط
- الخطوة 3: تحليل الخطوط المتاحة
- الخطوة 4: قم بتنزيل وتثبيت الخط المحدد
- الخطوة 5: قم بتوصيل الخط بصفحة الويب
- الخطوة 6: تحقق من عرض الخط بشكل صحيح
اختيار الخط المناسب لصفحة ويب
عند اختيار الخط ، يجب مراعاة العوامل التالية:
- سهولة القراءة: يجب أن يكون الخط سهل القراءة. يجب تفضيل الخطوط ذات الأحرف الواضحة والوضوح الممتاز.
- المطابقة المرئية: يجب أن يتطابق الخط مع النمط العام والمزاج العام لموقع الويب الخاص بك. على سبيل المثال ، بالنسبة لموقع ويب للشركة ، من الأفضل اختيار خط جاد واحترافي ، وبالنسبة لموقع ويب إبداعي ، يمكنك استخدام خطوط أكثر تعبيرا وغير عادية.
- التوفر: لا تدعم جميع الأجهزة والمتصفحات جميع الخطوط. لذلك ، من المهم اختيار خط يتم عرضه جيدا على الأنظمة الأساسية وأنظمة التشغيل المختلفة.
- تركيبة الخطوط: يمكن أن يساعد الجمع بين الخطوط المختلفة في إنشاء تصميم مذهل. يجب عليك اختيار الخطوط التي تمتزج بانسجام مع بعضها البعض وتخلق الانطباع الصحيح.
- الترخيص: قد تحتوي بعض الخطوط على قيود استخدام ، تحقق من ترخيص الخط للتأكد من أنه يمكنك استخدامه بحرية.
عند اختيار خط لصفحة ويب ، يوصى باستخدام الخدمات والأدوات التي تقدم مجموعة واسعة من الخطوط ، مثل خطوط جوجل وخطوط أدوبي وما إلى ذلك. عادة ما توفر هذه الخدمات التكامل مع الموقع من خلال اتصال خطوط الويب باستخدام كس.
الخطوة 1: استكشاف موضوع والغرض من صفحة الويب
قبل البدء في تثبيت خط على صفحة ويب ، تحتاج إلى البحث في موضوع والغرض من مشروع الويب الخاص بك. سيسمح لك ذلك بفهم الخط الذي يتناسب مع التصميم المقصود بشكل أفضل ونقل الحالة المزاجية الصحيحة.
الأسئلة الرئيسية التي يجب أن تطرحها على نفسك:
- ما هو الموضوع أو مجال النشاط المرتبط بصفحة الويب الخاصة بك?
- ما نوع أسلوب التصميم الذي تريد إنشاءه-بسيط ، إبداعي ، كلاسيكي ، معبر ، إلخ.?
- ما هو نوع الجو أو العاطفة التي يجب نقلها من خلال الخط?
بعد الإجابة على هذه الأسئلة ، يمكنك البدء في البحث واختيار الخط الصحيح. ضع في اعتبارك أن الخط يخلق مزاجا معينا وتأثيرا مرئيا ، لذلك عليك اختياره وفقا لذلك.
الخطوة 2: معرفة أنواع الخطوط
قبل تثبيت خط على صفحة ويب ، تحتاج إلى فهم أنواع الخطوط المختلفة. هناك عدة أنواع أساسية من الخطوط:
- الخطوط الرقيق (الخطوط الرقيق) - تحتوي هذه الخطوط على عناصر بارزة صغيرة (الرقيق) في نهايات الأحرف. وهي تستخدم عادة للنصوص المطبوعة مثل الكتب والصحف.
- الخطوط بلا الرقيق (الخطوط الرقيقة) هي الخطوط التي لا تحتوي على الرقيق في نهايات الأحرف. يتم استخدامها بشكل شائع في تصميم الويب لأنها تبدو أكثر حداثة وتقرأ بشكل أفضل على الشاشة.
- الخطوط أحادية المسافة هي الخطوط التي يكون لكل حرف فيها نفس العرض. عادة ما يتم استخدامها لعرض التعليمات البرمجية أو البرامج ، لأن هذا الخط مناسب للاستخدام لمحاذاة الأحرف في أعمدة.
- الخطوط المائلة هي الخطوط التي لها خط مائل ، على غرار مائل الأحرف المكتوبة بخط اليد. يتم استخدامها عادة لتمييز النص أو إضافة تلوين عاطفي أو التأكيد على الأهمية.
- الخطوط ذات العرض التعسفي هي الخطوط التي يمكن أن يكون لكل حرف فيها عرض مختلف. يتم استخدامها عادة لإنشاء تأثيرات مختلفة أو تصميم النص.
من المهم اختيار نوع الخط المناسب للمحتوى الخاص بك بحيث يبدو ممتعا من الناحية الجمالية وينقل الحالة المزاجية المناسبة للزائرين.
الخطوة 3: تحليل الخطوط المتاحة
قبل اختيار خط لصفحة الويب الخاصة بك ، من المهم تحليل الخطوط المتاحة واختيار أنسبها.
يتم تشجيع مطوري الويب على استخدام عدة مجموعات خطوط:
- الخطوط المثبتة على جهاز المستخدم
- خطوط الويب
- خطوط النظام
- الخطوط العالمية
1. الخطوط المثبتة على جهاز المستخدم:
عند استخدام مجموعة الخطوط هذه ، سيتم عرض صفحة الويب بخط متاح على جهاز المستخدم. من المهم أن تتذكر أن كل مستخدم قد يكون لديه خطوط مختلفة ، وقد لا يتم عرض الخط المحدد بشكل صحيح على جميع الأجهزة.
2. خطوط الويب:
خطوط الويب هي خطوط يتم تنزيلها من خادم ويب يمكن استخدامها على صفحات الويب بغض النظر عما إذا كانت هذه الخطوط متوفرة على جهاز المستخدم. تسمح لك خطوط الويب بتوسيع تحديد الخط لصفحة الويب الخاصة بك والتأكد من اتساق الخط المعروض عبر الأجهزة والمتصفحات.
3. خطوط النظام:
خطوط النظام هي خطوط متوفرة على نظام تشغيل المستخدم. إنها خيار شائع لصفحات الويب ، حيث يتم دعمها على نطاق واسع وعرضها جيدا على أجهزة مختلفة.
4. الخطوط العالمية:
الخطوط العالمية هي خطوط متوفرة على نطاق واسع في معظم الأجهزة وأنظمة التشغيل. باستخدام الخطوط العالمية ، يمكنك التأكد من عرض النص الخاص بك باستمرار على أجهزة مختلفة.
يعد اختيار خط على صفحة الويب جانبا مهما من جوانب التصميم والإدراك البصري. سيساعدك تحليل الخطوط المتاحة على اختيار أنسب الخطوط لمشروعك وخلق انطباع مرئي لطيف للمستخدمين.
الخطوة 4: قم بتنزيل وتثبيت الخط المحدد
بعد تحديد الخط الذي تحتاجه ، تحتاج إلى تنزيله على جهاز الكمبيوتر الخاص بك وتثبيته. سيسمح لك ذلك باستخدام الخط المحدد على صفحة الويب الخاصة بك. إليك كيفية القيام بذلك:
- ابحث عن رابط التنزيل للخط الذي حددته. يوجد هذا الرابط عادة على موقع ويب يوفر الخطوط التي تستخدمها.
- انقر فوق رابط التنزيل لتنزيل ملف الخط على جهاز الكمبيوتر الخاص بك. يمكن أن يكون تنسيق الملف .صندوق النقد الدولي, .أوتف أو غيرها ، اعتمادا على الخط المحدد.
- انتقل إلى مجلد الملفات التي تم تنزيلها على جهاز الكمبيوتر الخاص بك وابحث عن ملف الخط الذي تم تنزيله.
- انقر بزر الماوس الأيمن فوق ملف الخط وحدد تثبيت من قائمة السياق. سيؤدي هذا إلى بدء عملية تثبيت الخط على جهاز الكمبيوتر الخاص بك.
- انتظر حتى اكتمال تثبيت الخط. قد تحتاج إلى تأكيد عملية التثبيت باتباع الإرشادات التي تظهر على الشاشة.
بعد اكتمال التثبيت ، سيكون الخط متاحا للاستخدام على صفحة الويب الخاصة بك. تحتاج فقط إلى تحديد الخط المحدد في رمز كس من صفحتك لاستخدامه للنص والعناصر الأخرى.
الخطوة 5: قم بتوصيل الخط بصفحة الويب
يتم توصيل الخط المحدد بصفحة الويب باستخدام رمز كس. للقيام بذلك ، تحتاج إلى إنشاء كتلة نمط داخل العلامة
هناك طريقتان لتوصيل الخط:
- قم بتوصيل خط باستخدام ارتباط بملف خط:
- قم بتنزيل ملف الخط وضعه في مجلد المشروع الخاص بك.
- في كتلة الأنماط ، استخدم التعليمات البرمجية التالية:
- مثال لخط موجود في مجلد " الخطوط "ويسمى " الخط".الصندوق":
- الخط الوجه {
- الخط الأسرة: "كوستومفونت";
- سرك: ورل("الخطوط/الخط.تف") شكل ("تروتايب");
- }
- توصيل خط باستخدام رابط إلى خط من خطوط جوجل:
- افتح خطوط جوجل وابحث عن الخط الذي تريده.
- انسخ الرابط إلى الخط.
- في كتلة الأنماط ، استخدم التعليمات البرمجية التالية:
- الخط الوجه {
- الخط الأسرة: "كوستومفونت";
- سرك: ورل("https://fonts.googleapis.com/css?family=Font+Name&display=swap");
- }
ربط الخط باستخدام وصلة إلى ملف الخط يسمح لك لإدارة محتويات الملف ، وصلة إلى خط من الخطوط جوجل يجعل من الاسهل للاتصال وتحديث الخط.
الخطوة 6: تحقق من عرض الخط بشكل صحيح
بعد الانتهاء من جميع الخطوات السابقة ، تحتاج إلى التحقق من عرض الخط المحدد بشكل صحيح على صفحة الويب.
للقيام بذلك ، افتح صفحة الويب الخاصة بك في أي متصفح ويب واعرض النص الذي يجب عرضه مع تثبيت الخط.
إيلاء الاهتمام لارتفاع الحروف ، وعرض الأحرف والمظهر العام للنص. تأكد من عرض الخط بدون تشويه وأن عناصر الصفحة تحتفظ بالموقع الصحيح.
يجدر أيضا التحقق من عرض الخط بشكل صحيح على أجهزة مختلفة ودقة الشاشة للتأكد من أنه يبدو رائعا لجميع المستخدمين.
إذا وجدت أي مشاكل في عرض الخط ، يمكنك محاولة إجراء تغييرات على الرمز أو اختيار خط آخر يلبي متطلباتك بشكل أفضل.
يعد التحقق من عرض الخط الصحيح خطوة مهمة قبل نشر صفحة الويب الخاصة بك ، حيث يساهم عرض النص الصحيح في سهولة القراءة ويعزز الجماليات العامة لموقعك على الويب.