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