الخط هو أحد العناصر الرئيسية لتصميم الويب. يمكن أن يخلق جوا فريدا على الموقع والتحكم في مزاج المستخدمين. مونتسيرات هي أحد الخطوط الشائعة المستخدمة على نطاق واسع في تصميم الويب الحديث. هذا الخط الحديث بخطوط نظيفة وأسلوب أنيق رائع للعناوين والمحتوى وعناصر التصميم الأخرى.
لاستخدام خط مونتسيرات على موقع ويب ، تحتاج إلى توصيله باستخدام كس. في هذا الدليل خطوة بخطوة ، سنخبرك بكيفية القيام بذلك.
الخطوة 1: ابدأ بتنزيل وتثبيت خط مونتسيرات على جهاز الكمبيوتر الخاص بك. يمكنك العثور عليه على منصات مختلفة مجانا أو شراء ترخيص للاستخدام التجاري. بعد تثبيت الخط ، يجب أن يكون لديك ملفات خطوط بتنسيقات.ووف,.2 أو .الصندوق.
الخطوة 2: قم بإنشاء مجلد" خطوط " داخل مشروعك وضع ملفات خطوط مونتسيرات هناك. من الأفضل تخزين ملفات الخطوط في مجلد منفصل لراحة تنظيم المشروع.
...
- الخطوة 1: قم بتنزيل خط مونتسيرات
- تعرف على مكان تنزيل ملف خط مونتسيرات
- الخطوة 2: تفريغ الأرشيف
- قم بتثبيت البرنامج لفك ضغط الأرشيفات واستخراج الملفات من الأرشيف الذي تم تنزيله
- الخطوة 3: إنشاء مجلد للخط
- قم بإنشاء مجلد جديد على جهاز الكمبيوتر أو الخادم الخاص بك حيث ستضع ملفات الخطوط
- الخطوة 4: إضافة خط إلى ملف كس
- افتح ملف كس الخاص بك وأضف الرمز لتوصيل خط مونتسيرات
- الخطوة 5: توصيل ملف كس إلى صفحة هتمل
- سؤال وجواب
- ما هو الخط مونتسيرات?
- كيف يمكنني الحصول على الخط مونتسيرات?
- كيف يمكنني معرفة ما اذا كان يتم توصيل مونتسيرات بنجاح إلى موقع الويب الخاص بي?
الخطوة 1: قم بتنزيل خط مونتسيرات
الخطوة الأولى لتوصيل الخط مونتسيرات في ملف كس الخاص بك أو في وثيقة هتمل هو تحميل الخط. هناك طريقتان للقيام بذلك:
- تنزيل خط عبر التخزين المحلي
- تحميل الخط عبر خدمة الخطوط جوجل الخط
1. تنزيل الخط عبر التخزين المحلي:
إذا كان لديك بالفعل ملف خط مونتسيرات محلي على جهاز الكمبيوتر الخاص بك ، فيمكنك تحميله على الخادم الخاص بك وتوصيله بمستند كس الخاص بك باستخدام الكود التالي:
@الخط الوجه {
الخط الأسرة: 'مونتسيرات';
() عنوان الموقع (مسار الملفات/مونتسيرات).');
الخط الوزن: عادي;
نمط الخط: عادي;
}
تحتاج إلى تحديد المسار إلى ملف مونتسيرات.الصناديق على الخادم الخاص بك.
2. تحميل الخط من خلال خدمة الخطوط جوجل الخط:
هناك طريقة أخرى لتنزيل خط مونتسيرات وهي استخدام خدمة خطوط جوجل. ويوفر حرية الوصول إلى مجموعة واسعة من الخطوط ، بما في ذلك مونتسيرات.
لاستخدام مونتسيرات عبر خطوط جوجل ، تحتاج إلى إدراج التعليمات البرمجية التالية في رأس صفحة هتمل الخاصة بك:
سيقوم هذا الرمز بتحميل خط مونتسيرات بأوزان 400 و 700 ، وإتاحته على صفحة الويب الخاصة بك.
الآن لديك الخط مونتسيرات تحميلها ، وكنت على استعداد للانتقال إلى الخطوة التالية — باستخدام هذا الخط في ملف كس الخاص بك أو في وثيقة هتمل.
تعرف على مكان تنزيل ملف خط مونتسيرات
يعد خط مونتسيرات أحد أكثر الخطوط شيوعا في تصميم الويب. يتميز هذا الخط بمظهر عصري وأنيق ، مما يجعله اختيارا ممتازا لأنواع مختلفة من المشاريع. إذا كنت ترغب في استخدام خط مونتسيرات على موقع الويب الخاص بك ، فستحتاج إلى تنزيل ملف الخط وتثبيته. في هذا القسم ، سنخبرك بمكان العثور على ملف خط مونتسيرات وكيفية تثبيته.
- انتقل إلى موقع جوجل الخطوط الرسمي (https://fonts.google.com /).
- في مربع البحث ، اكتب "مونتسيرات".
- ابحث عن خط مونتسيرات في نتيجة البحث وانقر عليه.
- في صفحة الخط ، سترى العديد من خيارات الخط والوزن التي يمكنك الاختيار من بينها. حدد الخيارات الضرورية وانقر على الزر" تحديد هذا النمط " على اليمين.
- بعد تحديد تفضيلاتك ، سترى الكتلة " 2 " في أسفل الصفحة. الخطوط المحددة". ستحتوي هذه الكتلة على رموز توصيل الخط بموقعك. يمكنك اختيار خيارات رمز مختلفة حسب احتياجاتك.
- حدد الرمز الذي تحتاجه ونسخه.
- افتح ملف نمط موقعك (عادة ملف بامتداد.المغلق) ولصق التعليمات البرمجية المنسوخة في المكان المناسب.
الآن لديك ملف بخط مونتسيرات ويمكنك استخدامه على موقع الويب الخاص بك. تأكد من توصيل ملف الخط بالطريقة الصحيحة بحيث يتم عرضه بشكل صحيح على جميع الأجهزة والمتصفحات.
الخطوة 2: تفريغ الأرشيف
عادة ما يتم توفير خطوط مونتسيرات كأرشيف قابل للتنزيل. لبدء استخدام خط مونتسيرات في مشروعك ، يجب عليك فك ضغط الأرشيف والحصول على ملفات الخطوط.
لتفريغ الأرشيف ، ستحتاج إلى أرشيفي. اعتمادا على نظام التشغيل الذي تستخدمه ، قد يكون لديك أرشيفات مثبتة مسبقا أو قد تحتاج إلى تثبيت أحد الأرشيفات العديدة المتاحة.
هنا هو تعليمات بسيطة لتفريغ أرشيف باستخدام برنامج 7 زيب:
تحميل وتثبيت أرشيفي 7 زيب. يمكنك العثور عليه على الموقع الرسمي 7 زيب وتنزيله وفقا للتعليمات لنظام التشغيل الخاص بك.
ابحث عن أرشيف خطوط مونتسيرات الذي تم تنزيله. من المرجح أن يكون موجودا في مجلد التنزيلات أو في مجلد حفظ الملف الذي حددته.
انقر بزر الماوس الأيمن على الأرشيف وحدد"استخراج هنا". نتيجة لذلك ، سيظهر مجلد جديد باسم خطوط مونتسيرات.
تهانينا ، لقد نجحت في تفكيك الأرشيف باستخدام خطوط مونتسيرات! الآن يمكنك الذهاب إلى الخطوة التالية والبدء في ربط هذه الخطوط إلى المشروع الخاص بك باستخدام كس.
قم بتثبيت البرنامج لفك ضغط الأرشيفات واستخراج الملفات من الأرشيف الذي تم تنزيله
لاستخراج الملفات من الأرشيف الذي تم تنزيله ، ستحتاج إلى برنامج لفك ضغط الأرشيفات. هناك العديد من البرامج الشعبية مثل ينرر ، 7 زيب وبرنامج لضغط الملفات التي يمكن أن تفعل هذه المهمة.
- انتقل إلى الموقع الرسمي للبرنامج الذي تريد تثبيته.
- تصفح الإصدارات المتاحة من البرنامج وحدد الإصدار الذي يتوافق مع نظام تشغيل جهاز الكمبيوتر الخاص بك (ويندوز أو ماك أو لينكس).
- انقر فوق رابط التنزيل واحفظ ملف التثبيت على جهاز الكمبيوتر الخاص بك.
- بعد تنزيل ملف التثبيت ، قم بتشغيله باتباع الإرشادات التي تظهر على الشاشة لتثبيت البرنامج على جهاز الكمبيوتر الخاص بك.
عند تثبيت برنامج تفريغ الأرشيف ، افتحه وابحث عن الأرشيف الذي تم تنزيله باستخدام خطوط مونتسيرات.
- حدد الأرشيف وانقر بزر الماوس الأيمن.
- في قائمة السياق ، حدد الخيار" استخراج الملفات " أو ما شابه.
- حدد المجلد الذي تريد استخراج ملفات خطوط مونتسيرات فيه.
- انقر فوق الزر" استخراج "أو" موافق " وانتظر حتى تكتمل عملية الاستخراج.
بعد اكتمال عملية الاستخراج ، ستكون ملفات خطوط مونتسيرات متاحة في المجلد الذي تختاره. أنت الآن على استعداد لاستخدام الخط مونتسيرات على موقع الويب الخاص بك باستخدام المغلق.
الخطوة 3: إنشاء مجلد للخط
لتوصيل خط مونتسيرات بموقعك على الويب ، تحتاج إلى إنشاء مجلد حيث سيتم تخزين ملفات الخطوط.
1. قم بإنشاء مجلد جديد على جهاز الكمبيوتر الخاص بك أو على الخادم حيث يتم استضافة موقع الويب الخاص بك. يمكنك تسمية هذا المجلد بكل ما تريد ، ولكن يوصى بإعطاء المجلدات أسماء ذات معنى لسهولة التشغيل.
2. افتح الأرشيف الذي تم تنزيله باستخدام ملفات خطوط مونتسيرات.
3. ستجد داخل الأرشيف العديد من ملفات الخطوط ذات الامتدادات المختلفة ، مثل .صندوق النقد الدولي, .ووف,.2, إلخ. قد تختلف امتدادات الملفات بناء على تنسيقات الخطوط التي قمت بتنزيلها.
4. انسخ جميع ملفات الخطوط من الأرشيف والصقها في المجلد الذي قمت بإنشائه على جهاز الكمبيوتر الخاص بك أو على الخادم. تأكد من أن جميع الملفات قد تم نسخها بشكل صحيح وأنها في نفس المجلد.
الآن بعد أن أصبح لديك مجلد يحتوي على ملفات خطوط مونتسيرات ، يمكنك المتابعة إلى الخطوة التالية — توصيل الخط بموقعك على الويب.
قم بإنشاء مجلد جديد على جهاز الكمبيوتر أو الخادم الخاص بك حيث ستضع ملفات الخطوط
قبل توصيل خط مونتسيرات بمشروعك ، تحتاج إلى إنشاء مجلد جديد حيث ستضع جميع ملفات الخطوط. سيساعدك هذا على تنظيم هذه الملفات وإدارتها بسهولة.
يمكنك إنشاء مجلد جديد على جهاز الكمبيوتر أو الخادم على النحو التالي:
- فتح مستكشف الملفات (أو الباحث على ماك) على جهاز الكمبيوتر الخاص بك أو الخادم.
- انتقل إلى الدليل حيث تريد إنشاء مجلد جديد (على سبيل المثال ، دليل المشروع الخاص بك).
- انقر بزر الماوس الأيمن (أو اضغط باستمرار على مفتاح التحكم وانقر) داخل هذا الدليل وحدد "إنشاء مجلد جديد" من قائمة السياق.
- أدخل اسما للمجلد الجديد (على سبيل المثال ، "الخطوط") واضغط على إدخال (أو إرجاع).
الآن لديك مجلد جديد حيث يمكنك وضع جميع ملفات الخط مونتسيرات اللازمة لربط هذا الخط لمشروعك.
الخطوة 4: إضافة خط إلى ملف كس
بعد تنزيل وتثبيت خط مونتسيرات على جهاز الكمبيوتر الخاص بك ، تحتاج إلى إضافته إلى ملف كس الخاص بك.
أولا ، قم بإنشاء قسم جديد في ملف كس الخاص بك سيكون مسؤولا عن تصميم النص باستخدام خط مونتسيرات. يمكنك تسمية هذا القسم كما تريد ، على سبيل المثال:
.مونتسيرات-الخط {
الخط الأسرة: 'مونتسيرات' ، بلا الرقيق;
}
في هذا المثال ، أنشأنا فئة جديدة".مونتسيرات-الخط " ، الذي يحدد خط مونتسيرات للنص. تشير القيمة" بلا الرقيق " إلى أنه في حالة عدم توفر خط مونتسيرات ، سيستخدم المتصفح خطا مختلفا بلا الرقيق.
الآن ، لتطبيق هذا النمط على عنصر معين على موقع الويب الخاص بك ، تحتاج إلى إضافة هذه الفئة إلى العنصر المقابل. على سبيل المثال ، إذا كنت تريد تطبيق خط مونتسيرات على رأس صفحة الويب الخاصة بك ، يمكنك إضافة التعليمات البرمجية التالية:
عنوان صفحة الويب الخاصة بك
في هذا المثال ، أضفنا فئة "خط مونتسيرات" إلى العنصر لتطبيق نمط خط مونتسيرات على هذا العنوان.
يمكنك أيضا استخدام هذه الفئة لعناصر أخرى على موقع الويب الخاص بك ، مثل الفقرات والقوائم وما إلى ذلك.، ببساطة عن طريق إضافته إلى العلامة أو العنصر المناسب.
الآن ، بعد إضافة الخط وتصميمه إلى ملف كس الخاص بك ، يمكنك أن ترى كيف يتم عرضه على موقع الويب الخاص بك.
افتح ملف كس الخاص بك وأضف الرمز لتوصيل خط مونتسيرات
للبدء ، افتح ملف كس الخاص بك باستخدام أي محرر نصوص مثل المفكرة++ أو نص سامية. ثم أضف الكود التالي إلى قسم ملف كس الخاص بك:
@استيراد رابط ('https://fonts.googleapis.com/css2 ?family=Montserrat:wght@300; 400; 500; 600; 700 & عرض = مبادلة');
يستخدم هذا الرمز قيمة عنوان ورل لتوصيل خط مونتسيرات باستخدام خدمة خطوط جوجل. من المهم أن يكون جهاز الكمبيوتر الخاص بك متصلا بالإنترنت حتى يتمكن المتصفح من تنزيل الخط من الإنترنت.
بعد إضافة هذا الرمز ، احفظ التغييرات في ملف كس الخاص بك. في المرة التالية التي يتم فيها تحميل صفحة الويب الخاصة بك ، سيقوم المتصفح بتحميل خط مونتسيرات وتطبيقه على العناصر المناسبة على صفحة الويب الخاصة بك.
الخطوة 5: توصيل ملف كس إلى صفحة هتمل
بعد تنزيل ملف كس لخط مونتسيرات وحفظه على جهازك ، يمكنك البدء في توصيله بصفحة هتمل. للقيام بذلك ، اتبع التعليمات أدناه:
- افتح ملف هتمل الذي تريد تصميمه باستخدام خط مونتسيرات.
- ابحث عن علامة الفتح. عادة ما يتم وضعها مباشرة بعد علامة الافتتاح.
- أضف الكود التالي داخل العلامة:
استبدل" مسار الملف " بالمسار الفعلي لملف كس المحفوظ. إذا كان ملف كس في نفس المجلد مثل ملف هتمل ، يمكنك تحديد اسم الملف فقط.
ونتيجة لذلك ، يجب أن التعليمات البرمجية تبدو شيئا من هذا القبيل:
الآن سيتم توصيل ملف كس من الخط مونتسيرات بشكل صحيح إلى صفحة هتمل الخاص بك ، ويمكنك استخدام هذا الخط في رمز كس الخاص بك إلى عناصر نمط من صفحة ويب.
سؤال وجواب
ما هو الخط مونتسيرات?
خط مونتسيرات هو خط هندسي تقريبي حديث صممه خوان هوارانجا. لديها خط واضح ونظيف ، مما يجعلها خيارا ممتازا لمختلف المشاريع المطبعية.
كيف يمكنني الحصول على الخط مونتسيرات?
يمكنك الحصول على خط مونتسيرات عن طريق تنزيله من أحد مواقع الويب العديدة التي تقدم تنزيلات مجانية للخط. على سبيل المثال ، يمكنك زيارة خطوط جوجل والعثور على خط مونتسيرات هناك.
كيف يمكنني معرفة ما اذا كان يتم توصيل مونتسيرات بنجاح إلى موقع الويب الخاص بي?
للتحقق مما إذا كان خط مونتسيرات قد تم توصيله بنجاح بموقعك على الويب ، يمكنك استخدام أدوات المطور في متصفحك. راجع رمز صفحتك وتأكد من تحديد خط مونتسيرات في ملف كس وأن الروابط إلى ملفات الخطوط صحيحة. تأكد أيضا من عرض الخط بشكل صحيح على صفحتك.