إضافة الخطوط

في AMP، للمحافظة على جعل أوقات التحميل سريعة قدر الإمكان، لا يمكنك تضمين جداول بيانات خارجية. مع ذلك، هناك ثمة استثناء وحيد لهذه القاعدة —الخطوط.

يمكنك تضمين خطوط مخصصة في صفحات AMP الخاصة بك بطريقتين:

عن طريق علامة <link>: لموفري الخطوط المدرجين في قائمة السماح فقط.
باستخدام قاعدة @font-face من CSS: لا يوجد هناك أي قيود، ومسموح باستعمال جميع الخطوط.

في هذا البرنامج التعليمي، سوف نستخدم علامة <link> لإضافة خطوط إلى صفحتنا. أضف ارتباطًا لسجل الأنماط في <head> لطلب خط Raleway:

<link
  rel="stylesheet"
  type="text/css"
  href="https://fonts.googleapis.com/css?family=Raleway"
/>

الآن، قم بتحديث أداة اختيار body لـ CSS لتشمل مرجع إلى Raleway:

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

قم بتحديث الصفحة وتحقق من المظهر الجديد للصفحة. افحص أيضًا إخراج أداة التحقق من صحة AMP. يجب ألا يكون هناك أي أخطاء لطلب سجل الأنماط الخارجي هذا.

يمكن أن تكون خطوط الويب مضرة بأداء موقع الويب، حتى ولو كانت على موقع AMP سريع. استخدم خاصية font-display من CSS لتحسين سلوك التحميل للخطوط الخاصة بك.

لقد استكملت مقالة AMP الإخبارية الخاصة بك! هنا الصورة التي يجب أن تبدو عليها:

مقالة إخبارية مكتملة

الفصل السابق الفصل التالي