يمكن أن تعزز الخطوط المخصصة مظهر موقع الويب الخاص بك بشكل كبير وتساعدك على التميز عن العديد من الخطوط الأخرى. إنها تخلق أسلوبا وجوا فريدا يساعد على تعزيز الانطباع البصري. ومع ذلك ، من أجل استخدام الخطوط التي تم تنزيلها على موقعك ، تحتاج إلى معرفة كيفية إضافتها بشكل صحيح. في هذه المقالة ، ونحن سوف اقول لكم عن تعليمات مفصلة من شأنها أن تساعدك على تحميل وتثبيت هذه الخطوط على موقع الويب الخاص بك.
الخطوة رقم 1: قم بتنزيل الخطوط من المورد المحدد. يمكنك العثور على العديد من الموارد التي تقدم الخطوط ، المجانية والمدفوعة. عند اختيار الخط ، تأكد من الانتباه إلى ترخيصه. تأكد من أن لديك الحق في استخدام الخط على موقعك.
الخطوة # 2: قم بفك ضغط أرشيف الخطوط التي تم تنزيلها. عادة ما يتم توفير الخطوط كأرشيف يحتاج إلى فك حزمه قبل الاستخدام. لفك الأرشيف ، قد تحتاج إلى برنامج أرشيفي ، مثل وينرار أو 7 زيب.
الخطوة # 3: قم بتحميل ملفات الخطوط إلى الخادم الخاص بك. بعد تفريغ الأرشيف ، تحتاج إلى تحميل ملفات الخطوط إلى الخادم الخاص بك. للقيام بذلك ، يمكنك استخدام أي عميل بروتوكول نقل الملفات مثل فايلزيلا ، أو ميزة تحميل الملفات المضمنة في لوحة معلومات الاستضافة.
الخطوة # 4: قم بتوصيل الخطوط بموقعك عبر ورقة الأنماط. لاستخدام الخطوط التي تم تنزيلها على موقعك ، يجب عليك توصيلها بورقة الأنماط الخاصة بك. إضافة التعليمات البرمجية التالية إلى ملف كس الخاص بك:
بدلا من" اسم الخط "، تحتاج إلى تحديد اسم الخط ، وبدلا من "المسار".ووف " هو المسار إلى ملف الخط على الخادم الخاص بك. يجب عليك أيضا تحديد تنسيق الخط الذي تريد استخدامه (عادة ما تستخدم خطوط الويب تنسيق وف).
تهانينا ، لقد أضفت للتو الخطوط التي تم تنزيلها إلى موقع الويب الخاص بك! الآن يمكنك استخدامها في الأنماط الخاصة بك ، إضافة عناوين ملونة وتعزيز التجربة البصرية للزائرين.
- تنزيل الخطوط التي تم تنزيلها
- إنشاء مجلد للخطوط
- ربط الخطوط بموقعك
- التحقق من كيفية عمل الخطوط على موقعك
تنزيل الخطوط التي تم تنزيلها
عندما تقوم بتنزيل الخط على جهاز الكمبيوتر الخاص بك ، فأنت بحاجة إلى اتباع بعض الخطوات لإضافته إلى موقع الويب الخاص بك:
- قم بإنشاء دليل" الخطوط " على الخادم الخاص بك ، إذا لم يكن موجودا بعد.
- انقل ملف الخط الذي تم تنزيله إلى هذا الدليل.
- افتح ورقة أنماط كس لموقع الويب الخاص بك أو قم بإنشاء ملف كس جديد للخط الخاص بك.
- إضافة التعليمات البرمجية التالية إلى ملف كس الخاص بك لتوصيل الخط الذي تم تنزيله:
@الخط الوجه { الخط الأسرة: 'اسم الخط'; سرك: ورل('مسار/إلى/ملف/الخط.ووف 2') شكل ('ووف 2'), رابط ('مسار / إلى / ملف / الخط.وف') شكل ('وف'); } |
تأكد من استبدال 'اسم الخط' مع اسم الخط وتحديد المسار الصحيح لملف الخط في سرك.
4. احفظ ملف كس وقم بتوصيله بمستند هتمل الخاص بك عن طريق إضافة العلامة التالية في القسم:
5. الآن يمكنك استخدام الخط الذي تم تنزيله عن طريق تعيينه كقيمة خاصية عائلة الخط في كس الخاص بك.
مثال:
. بلدي النص { الخط الأسرة: 'اسم الخط' ، بلا الرقيق; } |
الآن سيتم عرض النص المميز بفئة "النص الخاص بي" في الخط الذي قمت بتحميله على موقعك.
لا تنس التحقق من كيفية عمل الخط على أجهزة ومتصفحات مختلفة للتأكد من عرضه بشكل صحيح.
إنشاء مجلد للخطوط
قبل إضافة الخطوط التي تم تنزيلها إلى موقعك ، تحتاج إلى إنشاء مجلد لتخزينها. سيسمح لك ذلك بتنظيم ملفات الخطوط والعثور عليها بسهولة لاحقا.
إليك كيفية إكمال هذه الخطوة:
- افتح مستكشف الملفات أو أي برنامج آخر لإدارة الملفات على جهاز الكمبيوتر الخاص بك.
- انتقل إلى دليل موقع الويب الخاص بك حيث يتم تخزين جميع ملفاته.
- قم بإنشاء مجلد جديد باسم" الخطوط " أو أي اسم آخر مناسب لك.
الآن لديك مجلد حيث يمكنك إضافة جميع الخطوط التي تم تنزيلها. سيساعدك هذا في العثور عليها واستخدامها بسهولة على موقعك.
ربط الخطوط بموقعك
عند إنشاء تصميم فريد لموقعك ، قد ترغب في استخدام خطوط غير مضمنة في مجموعة المتصفح القياسية. للقيام بذلك ، ستحتاج إلى إضافة هذه الخطوط إلى موقع الويب الخاص بك. في هذا القسم ، ونحن سوف اقول لكم كيفية القيام بذلك.
الخطوة 1: قم بتنزيل الخطوط التي تريد استخدامها على موقع الويب الخاص بك. عادة ما يتم توفير الخطوط بتنسيقات.ووف,.2,.صندوق النقد الدولي أو .أوتف.
الخطوة 2: قم بإنشاء مجلد على الخادم الخاص بك حيث سيتم تخزين جميع الخطوط الخاصة بك. قم بتسمية هذا المجلد ، على سبيل المثال ، "الخطوط".
الخطوة 3: ضع جميع الخطوط التي تم تنزيلها في هذا المجلد. تأكد من أن ملفات الخطوط موجودة داخل مجلد الخطوط ولها الأسماء الصحيحة.
الخطوة 4: Откройте файл CSS вашего сайта и добавьте следующий код:
@font-face {
font-family: ‘Название_шрифта’;
src: url(‘путь_к_шрифту.woff’) format(‘woff’),
url(‘путь_к_шрифту.woff2’) format(‘woff2’),
url(‘путь_к_шрифту.ttf’) format(‘truetype’),
url(‘путь_к_шрифту.otf’) format(‘opentype’);
}
استبدل "اسم الخط" باسم الخط ، و" اسم الخط " بالمسار إلى ملف كل خط بالنسبة إلى المجلد الجذر لموقعك.
الخطوة 5: يمكنك الآن استخدام الخطوط المضافة في قواعد كس لموقعك عن طريق تحديد اسمها في خاصية "عائلة الخط".
على سبيل المثال:
الجسم {
الخط الأسرة: 'شيفت_اسم' ، بلا الرقيق;
}
في هذا المثال ، سيتم عرض النص على موقعك في الخط الذي حددته ، إذا كان متصفح المستخدم يدعم خاصية كس هذه.
الآن بعد أن عرفت كيفية تضمين الخطوط التي تم تنزيلها على موقع الويب الخاص بك ، يمكنك بسهولة إضافة التفرد والأناقة إلى تصميمك.
التحقق من كيفية عمل الخطوط على موقعك
بعد إضافة الخطوط التي تم تنزيلها إلى موقعك ، يجب عليك إجراء فحص للتأكد من عرضها بشكل صحيح على جميع الأجهزة والمتصفحات.
فيما يلي بعض الخطوات لمساعدتك في التحقق من كيفية عمل الخطوط:
- افتح موقع الويب الخاص بك في متصفحات مختلفة. تأكد من عرض الخطوط بشكل صحيح وتبدو كما تريد.
- تحقق من عرض الخط على أجهزة مختلفة ، بما في ذلك أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والأجهزة المحمولة. تأكد من أن الخطوط تبدو جيدة ولا تسبب مشاكل في سهولة القراءة على جميع الأجهزة.
- اختبر عناصر مختلفة على موقعك ، مثل العناوين والفقرات والقوائم وعناصر النص الأخرى. تأكد من أن كل عنصر يستخدم الخط الصحيح ويتم عرضه كما ينبغي.
- اكتب النص في خطوط مختلفة للتأكد من عرضها وفقا للأنماط والأحجام المحددة.
- إذا كنت تستخدم كس لنمط الخط الخاص بك ، تأكد من أن يتم تطبيق كافة الأنماط بشكل صحيح ويتم عرض الخطوط وفقا للإعدادات الخاصة بك.
يعد التحقق من الخطوط على موقعك خطوة مهمة بعد إضافتها. سيسمح لك ذلك بالتأكد من أن موقعك يبدو ويعمل على النحو المنشود ، وسيوفر تجربة قراءة أفضل للمستخدمين.