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