كيفية توصيل الخطوط المغلق: دليل المبتدئين الكامل

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

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

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

على سبيل المثال ، إذا كان الخط الخاص بك يسمى "ميفونت-العادية" ، يمكنك إنشاء ملف باسم "ميفونت.المغلق".

افتح ملف كس الذي تم إنشاؤه في محرر نصوص وأضف الكود التالي:

1. كيفية استخدام الخطوط في كس: دليل مفصل للمبتدئين
2. اختيار وتنزيل الخطوط
3. إضافة الخطوط عبر خطوط جوجل
4. استيراد الخطوط المحلية
5. الخطوط المخصصة باستخدام @الخط الوجه
6. تطبيق خط على عناصر في كس

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

الخطوط المضمنة في كس هي الخطوط المتوفرة في كل متصفح بشكل افتراضي. يمكن استخدامها عن طريق تعيين قيم لخاصية عائلة الخط في كس.

يبدو رمز استخدام الخطوط المضمنة كما يلي:

إذا كنت بحاجة إلى استخدام خط من نظام المستخدم ، يمكنك تحديد اسمه في كس. على سبيل المثال:

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

@الخط الوجه {

الخط الأسرة: "ميكوستومفونت";

سرك: ورل ("ميفونت.ووف");

}

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

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

@الخط الوجه {

الخط الأسرة: "ميكوستومفونت" ، أريال ، بلا الرقيق;

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

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

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

1

تنزيل محلي

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

@الخط الوجه {

الخط الأسرة: 'يورفونت';

 سرك: ورل('يورفونت.وف') شكل ('وف');

}

2

تنزيل خارجي

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

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

الجسم {

الخط الأسرة: 'يورفونت' ، بلا الرقيق;

}

إضافة الخطوط عبر خطوط جوجل

1. انتقل إلى موقع جوجل الخطوط في https://fonts.google.com /.

• 2. حدد الخط الذي تريده ، اعرضه وانقر فوق الزر" تحديد هذا الخط".

3. في صفحة الخط المحدد ، حدد الإعدادات الضرورية ، مثل نوع الخط وحجمه ونمطه ولغته.

4. عند الانتهاء من الإعدادات ، انسخ رمز هتمل الذي تم إنشاؤه والذي سيتم إضافته إلى موقعك.

5. الصق الكود المنسوخ في قسم مستند هتمل:

• 6. استبدل "اسم الخط" باسم الخط الذي حددته. يمكنك أيضا إضافة خطوط متعددة عن طريق فصلها برمز خط عمودي (|).

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

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

استيراد الخطوط المحلية

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

1. قم بإنشاء مجلد على الخادم الخاص بك لتخزين ملفات الخطوط.

• 2. انقل ملفات الخطوط (عادة الملفات ذات الامتداد .صندوق النقد الدولي, .محكمة تكافؤ الفرص, .ووف و .2) إلى المجلد الذي تم إنشاؤه.

الآن أن لديك ملفات الخط ، يمكنك استخدامها في رمز كس الخاص بك.

1. افتح ملف كس حيث تريد استخدام الخط.

2. إضافة التعليمات البرمجية المغلق التالية لاستيراد الخطوط:

لخطوط تنسيق الصناديق:

"'المغلق

@الخط الوجه {

الخط الأسرة: ‘Название_шрифта’;

src: url(‘путь_к_шрифту/название_шрифта.ttf’) format(‘truetype’);

}

Для шрифтов формата EOT:

«`css

@font-face {

font-family: ‘Название_шрифта’;

src: url(‘путь_к_шрифту/название_шрифта.eot’) format(’embedded-opentype’);

}

Для шрифтов формата WOFF и WOFF2:

«`css

@font-face {

عنوان ورل ('المسار إلى شريفت / اسم شريفت.ووف 2') شكل ('ووف 2');

}

محدد {

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

}

تم! الآن يمكنك استخدام الخطوط المحلية في موقع الويب الخاص بك عن طريق ربطها عبر رمز كس.

الخطوط المخصصة باستخدام @الخط الوجه

@الخط الوجه {

الخط الأسرة: 'ميكوستومفونت';

سرك: ورل('باث_فيل/الخط.ووف 2') شكل ('ووف 2'),

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

}