تعد الخطوط عنصرا مهما في تصميم موقع الويب الذي يمكن أن يخلق أسلوبا فريدا لا ينسى. تثبيت خط باستخدام كس يمكن أن يكون مهمة شاقة للمبتدئين. في هذا الدليل التفصيلي ، سننظر في كيفية تحديد وتثبيت خط باستخدام كس.
الخطوة الأولى هي تحديد الخط المطلوب. المغلق يدعم العديد من الخطوط المختلفة ، بما في ذلك خطوط الويب القياسية مثل اريال و فيردانا ، فضلا عن العديد من الخطوط المجانية المتاحة على الانترنت. من المهم اختيار خط يطابق نمط موقع الويب الخاص بك ويوفر سهولة قراءة جيدة.
بعد تحديد الخط ، تحتاج إلى تحميله على خادم موقع الويب الخاص بك. للقيام بذلك ، يمكنك استخدام الخدمات التي توفر الخطوط لتطوير الشبكة ، مثل خطوط جوجل أو خطوط أدوبي. بعد تحميل الخط ، سوف تتلقى رمز فريد يحتاج إلى إدراجها في ملف كس من موقع الويب الخاص بك.
في كس ، يمكنك تعيين الخط للمستند بأكمله أو العناصر الفردية. لتعيين الخط للمستند بأكمله ، تحتاج إلى إضافة الرمز المناسب إلى محدد النص الأساسي. إذا كنت تريد تعيين الخط لعنصر فردي ، فيمكنك استخدام محدد لهذا العنصر ، مثل ح1 للعنوان أو ص للفقرة.
نموذج التعليمات البرمجية:
الجسم {
الخط الأسرة: "أريال" ، بلا الرقيق;
}
ح1 {
الخط الأسرة: "فيردانا" ، بلا الرقيق;
}
بالإضافة إلى تثبيت الخط ، يمكنك التحكم في سمات الخط الأخرى مثل الحجم ونمط الخط والسماكة باستخدام كس. يتيح لك ذلك تخصيص مظهر النص على موقع الويب الخاص بك وإنشاء نمط فريد.
الآن بعد أن كنت تعرف أساسيات تثبيت الخطوط باستخدام كس ، يمكنك إنشاء موقع أنيق وفريد من نوعه من شأنها أن تساعد على جذب انتباه الزوار.
- تثبيت الخط المغلق: لماذا هو مهم?
- الخطوة 1: اختيار الخط المناسب
- الخطوة 2: تحميل الخط إلى الخادم
- الخطوة 3: قم بتوصيل الخط بصفحة الويب
- الخطوة 4: تطبيق الخط في كس
تثبيت الخط المغلق: لماذا هو مهم?
كس (أوراق الأنماط المتتالية) هي لغة نمط تسمح لك بالتحكم في مظهر وتنسيق عناصر هتمل. واحدة من الخصائص الرئيسية كس هو القدرة على تعيين الخطوط للنص على صفحة ويب.
مزايا الخطوط المثبتة بشكل صحيح باستخدام كس:
- التفرد والأسلوب. اختيار الخط الصحيح يساعد على تأسيس الفردية والتفرد من الصفحة ، للتأكيد على أسلوبه ومفهومه. يمكن أن يكون الخط المختار جيدا عنصرا أساسيا في إنشاء تصميم صفحة ويب لا ينسى.
- تحسين القراءة. الهدف النهائي لأي محتوى على صفحة الويب هو القراءة. سيساعد الخط المختار جيدا ، مع مراعاة سهولة قراءته ، على زيادة راحة القراءة وتقليل إجهاد المستخدم وجعل المحتوى أكثر سهولة.
- الاتساق والدعم. تثبيت الخطوط عبر كس يضمن الاتساق في مظهر النص على صفحات الويب ، بغض النظر عن نظام التشغيل وتوافر الخط المطلوب على جهاز الكمبيوتر الخاص بالمستخدم. وبالإضافة إلى ذلك ، ربط الخطوط باستخدام كس يسمح لك لاستخدام مجموعة متنوعة من أنواع الخطوط والحصول على فرصة لعرضها بصريا على مختلف الأجهزة.
- المرونة وسهولة التغيير. إذا تم تثبيت الخطوط عبر كس ، تغيير أو استبدال الخط يمكن أن يتم فقط عن طريق تغيير قيم خصائص كس المرتبطة به ، دون الحاجة إلى تغيير كل عنصر من التعليمات البرمجية هتمل.
من المهم أن تتذكر أنه عند استخدام الخطوط على صفحات الويب ، تحتاج إلى التأكد من أنها مرخصة ومتاحة للاستخدام في المشاريع عبر الإنترنت. من المهم أيضا اختيار الخطوط بناء على قراءتها على أجهزة وشاشات مختلفة لضمان أفضل تجربة للمستخدم.
يعد تثبيت خطوط كس أداة مفيدة لمطور الويب تساعدك على إنشاء صفحات ويب جذابة وقابلة للقراءة بأسلوب فريد.
الخطوة 1: اختيار الخط المناسب
عند اختيار خط لصفحة ويب ، من المهم أن تأخذ في الاعتبار سهولة القراءة والتوافق مع الأجهزة المختلفة ونهج تصميم مشروعك. يجب أن يكون الخط الخاص بك سهل القراءة للمستخدمين ، وكذلك عرضه بشكل صحيح على متصفحات وأجهزة مختلفة.
هناك عدة أنواع من الخطوط التي يمكنك استخدامها على صفحة الويب:
1. خطوط الويب: هذه هي الخطوط التي يتم تنزيلها من مصادر خارجية أو استضافتها على الخادم الخاص بك. وهي متاحة لجميع المستخدمين بغض النظر عما إذا كان الخط متاحا على أجهزتهم.
2. خطوط النظام: هذه هي الخطوط المثبتة على أجهزة المستخدمين بشكل افتراضي. قد تختلف حسب نظام التشغيل وإعدادات المستخدم.
3. جوجل الخطوط: هذه هي الخطوط التي تقدمها جوجل الخطوط. يتم تنزيلها من مصدر خارجي وتستخدم على نطاق واسع على صفحات الويب. توفر خطوط جوجل مجموعة واسعة من الخطوط المختلفة ، من بينها يمكنك العثور على الخط المناسب لمشروعك.
عند اختيار خط لصفحة الويب الخاصة بك ، يمكنك استخدام واحد أو مجموعة من أنواع الخطوط هذه. من المهم التأكد من أن الخط المحدد يلبي أهداف مشروعك ويبدو متناغما مع بقية عناصر التصميم. انتبه أيضا إلى ترخيصها لتجنب الاستخدام غير القانوني.
بغض النظر عن نوع الخط الذي تختاره ، استخدمه بحكمة وضمير لجعل صفحة الويب الخاصة بك ممتعة وسهلة القراءة للمستخدمين.
الخطوة 2: تحميل الخط إلى الخادم
بمجرد تحديد الخط المناسب لموقع الويب الخاص بك ، تحتاج إلى تحميله على الخادم بحيث يكون متاحا للاستخدام في أنماط كس. في هذا القسم ، سننظر في كيفية تحميل الخط إلى الخادم بشكل صحيح.
1. احفظ ملف الخط على جهاز الكمبيوتر الخاص بك بالتنسيق.ووف أو .2. يمكنك الحصول على ملفات الخطوط بتنسيقات مختلفة من مواقع الويب المختلفة التي تقدم خطوطا مجانية أو مدفوعة.
2. افتح مدير الملفات الخاص بموفر الاستضافة أو اتصل بالخادم عبر بروتوكول بروتوكول نقل الملفات باستخدام عميل بروتوكول نقل الملفات.
3. انتقل إلى الدليل الذي تريد استخدامه لتخزين ملفات الخطوط ، وعادة ما يمكن أن يكون دليل "الخطوط" أو "الأصول". إذا لم يكن لديك مثل هذا الدليل ، فقم بإنشاء واحد.
4. قم بتحميل ملفات الخطوط إلى الخادم عن طريق سحبها من المجلد المحلي إلى دليل مفتوح على الخادم أو باستخدام وظيفة "تحميل الملفات" في عميل بروتوكول نقل الملفات.
5. بعد تنزيل ملفات الخطوط ، يجب أن يكون لديك الملفات التالية على الخادم (على سبيل المثال ، إذا قمت بتنزيل خط "روبوتو"):
| اسم الملف | |
|---|---|
| روبوتو.تنسيق وف | ووف |
| روبوتو.2 | 2 |
6. تحقق من تنزيل ملفات الخطوط بنجاح عن طريق فتح عنوان الويب الخاص بها في المتصفح. على سبيل المثال ، إذا كان موقعك موجودا في "http://www.example.com" ثم يجب أن يكون لديك حق الوصول إلى ملفات الخطوط على العناوين التالية "http://www.example.com/fonts/roboto.woff "و" http://www.example.com/fonts/roboto.woff2 ".
الآن بعد أن تم تحميل ملفات الخط بنجاح إلى الخادم ، كنت على استعداد للخطوة التالية-باستخدام الخط في أنماط كس.
الخطوة 3: قم بتوصيل الخط بصفحة الويب
لكي تستخدم صفحة الويب الخاصة بك الخط الذي اخترته ، تحتاج إلى توصيله برمز هتمل. للقيام بذلك ، سوف تحتاج إلى قاعدة كس التي سوف تحتوي على معلومات حول الخط. قبل البدء في توصيل خط ، تحتاج إلى التأكد من أن لديك ملف خط مع الامتداد.ووف أو .2. على سبيل المثال ، لنفترض أن لديك ملف خط اسمه ميفونت.ووف. |
لتوصيل خط بصفحة الويب الخاصة بك ، يمكنك استخدام قاعدة @فونت-فيس في ملف كس الخاص بك. يسمح للمتصفح بتنزيل خط من الخادم واستخدامه لعرض النص على صفحة الويب. نموذج التعليمات البرمجية لربط ميفونت.وف الخط يشبه هذا: @الخط الوجه { |
الخط الأسرة: ميفونت; سرك: ورل(ميفونت.ووف); } |
في هذا المثال ، نحدد خط جديد اسمه ميفونت وتحديد المسار إلى ملف الخط ميفونت.ووف.
ح1 {
الخط الأسرة: ميفونت ، أريال ، بلا الرقيق;
}
في هذا المثال ، نقوم بتعيين خط ميفونت لعنصر رأس ح1. إذا كان الخط ميفونت غير متوفر ، فإن المتصفح استخدام أريال ، وإذا كان غير متوفر أيضا ، ثم الخط المحدد بعد أريال ، في هذه الحالة بلا الرقيق.
لتطبيق خط على عنصر معين أو مجموعة من العناصر ، يمكنك استخدام الخاصية
. بناء جملة هذه الخاصية كما يلي:
يوجد أدناه مثال لتطبيق خط على عنصر
: