كيفية توصيل الخطوط إلى كس: دليل بسيط وبديهي للمبتدئين

يساعد استخدام الخطوط الفريدة في تصميم الويب على التأكيد على الفردية وأسلوب مشروعك. ومع ذلك ، قد تحتاج إلى القليل من المساعدة لمعرفة كيفية توصيل هذه الخطوط بشكل صحيح بأنماط كس الخاصة بك.

في هذه المقالة ، سوف ننظر إلى دليل بسيط وبديهي للمبتدئين حول كيفية توصيل الخطوط إلى كس. ونحن سوف اقول لكم عن طرق مختلفة لربط الخطوط ، والنظر في مزاياها وعيوبها ، وتبادل النصائح حول اختيار واستخدام الخطوط المناسبة لمشروعك.

الخطوة 1: اختيار الخط المناسب

الخطوة الأولى هي اختيار الخط المناسب لمشروعك. يمكنك اختيار خط لوحة آمن على الويب مثبت بالفعل على معظم أجهزة الكمبيوتر ، أو استخدام الخدمات والمكتبات الخارجية التي تقدم مجموعة واسعة من الخطوط للاستخدام على مواقع الويب.

المجلس: عند اختيار الخط ، ضع في اعتبارك إمكانية قراءته ، والتوافق مع الأنماط الخاصة بك والجماليات العامة للمشروع.

1. الشروع في العمل
2. تثبيت الخطوط على جهاز الكمبيوتر
3. اختيار الخط المناسب
4. تنزيل الخطوط
5. ربط الخطوط عبر كس
6. التحقق من صحة الاتصال
7. العمل مع أنواع مختلفة من الخطوط

الشروع في العمل

1. حدد الخط المناسب. اليوم ، هناك العديد من الموارد المجانية والمدفوعة حيث يمكنك العثور على خطوط لمشروعك. اختر خطا يتطابق مع النمط العام لصفحتك.
2. قم بتحميل الخط إلى خادم الويب الخاص بك. بعد تحديد الخط ، ستحتاج إلى تحميله على الخادم بحيث يكون متاحا للاستخدام على صفحة الويب الخاصة بك. عادة ما يتم توفير الخطوط بتنسيقات مختلفة مثل .صندوق النقد الدولي, .أوتف, .ووف, و .2.
3. إنشاء ملف كس لتوصيل الخط. سوف تحتاج إلى إنشاء ملف جديد مع التمديد.المغلق أو إضافة رمز إلى ملف نمط موجود. في هذا الملف ، ستقوم بتعيين القواعد والإعدادات لاستخدام الخط المحدد في صفحتك.
4. استخدم قاعدة @ وجه الخط لتوصيل الخط. إضافة التعليمات البرمجية التالية إلى ملف كس الخاص بك:

1. @الخط الوجه {

الخط الأسرة: 'اسم الخط';

سرك: ورل('مسار الخط/الخط.ووف 2') شكل ('ووف 2'),

رابط ('مسار الخط / الخط.وف') شكل ('وف');

}

تطبيق الخط على العناصر المطلوبة. لاستخدام الخط المتصل لعناصر معينة على صفحتك ، تحتاج إلى إضافة السطر التالي من رمز كس لكل عنصر:

العنصر {

الخط الأسرة: 'اسم الخط' ، بلا الرقيق;

}

هنا "العنصر" هو اسم عنصر هتمل الذي تريد تطبيق الخط المحدد عليه.

على سبيل المثال ، إذا كنت تريد تطبيق خط على فقرات في صفحتك ، فسيبدو الرمز كما يلي:

• ص {
• الخط الأسرة: 'اسم الخط' ، بلا الرقيق;
• }

تهانينا ، لقد قمت بتوصيل الخطوط بنجاح إلى كس! الآن يمكنك استخدام الخط المحدد على صفحة الويب الخاصة بك وإعطائها نظرة فريدة من نوعها.

تثبيت الخطوط على جهاز الكمبيوتر

4. تحقق من تثبيت الخط. بعد تثبيت الخط على جهاز الكمبيوتر الخاص بك ، يمكنك استخدامه في برامج مختلفة. افتح محرر نصوص ، مثل ميكروسوفت ورد ، وحدد الخط المثبت من قائمة الخطوط المتاحة.

يمكنك الآن استخدام الخط المثبت في أي برامج على جهاز الكمبيوتر الخاص بك وعلى مواقع الويب ، إذا كان يدعم اتصال الخطوط المخصصة.

اختيار الخط المناسب

يمكن أن يؤثر اختيار الخط المناسب لموقعك على الويب بشكل كبير على إدراك الزوار للمحتوى. لتحديد خط بنجاح ، يجب مراعاة عدة عوامل مهمة:

الغرض من الموقع: تتطلب أنواع مختلفة من المواقع خطوطا مختلفة. إذا كنت تقوم بإنشاء مدونة مستقبلية ، فقد تحتاج إلى خط بسيط وقابل للقراءة ، في حين أن الخط الأكثر أناقة وإبداعا مناسب لموقع أخبار الموضة.

الجمهور المستهدف: ضع في اعتبارك أن جمهورك المستهدف قد يكون لديه تفضيلاته وتوقعاته الخاصة. على سبيل المثال ، إذا كان موقعك مصمما للأطفال ، فقد تحتاج إلى خطوط أكبر وأكثر مرحا.

الوضوح: يجب أن يكون الخط سهل القراءة في ظروف مختلفة. انتبه إلى الحجم والعدادات (الفراغات داخل الحرف) ومحارف الحروف.

الامتثال للعلامة التجارية: إذا كنت تقوم بإنشاء موقع ويب لشركة أو مؤسسة ، فيجب أن يكون الخط متسقا مع صورة وأسلوب علامتك التجارية.

بعد تحليل هذه العوامل ، يمكنك البدء في البحث واختيار خطوط معينة. هناك العديد من خدمات الويب ومكتبات الخطوط التي تقدم مجموعة واسعة من الخطوط لاستخدامها على موقعك.

واحدة من الخدمات الأكثر شعبية هي خطوط جوجل. ستجد هنا مجموعة كبيرة من الخطوط عالية الجودة التي يمكن إضافتها بسهولة إلى رمز كس الخاص بك. يحتوي كل خط على رمز خاص به يجب إضافته إلى قسم الأنماط في موقعك.

بعد تحديد الخط المناسب ، يمكنك إضافته إلى رمز كس الخاص بك باستخدام القاعدة

@ استيراد

أو باستخدام قاعدة

@الخط الوجه

. ثم يمكنك استخدام الخط المحدد لعناصر معينة من موقعك.

ضع في اعتبارك أن الخطوط يمكن أن تحمل الكثير من الوزن وتؤثر على سرعة تحميل موقع الويب الخاص بك. لذلك ، اختر الخطوط بحكمة وقم بتحسين استخدامها حتى لا يتم تحميل موقعك بالعديد من الخطوط المختلفة.

نتيجة لذلك ، سيساعد اختيار الخط الصحيح في تحسين التصور العام لموقع الويب الخاص بك وجعله أكثر احترافية وجاذبية للزوار.

تنزيل الخطوط

قبل توصيل الخطوط إلى كس ، تحتاج إلى تحميل ملفات الخط اللازمة من المورد المناسب أو تخزين الملفات.

يمكنك العثور على الخط المثالي على منصات مثل جوجل الخطوط ، أدوبي الخطوط أو غيرها. سوف تحتاج إلى اختيار الخط الذي يناسب أغراضك ويناسب طريقتك.

بعد تحديد خط على المورد ، تأكد من تحديد جميع أنماط الخطوط الضرورية أو متغيرات نمط الخط. ثم انتقل إلى صفحة التنزيل للخط المحدد وانقر فوق الزر "تنزيل" أو "تنزيل".

بعد اكتمال التنزيل ، سيتم تزويدك بأرشيف يحتوي على ملفات خطوط بتنسيقات مختلفة ، مثل .أوتف, .صندوق النقد الدولي أو .ووف. لاستخدام هذه الملفات في كس ، يمكنك تحديد تنسيق الخط المطلوب الذي يلبي متطلباتك ويدعمه المتصفحات المستهدفة.

قم بفك ضغط الأرشيف الذي تم تنزيله باستخدام الخطوط وانتقل إلى الخطوة التالية — توصيل الخطوط بملف كس الخاص بك.

ربط الخطوط عبر كس

من أجل تغيير الخط القياسي على صفحة ويب واستخدام الخطوط الخاصة بك ، تحتاج إلى توصيلها عبر كس. هناك عدة خطوات في إجراء اتصال الخط:

1. ابحث عن الخط المطلوب وقم بتنزيله بالتنسيق.صندوق النقد الدولي, .ووف أو .2. هذه التنسيقات هي الأكثر شيوعا والتي تدعمها المتصفحات.

2. قم بإنشاء مجلد في المشروع (على سبيل المثال ، باسم "الخطوط") ، حيث تضع ملف الخط الذي تم تنزيله.

3. في ملف كس ، إضافة التعليمات البرمجية التي تربط الخطوط:

@الخط الوجه {

عائلة الخط:"اسم الخط";

في الكود ، يجب عليك تحديد اسم الخط (أي اسم تراه مناسبا) والمسار إلى ملف الخط في المجلد الذي تم إنشاؤه في الخطوة السابقة. تحتاج أيضا إلى تحديد تنسيق ملف الخط الصحيح.

عائلة الخط: "اسم الخط" ، بلا شريف;

}

يمكنك استخدام أدوات مطور متصفح الويب مثل أدوات مطور جوجل كروم أو أدوات مطور موزيلا فايرفوكس للتحقق من توصيل الخط بشكل صحيح.

افتح أدوات المطور ، وانتقل إلى علامة التبويب" العناصر "أو" العناصر " (حسب المتصفح الذي تستخدمه) وابحث عن العنصر الذي يتم تطبيق الخط المحدد عليه. إذا تم توصيل الخط بشكل صحيح ، سترى أن يتم تطبيق الأنماط ويتم عرض النص في الخط المحدد في ملف كس الخاص بك.