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