الخط هو عنصر تصميم مهم يمكن أن يؤثر بشكل كبير على التصور العام لموقع الويب الخاص بك. يحدد نوع الخط الافتراضي الخط الذي سيتم استخدامه للنص على موقعك دون تحديده صراحة في كس. إذا كنت تريد تغيير نوع الخط لموقعك بالكامل ، فستحتاج إلى إجراء بعض التعديلات.
تغيير نوع الخط الافتراضي على موقع الويب الخاص بك هو بسيط جدا ، ولكن يتطلب بعض المعرفة كس. لديك عدة طرق للقيام بذلك ، بما في ذلك التخصيص على مستوى العنصر أو الفئة أو ملف النمط بالكامل. من المهم ملاحظة أن تغيير نوع الخط قد يؤثر على المظهر العام لموقعك وسهولة قراءة النص.
قبل البدء في تغيير نوع الخط ، يوصى باختيار الخط المناسب لموقعك. يرجى ملاحظة أن أنواع الخطوط المختلفة ينظر إليها بشكل مختلف وقد لا تكون مناسبة لجميع السياقات.
واحدة من أسهل الطرق لتغيير نوع الخط الافتراضي على موقع الويب الخاص بك هو استخدام الخاصية المغلق الخط الأسرة. يمكنك تطبيقه على علامة النص لتغيير نوع الخط لجميع العناصر على موقعك. على سبيل المثال ، إذا كنت ترغب في استخدام الخط "أريال" ، يمكنك لصق التعليمات البرمجية التالية في ملف النمط الخاص بك:
الجسم {
الخط الأسرة: أريال ، بلا شريف;
}
- تعريف نوع الخط الحالي
- اختيار نوع خط جديد
- توصيل خط باستخدام كندي
- توصيل خط باستخدام ملف محلي
- تغيير نوع الخط عبر كس
- التحقق من المتصفحات والأجهزة المختلفة
تحديد نوع الخط الحالي
. تتيح لك هذه الخاصية تعيين قائمة مفصولة بفواصل من الخطوط التي سيستخدمها المتصفح بترتيب التفضيل. إذا كان الخط الأول غير متوفر ، فسيحاول المتصفح استخدام الخط التالي في القائمة.
يمكنك استخدام أدوات المطور في المتصفح لتحديد نوع الخط الحالي. افتح الصفحة في المتصفح ، وانقر بزر الماوس الأيمن على النص وحدد "استكشاف العنصر" أو "التحقق من العنصر" (حسب المتصفح المحدد). سيتم فتح أدوات المطور مع العنصر المحدد.
. سيتم تحديد قائمة الخطوط في قيمة الخاصية ، مفصولة بفواصل.
لإدراج نص بنوع الخط الحالي أمام العنصر المحدد. هنا مثال على التعليمات البرمجية:
:: قبل {المحتوى: "نوع الخط الحالي:";
عائلة الخط: وراثة;
}
أضف هذا الرمز إلى كتلة قواعد كس للعنصر المحدد. سيتم إدراج النص "نوع الخط الحالي:" أمامه ، متبوعا بنوع الخط الحالي.
اختيار نوع خط جديد
يمكنك استخدام طرق مختلفة لتحديد خط جديد:
1. خطوط الويب المضمنة:
خطوط الويب هي خطوط خاصة يتم تنزيلها من خادم ويب ويمكن استخدامها على موقعك. هناك العديد من خطوط الويب المجانية والمدفوعة التي يمكنك استخدامها. وتشمل بعض الخدمات الخط على شبكة الإنترنت شعبية جوجل الخطوط ، أدوبي الخطوط ، والسنجاب الخط.
لاستخدام خط الويب المضمن على صفحة ويب ، ستحتاج إلى إضافة الرمز المناسب لتوصيل الخط عبر كس.
2. خطوط النظام:
بشكل افتراضي ، تحتوي متصفحات الويب على مجموعات مثبتة مسبقا من خطوط النظام المتاحة للاستخدام على موقعك. يمكنك اختيار أحد هذه الخطوط بحيث يكون موقعك متسقا مع المواقع الأخرى المفتوحة على أجهزة كمبيوتر المستخدمين.
لاستخدام خط النظام ، تحتاج فقط إلى تحديد اسمه في خاصية عائلة الخط المغلق.
3. الخطوط-التنزيلات:
خيار آخر لاختيار خط جديد هو تنزيل الخطوط. إنها ملفات خطوط يتم تنزيلها من خادم الويب الخاص بك واستخدامها على موقعك. يمكنك تنزيل الخطوط من موارد مختلفة وتحميلها على الخادم الخاص بك.
لاستخدام الخط الذي تم تنزيله ، ستحتاج إلى إضافة رمز كس المناسب عن طريق تحديد المسار إلى ملف الخط.
إذا كنت ترغب في استخدام خط غير موجود على جهاز الكمبيوتر الخاص بك ، يمكنك توصيله باستخدام شبكة تسليم المحتوى (كندي).
كندي هو نظام خادم موزع يخزن ويوفر الملفات ، مثل الخطوط ، من أجزاء مختلفة من العالم. يتيح ذلك لموقعك تحميل الخطوط بسرعة دون الحاجة إلى تخزينها على الخادم الخاص بك.
لتوصيل خط باستخدام كندي ، يجب إدراج رمز كس خاص في ملف النمط الخاص بك.
هنا هو رمز سبيل المثال التي يمكن استخدامها لتوصيل الخط مونتسيرات باستخدام جوجل الخطوط كندي:
@استيراد رابط ('https://fonts.googleapis.com/css2?family=Montserrat:wght@400; 700 & عرض = مبادلة');
الجسم {
في هذا المثال ، نستخدم قاعدة استيراد @لتوصيل أنماط الخطوط من كندي. ثم نطبق الخط على عنصر الجسم باستخدام خاصية عائلة الخط.
يرجى ملاحظة أنه بعد رابط كدن ، نحدد معلمات خط محددة مثل الوزن (400 و 700). يمكنك أيضا تحديد إعدادات الخط الأخرى في الإعدادات ، مثل الإمالة والحجم.
توصيل خط باستخدام ملف محلي
قد تحتاج إلى استخدام خط معين على موقع الويب الخاص بك لا يتم توفيره بواسطة مجموعة الخطوط القياسية. في هذه الحالة ، يمكنك توصيل الخط باستخدام ملف محلي.
أولا ، تحتاج إلى تنزيل ملف الخط الذي تريد استخدامه على موقعك. غالبا ما تحتوي ملفات الخطوط على امتداد.تف (تروتايب الخط) أو .أوتف (أوبن الخط). بعد التنزيل ، ضع ملف الخط في مجلد المشروع ، وعادة ما تختار مجلدا باسم "الخطوط" أو "الخطوط".
ثم تحتاج إلى تعيين قاعدة كس لاستخدام ملف الخط المحلي الخاص بك. للقيام بذلك،يمكنك استخدام قاعدة @الخط الوجه. هنا هو رمز عينة:
@الخط الوجه {
الخط الأسرة: 'ميفونت';
سرك: ورل('الخطوط/ميفونت.تف') شكل ('تروتايب');
}
في هذا المثال ، نستخدم قاعدة @الخط-الوجه لتحديد خط يسمى " ميفونت "وتحديد المسار إلى ملف الخط" الخطوط/ميفونت.صندوق النقد الدولي". ونحن أيضا تحديد تنسيق ملف الخط باستخدام السمة تنسيق وقيمة 'تروتايب'.
تأكد من تحديد المسار إلى ملف الخط بشكل صحيح ، بما في ذلك التهجئة الصحيحة للمجلد وامتدادات الملفات. إذا كان الخط في موقع مختلف ، فتأكد من تحديد المسار الصحيح.
بعد ذلك ، يمكنك استخدام الخط الجديد الخاص بك عن طريق تحديد اسمه في خاصية عائلة الخط في قواعد كس الأخرى. على سبيل المثال:
سفاري