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