تعد الخطوط عنصرا مهما في تصميم صفحة الويب. يمكن أن تعزز بشكل كبير من الجاذبية الجمالية وسهولة قراءة النص. ومع ذلك ، إذا لم يكن الخط المطلوب على جهاز الكمبيوتر الخاص بالمستخدم ، فسيقوم المتصفح باستبداله بالخط الافتراضي ، مما قد يفسد المظهر النهائي للموقع.
لحل مشكلة فقدان الخط المطلوب على جهاز الكمبيوتر الخاص بالمستخدم ، يمكنك توصيله باستخدام كس. للقيام بذلك ، تحتاج إلى اتباع بعض الخطوات البسيطة. أولا ، تحتاج إلى التحقق مما إذا كان الخط الذي تريد استخدامه متاحا في مستودعات الخطوط المجانية عبر الإنترنت مثل خطوط جوجل أو خطوط أدوبي. إذا كان الأمر كذلك ، سوف تحتاج إلى رابط إلى الخط أو رمز كس الخاص به.
ثم يمكنك إضافة هذا الرابط أو التعليمات البرمجية إلى @الخط وجه القسم من ملف كس الخاص بك. داخل هذه الكتلة ، يجب عليك تحديد اسم الخط والمسار إلى ملف الخط وخيارات العرض مثل الحجم والخط الغامق ونمط الخط. بعد ذلك ، يمكنك استخدام الخط الجديد في رمز كس الخاص بك باستخدام خاصية عائلة الخط.
نتيجة لذلك ، ستتمكن من التحكم الكامل في عرض النص على موقعك ، بغض النظر عما إذا كان الخط موجودا على جهاز الكمبيوتر الخاص بالمستخدم. وبالتالي ، فإن تضمين الخط في كس هو حل فعال لإنشاء تصميم جذاب وفريد من نوعه لصفحات الويب الخاصة بك.
- القدرة على توصيل الخط في المغلق
- الخطوة 1: ابحث عن الخط المطلوب وقم بتنزيله
- الخطوة 2: إنشاء كتالوج خط خاص
- الخطوة 3: قم بتوصيل الخط باستخدام @وجه الخط
- الخطوة 4: تحديد مصادر الخطوط المحلية
- الخطوة 5: تحديد عائلة الخطوط
القدرة على توصيل الخط في المغلق
كس لديه القدرة على توصيل الخطوط التي لا تتوفر على جهاز الكمبيوتر الخاص بالمستخدم. يتيح لك ذلك استخدام مجموعة متنوعة من الخطوط في تصميم الويب لإنشاء مظهر فريد وجذاب لموقعك.
لتوصيل خط إلى كس ، استخدم قاعدة @ الخط الوجه . تسمح لك هذه القاعدة بتحديد المسار إلى ملف الخط وتعيين خصائصه ، مثل الاسم ونمط الخط وحجمه.
Пример использования правила @font-face:
@font-face {
font-family: 'MyCustomFont';
font-weight: normal;
font-style: normal;
}
- В этом примере мы указываем, что хотим использовать шрифт под названием ‘MyCustomFont’. Затем мы задаем путь к файлам шрифтов, форматы которых мы поддерживаем (в данном случае .woff2 и .woff). يمكننا أيضا تحديد وزن الخط المطلوب ونوع الخط.
- بعد توصيل الخط إلى كس ، يمكننا استخدامه في العناصر الفردية على الصفحة عن طريق تحديد قيمة جديدة لخاصية عائلة الخط:
ح1 {
الخط الأسرة: 'ميكوستومفونت' ، بلا الرقيق;
}
في هذا المثال ، نطبق الخط 'ميكوستومفونت' إلى رؤوس المستوى الأول.
الآن ، عندما يقوم المتصفح بتحميل الصفحة ، فإنه سيتم أولا التحقق مما إذا كان المستخدم لديه 'ميكوستومفونت' الخط. إذا لم يكن الأمر كذلك ، فسيتم تنزيل ملف الخط من الخادم وتطبيقه على العنصر المقابل في الصفحة.
من المهم أن تتذكر أنه عند استخدام خطوط الويب ، تحتاج إلى التأكد من أن ملفات الخطوط المقابلة متوفرة على الخادم ومحددة بشكل صحيح في كس. يجب أيضا مراعاة حجم ملفات الخطوط حتى لا يتم تحميل الكثير من البيانات وإبطاء تحميل الصفحة.
في الختام ، ربط الخطوط إلى كس هو أداة قوية لخلق نظرة فريدة من نوعها ويشعر لموقع على شبكة الانترنت. بفضل إمكانية استخدام الخطوط غير المتوفرة على كمبيوتر المستخدم ، يمكننا إنشاء حلول تصميم أكثر إبداعا وجاذبية.
الخطوة 1: ابحث عن الخط المطلوب وقم بتنزيله
استخدام خدمات الخطوط المجانية مثل خطوط جوجل أو خطوط أدوبي. في هذه المواقع ، يمكنك العثور على مجموعة كبيرة من الخطوط ذات الأنماط المختلفة وتنزيلها للاستخدام على موقعك. | البحث عن الخطوط على موارد التصميم المتخصصة مثل بهانس أو سال لعابه. في هذه الخدمات ، يشارك المصممون عملهم ، بما في ذلك الخطوط المستخدمة ، وبالتالي يمكنك العثور على خيارات مثيرة للاهتمام وغير عادية. |
| البحث عن الخطوط على موارد الخط المتخصصة مثل السنجاب الخط أو دافونت. تقدم هذه الموارد مجموعة واسعة من الخطوط المجانية والمدفوعة في أنماط واتجاهات مختلفة. | بعد العثور على الخط المطلوب ، يجب عليك تنزيله على جهاز الكمبيوتر الخاص بك والمتابعة إلى الخطوة التالية — توصيل الخط إلى كس. |
| الخطوة 2: إنشاء كتالوج خط خاص | 1. قم بإنشاء مجلد على الخادم أو الاستضافة حيث ستقوم بتحميل ملفات الخطوط. على سبيل المثال ، يمكنك تسميته "الخطوط". |
| 2. داخل دليل" الخطوط " ، قم بإنشاء دليل فرعي لكل خط تريد توصيله. يجب أن يتطابق اسم الدليل الفرعي مع اسم الخط لراحة المؤسسة. | |
| 4. تأكد من أن ملفات الخطوط موجودة في الدليل الفرعي الصحيح ومتاحة للتنزيل من الخادم أو الاستضافة. للقيام بذلك ، يمكنك استخدام رابط مباشر لملف الخط ، على سبيل المثال, http://www.example.com/fonts/myfont/myfont.woff . | الخطوة 3: قم بتوصيل الخط باستخدام @وجه الخط |
| إذا كان الخط الذي تريد استخدامه على موقع الويب الخاص بك ليس على كمبيوتر الزائر ، يمكنك توصيله باستخدام قاعدة كس @الخط الوجه. | لتوصيل الخط باستخدام @الخط الوجه ، يجب تحديد اسمها ، ورل من ملف الخط ، ومجموعات الأحرف التي يدعمها. هنا هو رمز عينة: |
| @الخط الوجه |
{
سرك:
رابط ('مسار / إلى / ملف / الخط.وف') شكل ('وف');
الخط الوزن:
400;
نمط الخط:
عادي;
}
في هذا المثال ، نحدد اسم الخط ، المسار إلى ملف الخط بتنسيقات.2 و .وف ، وتشير أيضا إلى أن الخط يحتوي على الخط العادي (الخط الوزن: 400) ونمط عادي (نمط الخط: عادي).
بعد تحديد @الخط الوجه ، يمكنك استخدام الخط المحدد في أي قاعدة كس أخرى ببساطة عن طريق تحديد اسمها في خاصية الخط الأسرة ، على سبيل المثال:
ح1 {
الخط الأسرة: 'اسم الخط' ، بلا الرقيق;
}
سيتم الآن تطبيق الخط على ح1 رؤوس على موقع الويب الخاص بك.
الخطوة 4: تحديد مصادر الخطوط المحلية
إذا تم تثبيت الخط الذي تريد استخدامه على جهاز الكمبيوتر الخاص بالمستخدم ، فيمكنك تحديده كمصدر الخط المحلي. سيسمح هذا للمتصفح بتنزيل الخط مباشرة من كمبيوتر المستخدم ، متجاوزا التنزيل من الخادم.
يتم استخدام السمة سرك في قاعدة @الخط الوجه لتحديد مصادر الخط المحلي في كس. أدناه مثال:
@الخط الوجه {
الخط الأسرة: 'ميفونت';
سرك: المحلية ('ميفونت') ، المحلية ('ميفونت-العادية');