شرح صفوف ومحتوى الفقرة
تقدّم تقنية الخطوط المتغيرة (Variable Fonts) حلاً هندسياً أكثر كفاءة؛ فبدلاً من رفع أربعة أو خمسة ملفات منفصلة للأوزان الثابتة، يجمع ملف .woff2 متغير واحد كامل طيف السماكات بسلاسة متصلة. يقلل هذا النهج عدد طلبات الشبكة إلى ملف وحيد، ويمنحك حرية استخدام أوزان وسطية دقيقة مثل 450 أو 650 أو 750.
لتعريف مدى الأوزان داخل قاعدة @font-face، اكتب الحد الأدنى متبوعاً بمسافة ثم الحد الأعلى على الصورة font-weight: 100 900; دون وضع شرطة بين الرقمين:
CSS
@font-face {
font-family: "CairoVar";
src: url("fonts/cairo-var.woff2")
format("woff2");
font-weight: 100 900;
font-display: swap;
}
h1 {
font: 750 26px/1.3 "CairoVar",
sans-serif;
}