فيو شبيبة: ربط الخط إلى موقع على شبكة الانترنت - تعليمات وأمثلة

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

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

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

@الخط الوجه {

عائلة الخط:'اسم مقتصد';

سرك: ورل ('باث__شريفت');

}

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

توصيل الخط إلى فيو.شبيبة: تعليمات وأمثلة

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

1. اختيار الخط

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

2. تحميل الخط

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

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

3. توصيل الخط

الآن بعد أن أصبح لديك ملفات الخطوط ، يمكنك توصيله بمشروعك. فيو.شبيبة . في فهرس الملف.أتش تي أم أل للمشروع الخاص بك ، إضافة التعليمات البرمجية التالية داخل العلامة :

@الخط الوجه {

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

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

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

}

استبدال 'اسم الخط' مع اسم الخط الحالي ، والمسار إلى ملفات الخط ('مسار/إلى/الخط.ووف 2 ' و ' مسار / إلى / الخط.وف') مع المسارات المقابلة في المشروع الخاص بك.

4. باستخدام الخط

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

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

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

خطوات لربط الخط إلى موقع على شبكة الانترنت في فيو.شبيبة

1. أمثلة على اتصال الخط في فيو شبيبة
2. خاتمة
3. خطوات لربط الخط إلى الموقع في فيو.شبيبة
4. لتوصيل الخط إلى الموقع في فيو.شبيبة اتبع الخطوات التالية:

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

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

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

1. استيراد الخط إلى المشروع الخاص بك. للقيام بذلك ، أضف رمز استيراد الخط إلى أعلى الملف:

"'جافا سكريبت

@استيراد رابط ('https://fonts.googleapis.com/css?العائلة = الاسم + الخط');

استبدل" الاسم+الخط " برمز الخط المحدد.

قم بتطبيق الخط الجديد على العناصر المطلوبة في موقعك. أضف خاصية "عائلة الخط" إلى قواعد كس في مكون فيو الخاص بك.شبيبة:

"'المغلق

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

استبدل" الاسم+الخط " برمز الخط المحدد.

الآن سيتم تطبيق الخط الجديد على العناصر التي قمت بتعيين خاصية "عائلة الخط" لها.

• في هذا القسم ، وسوف ننظر في عدة أمثلة من ربط الخطوط إلى مشروع تم إنشاؤه باستخدام فيو جس.
• .

فتح

التطبيق.ملف فيو

• @الخط الوجه {

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

سرك: ورل ('../ الأصول / الخطوط / ملف الخط الخاص بك.تف') شكل ('تروتايب');

}

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

}

• فتح

التطبيق.ملف فيو

وإضافة التعليمات البرمجية التالية إلى كتلة

:

/ * توصيل الخط من الخطوط جوجل */

@استيراد رابط ('https://fonts.googleapis.com/css2?family=Roboto:wght@400 700 & عرض = مبادلة');

/ * باستخدام الخط */

الجسم {

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

}

في المثال أعلاه ، نقوم بتوصيل خط روبوتو بوزن 400 و 700 من خطوط جوجل. يمكنك تغيير إعدادات اتصال الخط وفقا لاحتياجاتك.