عند إنشاء مواقع الويب ، فإن أحد الجوانب المهمة هو اختيار الخطوط لمحتوى النص. يمكن أن تكون مجموعات الخطوط القياسية التي تقدمها المتصفحات محدودة للغاية ، وأحيانا لا تفي بمتطلبات التصميم. في هذه الحالة ، يصبح من الضروري تثبيت واستخدام خطوط إضافية.
هناك عدة طرق لتثبيت الخطوط على موقع ويب ، أحدها تثبيت محلي. تتيح لك هذه الطريقة تنزيل واستخدام الخطوط المخزنة على الخادم والمتصلة بموقعك من خلال التعليمات البرمجية. توفر الخطوط المثبتة محليا المرونة والتحكم في مظهر النص على موقعك.
لتثبيت الخطوط محليا ، تحتاج إلى تنزيل ملفات الخطوط وربطها بشكل صحيح من خلال رمز موقع الويب الخاص بك. للبدء ، حدد الخط المطلوب وابحث عن ملفاته عبر الإنترنت أو قم بشرائها من الموردين الرسميين المناسبين. ثم قم بتحميل هذه الملفات إلى الخادم الخاص بك.
- تثبيت الخطوط على موقع ويب
- إعداد الخطوط للتثبيت
- اختيار الخطوط المناسبة
- تثبيت الخطوط على موقع ويب
- 1. استخدام خطوط النظام القياسية
- 2. ربط خطوط الويب باستخدام كس
- ضبط أنماط الخطوط
- فحص الخطوط وتحسينها
- سؤال وجواب
- ما الخطوط يمكنني تثبيت على موقع الويب الخاص بي?
- ما هي الطرق التي يمكنني استخدامها لتثبيت الخطوط على موقعي?
- كيف يمكنني تثبيت الخطوط محليا على موقعي?
تثبيت الخطوط على موقع ويب
موقع الويب هو منتج كامل لا يتضمن محتوى نصي فحسب ، بل يتضمن أيضا عناصر رسومية مثل الصور والخطوط. في هذا القسم ، سننظر في كيفية تثبيت الخطوط على موقعك وجعلها أكثر جاذبية للزوار.
الخطوط هي مجموعة من الأحرف التي يتم استخدامها لعرض النص على صفحة ويب. بشكل افتراضي ، تقدم المتصفحات مجموعة من الخطوط التي سيتم استخدامها لعرض محتوى النص على الموقع. ومع ذلك ، قد تحتاج أحيانا إلى استخدام الخطوط الخاصة بك لمنح موقعك أسلوبا فريدا والتميز عن الآخرين.
هناك عدة طرق لتثبيت الخطوط على موقعك. واحدة من أسهل الطرق هي استخدام ملفات الخطوط الخارجية مثل خطوط جوجل. توفر خطوط جوجل مجموعة كبيرة من الخطوط المجانية التي يمكنك الاتصال بموقعك عن طريق إضافة بضعة أسطر من التعليمات البرمجية إلى قسم من صفحة الويب الخاصة بك.
طريقة أخرى هي استخدام الخطوط المحلية. الخطوط المحلية هي الخطوط التي يتم تنزيلها من الخادم الخاص بك إلى جانب الملفات الأخرى على موقعك. للقيام بذلك ، ستحتاج إلى الحصول على ملفات الخطوط بالتنسيق المطلوب (عادة ما تكون هذه تنسيقات.صندوق النقد الدولي, .أوتف, .ووف أو .2) وحفظها على الخادم الخاص بك. يمكنك بعد ذلك استخدام هذه الملفات في رمز صفحة الويب الخاصة بك لإخبار المتصفح بالخط الذي يجب استخدامه لعرض النص.
لاستخدام الخطوط المحلية ، تحتاج إلى تحديد المسار إلى ملفات الخطوط في خاصية كس ، المسؤولة عن عرض النص. للقيام بذلك،يمكنك استخدام قاعدة @الخط الوجه. داخل هذه القاعدة ، يمكنك تحديد المسار إلى ملفات الخطوط واسمها ، والتي سيتم استخدامها في رمز صفحة الويب الخاصة بك.
مثال على استخدام قاعدة @وجه الخط:
@الخط الوجه {
الخط الأسرة: 'ميفونت';
سرك: ورل ('مسار ملف الملف');
}
بعد إنشاء قاعدة @ الخط الوجه ، يمكنك استخدام اسم الخط (في هذه الحالة 'ميفونت') في خصائص كس المسؤولة عن عرض النص ، على سبيل المثال:
ح1{
الخط الأسرة: 'ميفونت' ، أريال ، بلا الرقيق;
}
وهكذا ، سيتم استخدام الخط مع اسم 'ميفونت' لعناوين المستوى الأول على موقع الويب الخاص بك. إذا كان المتصفح لا يمكن تحميل الخط المحدد ، فإنه سيتم التبديل تلقائيا إلى الخط التالي من القائمة–أريال ، وإذا كان هذا الخط غير متوفر ، ثم إلى معيار بلا الرقيق الخط بلا الرقيق.
الآن أنت تعرف كيفية تثبيت الخطوط على موقع الويب الخاص بك. اختر الخطوط التي تتناسب مع أسلوبك وتساعدك على نقل رسالتك إلى زوار الموقع. ولا تنس أن الخطوط لا يمكن أن تكون جميلة فحسب ، بل يمكن أن تكون عملية أيضا – يمكنها تحسين إمكانية قراءة النص وفهمه على موقعك.
إعداد الخطوط للتثبيت
قبل تثبيت الخطوط على موقعك ، تحتاج إلى اتباع بعض الخطوات الأولية:
- اختيار الخط
- إعداد ملفات الخط
- التحقق من الخطوط
الخطوة الأولى هي تحديد الخطوط اللازمة لموقعك. اتخاذ قرار بشأن موضوع وأسلوب موقعك لاختيار الخطوط المناسبة. يرجى ملاحظة أنه يجب ترخيص الخطوط لاستخدام الويب.
بعد تحديد الخطوط ، تحتاج إلى إعدادها للتثبيت على الموقع. وعادة ما يتم توفير الخطوط في أشكال مختلفة مثل تروتايب (تف) ، أوبن (أوتف) ، تنسيق الخط المفتوح على شبكة الإنترنت (وف) وغيرها. يوصى باستخدام العديد من تنسيقات الخطوط لدعم المتصفحات المختلفة. للقيام بذلك ، يمكنك استخدام محولات الخطوط عبر الإنترنت.
بعد إعداد ملفات الخطوط ، تحتاج إلى التحقق منها للتأكد من أنها تعمل بشكل صحيح على أجهزة ومتصفحات مختلفة. يمكن القيام بذلك باستخدام العديد من أدوات وخدمات التحقق من صحة الخط.
بعد الانتهاء من كل هذه الخطوات ، ستكون جاهزا لتثبيت الخطوط على موقعك واستخدامها لتصميم المحتوى الخاص بك.
اختيار الخطوط المناسبة
يعد اختيار خط لموقع الويب الخاص بك خطوة مهمة لإنشاء محتوى جذاب وقابل للقراءة. ستساعد الخطوط المناسبة في تعزيز الانطباع المرئي للموقع ، فضلا عن تسهيل إدراك المعلومات.
عند اختيار الخطوط المناسبة لموقعك ، من المهم مراعاة عدة عوامل:
- الغرض من الموقع وطبيعته: على سبيل المثال ، إذا كان موقعك مخصصا لجمهور محترف ، فعليك اختيار خط جاد ورسمي. إذا كان موقعك يستهدف جمهورا مبدعا ، فيمكنك استخدام المزيد من الخطوط غير القياسية والتعبيرية.
- سهولة القراءة: يجب أن يكون الخط سهل القراءة ، حتى في الحجم الصغير. انتبه إلى الأحرف المستخدمة بشكل متكرر مثل" هـ "و" س "و" ص "و" أ " للتأكد من أنها مرئية بوضوح.
- النمط والمزاج: يجب أن يتطابق الخط مع نمط ومزاج موقعك. على سبيل المثال ، بالنسبة لموقع ويب للشركة ، يجب عليك اختيار خط كلاسيكي واحترافي ، وبالنسبة لموقع ويب إبداعي ، يمكنك اختيار خط أكثر تعبيرا وغير قياسي.
عندما تقرر النمط العام والطابع العام للخط لموقعك ، يمكنك البدء في اختيار خطوط معينة. هناك عدة طرق للحصول على الخطوط المناسبة:
- خطوط الويب: هذه خطوط خاصة يتم تنزيلها من خادم الويب عند تحميل الصفحة. يمكنك تحديد الخطوط وتنزيلها من منصات مختلفة مثل خطوط جوجل أو خطوط أدوبي.
- خطوط نظام التشغيل: يمكنك أيضا استخدام الخطوط القياسية المتوفرة على أجهزة كمبيوتر المستخدمين. هذه هي الخطوط المتاحة للجمهور مثل أريال ، فيردانا ، تايمز نيو رومان وغيرها. ومع ذلك ، يرجى ملاحظة أنه قد لا يكون لدى المستخدمين خط معين مثبت.
- تركيبة الخط: يمكنك استخدام مزيج من عدة خطوط على موقعك لتحقيق تمييز مرئي للعناصر المختلفة. على سبيل المثال ، يمكن كتابة العناوين بخط واحد والنص الرئيسي بخط آخر.
يعد التنوع أحد الجوانب الرئيسية عند اختيار الخطوط لموقعك على الويب. بالإضافة إلى الانطباع المرئي ، يجب أن تفكر في إمكانية الوصول إلى الخطوط لجميع المستخدمين ، بغض النظر عن دقة الشاشة ونظام التشغيل.
| الخط | مثال | الوصف |
|---|---|---|
| أريال | نموذج النص | غالبا ما يستخدم خط بلا الرقيق ، وهو خط متاح للجمهور ، في تصميم الويب. |
| فيردانا | نموذج النص | وغالبا ما يستخدم الخط بلا الرقيق مع قراءة عالية لمحتوى النص. |
| تايمز نيو رومان | نموذج النص | خط رقيق كلاسيكي ، مناسب للاستخدام في السياقات الرسمية والخطيرة. |
سيساعد استخدام الخطوط المناسبة في تحسين التجربة المرئية للمستخدمين وجعل موقعك أكثر جاذبية. تذكر أن اختيار الخطوط يجب أن يكون واعيا ومتسقا مع الغرض من موقع الويب الخاص بك وطبيعته.
تثبيت الخطوط على موقع ويب
تعد الخطوط عنصرا أساسيا في تصميم موقع الويب الذي يساعد في نقل جوه وإمكانية التعرف عليه. يتيح لك تثبيت الخطوط على موقع ويب التحكم في مظهر عناصر النص وإنشاء نمط فريد.
هناك عدة طرق لتثبيت الخطوط على موقع الويب:
- باستخدام خطوط النظام القياسية.
- ربط خطوط الويب باستخدام المغلق.
1. استخدام خطوط النظام القياسية
أسهل طريقة لتعيين الخط للنص على موقعك هي استخدام خطوط النظام. للقيام بذلك ، يمكنك تحديد قائمة الخطوط في كس ، وسوف يستخدم المتصفح أول خط متاح من هذه القائمة على جهاز الكمبيوتر الخاص بالمستخدم. على سبيل المثال:
الخط الأسرة: أريال ، بلا الرقيق;
الخط الأسرة: "تايمز نيو رومان" ، تايمز ، الرقيق;
يضمن هذا الأسلوب التوافق مع معظم الأجهزة والأنظمة ، ولكنه لا يضمن نفس مظهر النص على أجهزة كمبيوتر مختلفة.
2. ربط خطوط الويب باستخدام كس
لمزيد من التحكم الدقيق في مظهر النص على الموقع ، يمكنك استخدام خطوط الويب. خطوط الويب هي ملفات خطوط يتم تنزيلها من الخادم وتثبيتها على الصفحة. هناك العديد من الخدمات الشائعة التي توفر خطوط الويب ، مثل خطوط جوجل وخطوط أدوبي وغيرها.
لتوصيل خط ويب باستخدام كس ، اتبع الخطوات التالية:
- حدد خط الويب المناسب من الخدمة.
- انسخ رمز الاتصال المقدم من الخدمة. عادة ما يكون هذا هو الرمز الذي يجب إدراجه في قسم من مستند هتمل الخاص بك.
- قم بتطبيق الخط على العناصر المطلوبة في الصفحة في كس باستخدام خاصية عائلة الخط:
@استيراد رابط ('https://fonts.googleapis.com/css2?family=Font+Name&display=swap');
الجسم {
الخط الأسرة: 'اسم الخط' ، بلا الرقيق;
}
بهذه الطريقة يمكنك بسهولة تثبيت واستخدام خطوط مختلفة على موقع الويب الخاص بك لإنشاء تصميم فريد وتحسين تجربة المستخدم.
ضبط أنماط الخطوط
بعد تثبيت الخطوط الضرورية وتوصيلها بموقعك ، يمكنك البدء في تكوين أنماط لهذه الخطوط. فيما يلي الطرق الرئيسية لتخصيص أنماط الخطوط على موقع الويب:
}
a {
- font-family: 'Arial', sans-serif;
- font-size: 12px;
text-decoration: none;
}