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

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

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

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

مثال:

@الخط الوجه {

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

سرك: ورل('ويبفونت.ووف 2') شكل ('ووف 2'),

<url>.وف') شكل ('وف');

}

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

مثال:

الجسم {

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

}

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

1. توصيل عائلة الخطوط المغلق
2. طرق توصيل خط خارجي
3. استخدام عائلة خطوط على صفحة ويب
4. التوافق عبر المتصفح ودعم الخط
5. ميزات استخدام عائلة الخط في كس

توصيل عائلة الخطوط المغلق

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

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

1. انسخ ملفات الخطوط إلى دليل موقع الويب الخاص بك ، على سبيل المثال ، إلى مجلد باسم "الخطوط". تأكد من حفظ مسارات ملف الخط الصحيحة في ورقة أنماط كس.
2. افتح ورقة أنماط كس باستخدام أي محرر نصوص.
3. الصق الكود التالي في بداية ورقة الأنماط:

"'المغلق

@الخط الوجه {

عائلة الخط:"اسم الخط";

سرك: ورل("الخطوط/الخط_الاسم.تف") ؛ / * المسار إلى ملف الخط تروتايب */

}

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

1. في المغلق. على سبيل المثال:

"'المغلق

ص {

عائلة الخط: "اسم الخط" ، بلا شريف;

}

. في هذا المثال ، الخيار الثاني هو الخط"بلا الرقيق".

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

طرق توصيل خط خارجي

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

1. رابط إلى ملف الخط عبر علامة الارتباط

في مستند هتمل الخاص بك ، لتحديد ارتباط إلى ملف الخط في تعليمات اتصال كس.

2. رابط إلى ملف الخط عبر قاعدة استيراد @

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

@استيراد رابط ('https://fonts.googleapis.com/css?family=Font+Name');

3. الاتصال المحلي لملف الخط

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

@الخط الوجه {

الخط الأسرة: 'اسم الخط';

سرك: ورل('مسار/إلى/الخط.ووف 2') شكل ('ووف 2'),

رابط ('مسار / إلى / الخط.وف') شكل ('وف');

}

4. تضمين أحرف الخط في كس

الخط الأسرة: 'اسم الخط';

سرك: ورل (البيانات: تطبيق / الخط وف ؛ محارف=أوتف-8 ؛ قاعدة 64 ، / * يتم إدراج رمز حرف الخط هنا */) شكل('وف');

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

استخدام عائلة خطوط على صفحة ويب

لاستخدام عائلة خطوط على صفحة ويب ، يمكنك توصيله باستخدام خاصية كس

الخط الأسرة

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

هناك طريقتان لربط عائلة الخط:

استخدام الخطوط المثبتة على جهاز المستخدم.

استخدام خطوط الويب الخاصة التي تم تنزيلها من الخادم.

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

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

على سبيل المثال ، لتوصيل خط بلا مفتوح باستخدام خطوط جوجل ، يمكنك استخدام التعليمات البرمجية التالية:

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

الجسم {

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

}

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

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

التوافق عبر المتصفح ودعم الخط

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

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

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

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

@الخط الوجه {

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

سرك: ورل("ويبفونت.ووف 2") شكل ("ووف 2"),

عنوان ورل ("ويبفونت.وف") شكل ("وف");

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