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