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