يلعب اختيار الخط المناسب لصفحة الويب دورا مهما في إنشاء تصميم فريد وجماليات عامة للموقع. ولكن ماذا لو الخطوط القياسية لا تناسب الاحتياجات الخاصة بك? لا مشكلة! في هذا الدليل التفصيلي ، سنوضح لك كيفية تضمين الخط الخاص بك على صفحة الويب.
أولا وقبل كل شيء ، سوف تحتاج إلى الخط نفسه ، في تروتايب (تف) أو أوبن (أوتف) الشكل. إذا لم يكن لديك واحد ، يمكنك العثور على خطوط مجانية على مواقع الوصول المفتوح المختلفة. ابحث عن الخط الذي يعجبك وقم بتنزيله على جهاز الكمبيوتر الخاص بك.
عندما تكون قد حددت الخط المناسب بالفعل ، قم بإنشاء مجلد على خادم الويب أو الاستضافة وقم بتحميل ملفات الخطوط إليه. لكي تستخدم صفحة الويب الخاصة بك هذا الخط ، تحتاج إلى إضافة رمز كس خاص.
ملاحظة: لا تنس التحقق من أن ترخيص استخدام الخط المحدد يسمح باستخدامه على صفحات الويب.
لتحديد المسار إلى ملفات الخط. يجب تحديد اسم الخط ، والمسار إلى ملف تف أو أوتف ، وتحديد تنسيقات الخط التي يدعمها كل متصفح.
- بما في ذلك خط على صفحة ويب: خطوة بخطوة
- الخطوط على صفحات الويب: أهمية الاختيار
- اختيار الخط المناسب لموقعك
- تحميل وتثبيت الخط المحدد
- توصيل خط بصفحة ويب
- تغيير الخطوط في المغلق
- اختبار والتحقق من وظيفة الخط
بما في ذلك خط على صفحة ويب: خطوة بخطوة
يساعد استخدام خطوط خاصة على صفحات الويب على تحسين مظهر وتفرد المحتوى الخاص بك. ومع ذلك ، لإظهار خط غير قياسي على صفحة الويب الخاصة بك ، ستحتاج إلى اتباع عدة خطوات.
- البحث عن الخط:
- اتصال الخط:
- اختبار:
الآن أنت تعرف كيفية تضمين الخط على صفحة الويب الخاصة بك. تذكر أن تختار الخط الصحيح وتعيين الأنماط المناسبة لإنشاء محتوى فريد وجذاب لموقعك.
الخطوط على صفحات الويب: أهمية الاختيار
تلعب الخطوط دورا رئيسيا في التصميم المرئي لصفحات الويب. أنها تؤثر بشكل كبير على قراءة وإدراك المحتوى من قبل المستخدم. يمكن أن يؤدي اختيار الخط الصحيح إلى جعل الصفحة أكثر جاذبية واحترافية ، في حين أن اتخاذ القرار الخاطئ يمكن أن يقلل من جودة تجربة المستخدم.
أحد الجوانب المهمة لاختيار الخط هو سهولة قراءته. يجب أن يكون الخط سهل القراءة بغض النظر عن الحجم أو اللون. يجب تجنب الخطوط الصغيرة جدا أو الرفيعة جدا ، لأن ذلك قد يجعل من الصعب قراءة المعلومات على صفحة الويب.
عامل مهم آخر هو تطابق الخط المحدد مع أهداف ومعنى المحتوى. يمكن أن تنقل الخطوط المختلفة مزاجا وجوا مختلفا: شكلي ، مرح ، جدية ، إلخ. لذلك ، من المهم اختيار خط يطابق النمط العام ونبرة صفحة الويب.
تجدر الإشارة أيضا إلى أن بعض الخطوط قد لا تكون متاحة على جهاز الكمبيوتر الخاص بالمستخدم. هذا يعني أنه إذا كنت تستخدم خطا غير قياسي ، فقد لا يتم عرضه على جهاز المستخدم. في مثل هذه الحالات ، يوصى باستخدام خيارات خط النسخ الاحتياطي أو استخدام الخطوط المضمنة المتوفرة على جميع الأجهزة.
بالإضافة إلى ذلك ، يجب ألا ننسى إمكانية الوصول إلى المحتوى للمستخدمين ذوي الإعاقة. قد يكون من الصعب على الأشخاص الذين يعانون من عسر القراءة أو مشاكل بصرية قراءة بعض الخطوط. في مثل هذه الحالات ، يوصى باختيار الخطوط ذات القراءة الجيدة واستخدام الأحجام والتباين اللائق.
نتيجة لذلك ، يمكن للخط المختار جيدا تحسين المظهر المرئي لصفحة الويب وزيادة قابليتها للقراءة وجعل المحتوى أكثر جاذبية للمستخدمين. عند اختيار الخط ، يجب أن تأخذ في الاعتبار سهولة قراءته ، والامتثال لأهداف ومعنى المحتوى ، وإمكانية الوصول لجميع المستخدمين والنمط العام لصفحة الويب.
اختيار الخط المناسب لموقعك
وإليك بعض النصائح لمساعدتك في اختيار الخط المناسب لموقع الويب الخاص بك:
1. نهج التصميم
قبل اختيار الخط ، حدد النمط العام والغرض من التصميم الخاص بك. يجب أن يتطابق الخط مع الجماليات العامة لموقعك وأن ينقل مزاجه ورسالته.
2. سهولة القراءة
بالإضافة إلى النمط ، من المهم مراعاة إمكانية قراءة الخط. يجب أن يكون الخط قابلا للقراءة بدرجة كافية بحيث يمكن للمستخدمين قراءة النص على موقعك بسهولة. تجنب الخطوط شديدة التعقيد أو غير العادية.
3. توافق الويب
يرجى ملاحظة أنه ليست كل الخطوط متوافقة مع الويب وقد لا يتم عرضها على جميع أنظمة التشغيل والأجهزة. عند اختيار خط ، تأكد من أنه خط ويب أو أنك تستخدم قواعد كس خاصة لتوصيله بموقعك.
4. اللغات المدعومة
إذا كان موقع الويب الخاص بك سيحتوي على نص بعدة لغات ، فتأكد من أن الخط المحدد يدعم جميع اللغات الضرورية. قد لا تعرض بعض الخطوط أحرفا أو رموزا بلغات معينة ، مما قد يؤثر سلبا على سهولة القراءة.
5. نسبة التباين
انتبه إلى تباين الخط الخاص بك مع خلفية الموقع. يجب أن يكون الخط متناقضا بدرجة كافية بحيث لا يكون الاهتمام القصير للمستخدمين غير واضح وأن النص مرئي بوضوح.
باتباع هذه النصائح ، ستتمكن من اختيار الخط المناسب لموقع الويب الخاص بك والذي يتناسب مع أسلوبه ، ويكون قابلا للقراءة ويترك انطباعا جيدا لدى زوارك.
تحميل وتثبيت الخط المحدد
1. قم بزيارة موقع الويب حيث تريد تنزيل الخط المحدد.
2. العثور على الصفحة مع الخط والذهاب إليها.
3. عادة ما يكون هناك زر" تنزيل " في صفحة الخط ، انقر فوقه.
4. سيتم تنزيل الخط كملف مضغوط. قم بفك ضغط الملف الموجود على جهاز الكمبيوتر الخاص بك.
5. انتقل إلى مجلد الخط الذي تم تنزيله وابحث عن ملفات الخط في ملف .أوتف, .صندوق النقد الدولي أو .تنسيقات وف.
ملاحظة: ربما يحتوي الخط على العديد من المتغيرات بخطوط مختلفة (على سبيل المثال ، غامق ، مائل ، تحته خط). حدد الملفات اللازمة لتنزيلها وفقا لمتطلباتك.
6. قم بإنشاء مجلد على الخادم أو الاستضافة حيث ستقوم بتخزين الخطوط. سمها ،على سبيل المثال ، "الخطوط".
7. انقل ملفات الخطوط التي تم تنزيلها إلى المجلد الذي تم إنشاؤه على الخادم.
8. تأكد من إمكانية الوصول إلى ملفات الخطوط عبر عنوان ورل الذي يمكنك استخدامه على صفحة الويب. على سبيل المثال ، قد يبدو عنوان ورل كما يلي: "
https://example.com/fonts/yourfont.ttf 9. قم بتشغيل الخط على صفحة الويب الخاصة بك على النحو التالي:
ملاحظة: إذا كان لديك ملف خط بالتنسيق .المغلق ، إنشاء ملف جديد.كس ونسخ محتويات ملف الخط في ذلك. ثم استخدم الرابط إلى الملف الجديد.كس في العلامة .
توصيل خط بصفحة ويب
لتوصيل خط بصفحة ويب ، تحتاج إلى اتباع عدة خطوات:
1. قم بتنزيل ملف الخط (عادة بتنسيقات.صندوق النقد الدولي, .أوتف, .ووف أو .2) أو استخدام مصدر خارجي.
2. قم بإنشاء مجلد في مشروعك حيث ستضع ملف الخط الذي تم تنزيله.
3. قم بتوصيل الخط بأنماط صفحة الويب الخاصة بك باستخدام قواعد كس.
لتوصيل خط خارجي ، استخدم قاعدة @وجه الخط داخل قسم الأنماط في صفحة الويب الخاصة بك:
هنا:
- اسم الخط-يحدد اسم الخط لاستخدامها في المغلق;
- مسار الخط-يحدد المسار إلى ملف الخط بالنسبة إلى المجلد الجذر للمشروع;
- اسم الخط.تمديد الخط-يحدد اسم ملف الخط وامتداده.
4. حدد العناصر المحددة التي تريد تطبيق الخط المحدد عليها ، واستخدم خاصية عائلة الخط لتحديد اسمها:
هنا:
- اسم الخط - اسم الخط المحدد في @قاعدة وجه الخط;
- الخط الاحتياطي-خط بديل سيتم استخدامه إذا كان الخط المحدد غير متوفر.
5. حفظ وتحديث صفحة الويب الخاصة بك لمعرفة كيفية تطبيق الخط الجديد على العناصر المحددة.
تغيير الخطوط في المغلق
إذا كنت لا تحب الخط القياسي الذي يتم استخدامه افتراضيا على صفحة الويب الخاصة بك ، يمكنك بسهولة تغييره باستخدام كس.
. تتيح لك هذه الخاصية تعيين خطوط مختلفة سيتم استخدامها لعرض النص على صفحة الويب الخاصة بك. يمكنك تحديد خطوط متعددة مفصولة بفواصل بحيث يمكن للمتصفح تحديد أول خط متاح.
مثال:
الخط الأسرة: أريال ، بلا الرقيق;
}
بالإضافة إلى ذلك ، يمكنك أيضا استخدام خطوط محددة يمكن تنزيلها عن طريق توصيل الخطوط من موارد أو ملفات خارجية. على سبيل المثال ، يمكنك توصيل خط روبوتو من خدمة خطوط جوجل على النحو التالي:
@استيراد رابط ('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
بعد توصيل الخط ، يمكنك استخدامه في كس عن طريق تحديد اسمه في الخاصية
الخط الأسرة
:
ص {
الخط الأسرة: 'روبوتو' ، بلا الرقيق;
}