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