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