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