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