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