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