تلعب الخطوط دورا مهما في تصميم الويب ، مما يخلق أسلوبا فريدا ومزاجا لصفحة الويب. ومع ذلك ، فإن استخدام الخطوط القياسية يمكن أن يجعل صفحتك مملة وعادية. لذلك ، من الضروري حتما تنزيل الخطوط المحلية من أجل منح موقعك شخصية وأصالة إضافية. خصوصية الخطوط المحلية هي أنه يتم تنزيلها من كمبيوتر المستخدم ، وليس من خادم خارجي.
في هذه المقالة ، ونحن سوف اقول لكم كيفية توصيل الخطوط المحلية بشكل صحيح إلى كس وتعطيك بعض النصائح المفيدة حول كيفية استخدامها.
من المهم أن تتذكر أن الاتصال الصحيح للخطوط المحلية هو المفتاح لضمان عرض نص عالي الجودة على موقعك.
قبل أن تبدأ ، تحتاج إلى تحديد الخطوط الضرورية وتحميلها على موقع الويب الخاص بك. وتشمل تنسيقات الملفات الخط المدعومة تف ، أوتف ، وف ، وف 2 وغيرها. تحتاج إلى التأكد من أن لديك جميع الأذونات اللازمة لاستخدام الخطوط المحددة.
- الخطوط المحلية في كس
- اختيار الخط والتحميل
- تصميم كس السليم
- دعم عبر المتصفح
- تحسين تحميل الخط
- التصحيح والاختبار
- التدريب والموارد
الخطوط المحلية في كس
غالبا ما يرغب مطورو الويب في استخدام خطوط محددة لمشاريعهم لمنحهم مظهرا وأسلوبا فريدا. ومع ذلك ، قد يؤدي استخدام الخطوط غير المثبتة على كمبيوتر المستخدم إلى حدوث مشكلات في عرض النص. لتجنب هذه المشكلة ، يمكنك استخدام الخطوط المحلية في كس.
الخطوط المحلية هي خطوط مثبتة بالفعل على كمبيوتر المستخدم. يمكن أن يكون أي خط قام بتثبيته بنفسه أو يأتي مع نظام التشغيل. يتيح لك استخدام الخطوط المحلية التأكد من عرض النص بشكل صحيح لجميع المستخدمين ، حتى إذا لم يكن لديهم إمكانية الوصول إلى خطوط خاصة.
لتوصيل خط محلي إلى كس ، تحتاج إلى استخدام قاعدة @ الخط الوجه . تسمح لك هذه القاعدة بتعيين المسار إلى الخط وتحديد اسمه. على سبيل المثال ، لتوصيل خط محلي يسمى "ميفونت" ، تحتاج إلى استخدام التعليمات البرمجية التالية:
@الخط الوجه {
الخط الأسرة: "ميفونت";
سرك: ورل("مسار/إلى/الخط/ميفونت.الصندوق");}
هنا ، "ميفونت" هو اسم الخط الذي يمكن استخدامه في كس للإشارة إلى أنه يجب استخدام هذا الخط لعنصر معين. يتم تحديد المسار إلى الخط داخل وظيفة ورل (). إذا كان الخط في نفس المجلد مثل ملف كس ، يمكنك استخدام مسار نسبي.
بعد توصيل الخط المحلي باستخدام @الخط الوجه ، ويمكن استخدامه في كس عن طريق تحديد اسم الخط للعنصر المطلوب. على سبيل المثال ، لتطبيق الخط "ميفونت" إلى عنصر مع فئة "عنصر بلدي" ، تحتاج إلى استخدام التعليمات البرمجية التالية:
. عنصري {
الخط الأسرة: "ميفونت" ، بلا الرقيق;
}
هنا ، "ميفونت"هو اسم الخط الذي تم تحديده في قاعدة @الخط الوجه. إذا لم يتم العثور على الخط ، سيتم استخدام خط عائلة بلا الرقيق.
استخدام الخطوط المحلية في كس هو وسيلة مريحة لربط الخطوط إلى المشاريع الخاصة بك والتأكد من أنها تعرض بشكل صحيح. تتيح لك هذه الطريقة استخدام خطوط معينة دون القلق بشأن توفر هذه الخطوط للمستخدمين. يمكنك أيضا استخدام خطوط محلية متعددة لتعيين قائمة أولويات للخطوط التي سيتم استخدامها افتراضيا.
اختيار الخط والتحميل
بعد استلام ملفات الخطوط ، تحتاج إلى إعدادها للتحميل على موقع الويب الخاص بك. تأكد من أن ملفات الخط الخاصة بك في نفس الدليل كملف كس الخاص بك لتسهيل تنزيلها. يوصى أيضا بإنشاء دليل فرعي "الخطوط" ووضع ملفات الخطوط هناك لتنظيم أفضل.
4. إنشاء ملف كس
الآن إنشاء ملف كس جديد أو فتح واحد موجود لتحميل الخطوط. إضافة التعليمات البرمجية التالية إلى ملف كس الخاص بك:
@الخط الوجه {
رابط ('الخطوط / اسم الانجراف.وف') شكل ('وف');
وزن الخط: رقم وزن الخط;
نمط الخط: نمط الخط;
}
استبدل "اسم الخط" باسم ملف الخط ،و" رقم وزن الخط "بوزن الخط المطلوب (على سبيل المثال ، 400 للخط العادي أو 700 للخط الغامق) و" نمط الخط "بنمط الخط المطلوب (على سبيل المثال ، "مائل" للخط المائل).
5. تحميل الخط إلى المغلق الخاص بك
لتطبيق الخط الذي تم تنزيله على عناصر محددة على موقع الويب الخاص بك ، أضف الكود التالي إلى ملف كس الخاص بك:
الجسم {
الخط الأسرة: 'اسم الخط' ، بلا الرقيق;
}
| استبدل "اسم الخط" باسم الخط الخاص بك. إذا كان الخط الخاص بك يتكون من عدة كلمات ، فقم بإرفاقه بعلامات اقتباس. إذا كان الخط الخاص بك يحتوي على أحرف غير قياسية ، فتحقق من عرضها بشكل صحيح على موقع الويب الخاص بك. | الآن سيتم استخدام الخط المحدد في عناصر موقع الويب الخاص بك التي تم تعريفها في ملف كس! |
|---|---|
| تصميم كس السليم | 1. استخدام الحشو والحشو بين الخصائص لإنشاء هيكل والنظام في رمز كس. هذا يجعل من السهل قراءة وفهم بنية النمط. |
3. استخدم التعليقات لوصف أقسام أو مكونات مختلفة من الأنماط. هذا يساعد على فهم الغرض من كل كتلة نمط ووظائفها بشكل أفضل.
4. استخدم تسمية الفئة والمعرف ، الوصفية والدلالية. تجنب الأسماء العامة أو الغامضة. استخدم الواصلات لفصل الكلمات والتسلسلات الهرمية.
5. ضع جميع استعلامات الوسائط في نهاية ملف النمط. يساعد هذا في إدارة التصميم سريع الاستجابة وأنماط منفصلة بشكل أفضل لدقة الشاشة المختلفة.
مثال على تصميم كس سيئة:
مثال على تصميم كس جيد:
.زر {
لون الخلفية: أزرق;
| اللون: أبيض; | محاذاة النص: المركز; |
|---|---|
| الحشو: 10 بكسل; | } |
| .زر { | |
| background-color: blue; | color: white; |
| text-align: center; | padding: 10px; |
}
.text {
font-size: 14px;
line-height: 1.5;
}
@media (max-width: 768px) {
.button {
padding: 5px;
}
}
/* Стили для страницы "О нас" */
.about-page {
background-color: lightgray;
}
В приведенном примере плохого оформления CSS свойства размещены в одной строке без отступов, что делает код менее читабельным. في مثال جيد ، يتم تقسيم رمز كس إلى كتل مع المسافات البادئة والتعليقات ، مما يجعل من السهل قراءة وصيانة.
دعم عبر المتصفح
| عند توصيل الخطوط المحلية إلى كس ، فمن الضروري أن تأخذ في الاعتبار دعم المتصفحات المختلفة. لضمان التوافق عبر المتصفح ، يجب أن تتعرف على ميزات كل متصفح وتستخدم القواعد المناسبة. | تتمثل إحدى الطرق الشائعة لتوفير الدعم عبر المتصفحات في استخدام تنسيقات الخطوط التي تدعمها معظم المتصفحات. على سبيل المثال ، تروتايب (.تف) و أوبن (.يتم دعم الخطوط من قبل جميع المتصفحات الحديثة تقريبا. |
| ومع ذلك ، قد تكون هناك حالات لا تدعم فيها بعض المتصفحات تنسيقات خطوط معينة. في مثل هذه الحالات ، يمكنك استخدام ميزات كس لتحديد خط بديل سيتم عرضه بدلا من الخط الرئيسي إذا كان المتصفح لا يدعم هذا التنسيق. على سبيل المثال ، يمكنك تحديد العديد من تنسيقات الخطوط في خاصية "سرك" وسيقوم المتصفح تلقائيا بتحديد واحد مناسب. | من المهم أن تتذكر أنه عند تحديد خطوط بديلة ، يجب عليك اختيار خطوط متشابهة في الأسلوب والحجم من أجل الحفاظ على تناسق التصميم. يجدر أيضا التحقق من كيفية عرض الخطوط في المتصفحات وأنظمة التشغيل المختلفة للتأكد من أنها تبدو جيدة بنفس القدر في كل مكان. |
| في الختام ، لتوفير الدعم عبر المتصفح عند توصيل الخطوط المحلية إلى كس ، فمن الضروري لتحديد الأشكال المعتمدة ، وتحديد الخطوط البديلة واختبار العرض في متصفحات مختلفة. سيساعد ذلك في إنشاء تصميم موحد وعالي الجودة لجميع المستخدمين ، بغض النظر عن المتصفح ونظام التشغيل المستخدم. | تحسين تحميل الخط |
| عند توصيل الخطوط المحلية إلى كس ، من المهم النظر في التحميل الأمثل من أجل تسريع وقت تحميل الصفحة وتحسين تجربة المستخدم. فيما يلي بعض النصائح المفيدة لتحسين تحميل الخط: | نصيحة |
| الوصف | استخدم تنسيقات الخطوط مع دعم الضغط |