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