يعد الخط عنصرا مهما في تصميم موقع الويب ، والذي يمكن أن يؤثر بشكل كبير على تصور المستخدم له. بدلا من استخدام الخطوط القياسية ، يمكنك تثبيت واستخدام الخط الخاص بك ، مثل شريف الحرية ، لخلق نظرة فريدة وجذابة.
تثبيت الخط الحرية شريف على موقع الويب الخاص بك ليست صعبة. ستحتاج إلى تنزيل ملف الخط من مورد موثوق به مثل خطوط جوجل. بعد ذلك ، يمكنك بسهولة إضافة الخط إلى موقعك باستخدام أنماط كس.
الخطوة 1: تحميل الخط الحرية شريف من مورد موثوق به.
انتقل إلى موقع جوجل الخطوط الرسمية والعثور على شريف الحرية. في صفحة الخط ، انقر فوق الزر" تحديد هذا الخط "، ثم انقر فوق الارتباط" تحديد العائلة". في نافذة جديدة ، سيطلب منك تنزيل أرشيف مضغوط بالخط. احفظ هذا الملف في مكان مناسب على جهاز الكمبيوتر الخاص بك.
بعد تنزيل ملف الخط ، قم بفك ضغط الأرشيف المضغوط. ستجد داخل الأرشيف العديد من ملفات الخطوط ، كل منها مصمم لنمط خط معين (عادي ، مائل ، غامق ، إلخ.). انتبه إلى أسماء الملفات لاستخدام أنماط الخطوط التي تحتاجها.
- تثبيت خط شريف الحرية
- الخطوة 1: قم بتنزيل الخط
- الخطوة 2: توصيل الخط بالموقع
- الخطوة 3: تطبيق الخط على الموقع
- الخطوة 4: التحقق من عرض الخط
تثبيت خط شريف الحرية
الخطوة 1: قم بتنزيل ملفات الخطوط
الخطوة الأولى هي تنزيل ملفات خط ليبرتي شريف. يمكنك العثور على هذه الملفات على الموقع الرسمي للخط أو على موارد أخرى.
الخطوة 2: انسخ ملفات الخطوط إلى الخادم
بعد تنزيل ملفات الخطوط ، انسخها إلى خادم موقعك. يوصى بإنشاء مجلد منفصل لملفات الخطوط بحيث يمكن إدارتها بسهولة في المستقبل.
الخطوة 3: أضف الرمز إلى ورقة الأنماط
افتح الملف باستخدام أنماط موقعك وأضف الكود التالي:
@الخط الوجه { |
الخط الأسرة: 'Liberation Serif'; |
font-style: normal; |
font-weight: normal; |
src: url('путь_к_файлу_шрифта/fontname.eot'); |
src: url('путь_к_файлу_шрифта/fontname.eot?#iefix') format('embedded-opentype'), |
url('путь_к_файлу_шрифта/fontname.woff') format('woff'), |
url('путь_к_файлу_шрифта/fontname.ttf') format('truetype'), |
url('путь_к_файлу_шрифта/fontname.svg#fontname') format('svg'); |
} |
استبدل "مسار ملف الخط" بالمسار إلى مجلد ملف الخط على الخادم الخاص بك. استبدل "اسم الخط" باسم ملف الخط (بدون امتداد).
الخطوة 4: تطبيق الخط على عناصر الصفحة
لتطبيق خط ليبرتي شريف على عناصر صفحة الويب الخاصة بك ، أضف الكود التالي إلى الأنماط المطلوبة:
الخط الأسرة :' تحرير الرقيق' ، الرقيق;
الآن سيتم تطبيق خط ليبرتي شريف على العناصر المحددة على موقعك.
الخطوة 1: قم بتنزيل الخط
1. انتقل إلى موقع جوجل الخطوط الرسمي على الرابط: https://fonts.google.com /.
2. اكتب "ليبريشريف" في شريط البحث.
3. ابحث عن الخط " ليبر باسكرفيل "وانقر على زر" تحديد الأنماط".
4. قم بتكوين الإعدادات التي تحتاجها في الأنماط
القسم 5. انقر فوق الزر نسخ في الزاوية اليمنى العليا.
6. في النافذة التي تفتح ، سيتم عرض رمز هتمل الذي تم إنشاؤه لتوصيل الخط.
7. انسخ هذا الرمز والصقه في " قسم " مستند هتمل الخاص بك.
الخطوة 2: توصيل الخط بالموقع
بعد تنزيل ملفات خط ليبرتي شريف على جهاز الكمبيوتر الخاص بك ، تحتاج إلى توصيله بموقعك. للقيام بذلك ، اتبع الخطوات التالية:
الخطوة 1: قم بإنشاء مجلد على الخادم الخاص بك حيث ستقوم بتخزين جميع ملفات الخطوط. أعطها اسما واضحا ، مثل"الخطوط".
الخطوة 2: انقل ملفات الخطوط التي تم تنزيلها إلى مجلد الخطوط الذي قمت بإنشائه في الخطوة السابقة.
الخطوة 3: افتح ملف كس الذي تستخدمه على موقع الويب الخاص بك للأنماط. إذا لم يكن لديك مثل هذا الملف ، فقم بإنشاء ملف جديد بامتداد".المغلق".
الخطوة 4: داخل ملف كس ، إضافة التعليمات البرمجية التالية:
/ * ربط الخط الحرية شريف */
@الخط الوجه {
الخط الأسرة: "تحرير الرقيق";
سرك: ورل("الخطوط/ليبيراتيونسريف-العادية.الصندوق");
}
لاحظ أنه يتم تحديد المسار إلى ملف الخط بالنسبة إلى المجلد حيث يوجد ملف كس. إذا كنت قد وضعت ملف الخط في مجلد آخر ، فحدد المسار المناسب.
الخطوة 5: احفظ التغييرات على ملف كس.
الآن تم توصيل الخط الحرية شريف بنجاح إلى موقع الويب الخاص بك ويمكنك استخدامه في الأنماط الخاصة بك.
الخطوة 3: تطبيق الخط على الموقع
لتطبيق خط ليبرتي شريف على موقعك ، تحتاج إلى إضافة قواعد التصميم إلى ملف كس:
المغلق حكم بناء الجملة:
محدد {
عائلة الخط :" تحرير الرقيق " ، الرقيق;
}
في هذه الحالة ، نحدد أنك بحاجة إلى تطبيق خط جديد لجميع العناصر التي تتطابق مع المحدد المحدد.
ح1 ، ح2 ، ح3 ، ح4 ، ح5 ، ح6 {
عائلة الخط :" تحرير الرقيق " ، الرقيق;
}
يمكنك أيضا تطبيق خط على عنصر معين عن طريق تحديد محدد. على سبيل المثال ، لتطبيق خط لجميع الفقرات (علامة
ص {
عائلة الخط :" تحرير الرقيق " ، الرقيق;
}
إضافة قواعد كس اللازمة إلى ملف كس الخاص بك أو العلامة
- على الصفحة وتأكد من أن الخط المحدد متصل ومتاح للاستخدام.
- بعد تطبيق قواعد كس ، قم بتحديث موقعك وتحقق مما إذا كان هناك خط جديد قد ظهر على الصفحة.
- الخطوة 4: التحقق من عرض الخط
- للتأكد من أن يتم تثبيت الخط الحرية شريف بنجاح وتطبيقها على موقع الويب الخاص بك ، اتبع الخطوات التالية:
- افتح صفحة الويب حيث تريد استخدام خط ليبرتي شريف.
- قم بتحديث الصفحة لرؤية أي تغييرات تم إجراؤها على الكود.
انظر إلى النص الموجود على الصفحة وتأكد من عرضه في خط ليبرتي شريف.