يتم التحكم في الطباعة من خلال مجموعة من خصائص font-* و text-*. الحصول على النتيجة الصحيحة هو معظم ما يجعل الصفحة تبدو مصقولة وقابلة للقراءة.
css
.text {
font-family: "Inter", system-ui, sans-serif; /* with fallbacks */
font-size: 1rem; /* size (use rem for accessibility) */
font-weight: 600; /* 100–900; 400 normal, 700 bold */
font-style: italic; /* normal | italic */
line-height: 1.5; /* spacing between lines — unitless is best */
letter-spacing: 0.02em;/* tracking between characters */
}
مكدسات بديلة font-family
css
font-family: "Inter", system-ui, -apple-system, sans-serif;
يحاول المتصفح كل واحدة بالترتيب حتى يجد واحدة متاحة. انتهِ دائماً بـ عائلة عامة (sans-serif, serif, monospace) حتى يتم عرض النص حتى لو فشلت الخطوط المخصصة. يستخدم system-ui الخط الأصلي للنظام (سريع، بدون تحميل).
خصائص تخطيط النص
css
.text {
text-align: center; /* left | right | center | justify */
text-decoration: underline;/* underline | line-through | none */
text-transform: uppercase; /* UPPERCASE | lowercase | Capitalize */
white-space: nowrap; /* prevent wrapping */
word-break: break-word; /* break long words/URLs */
}
line-height: استخدم القيم بدون وحدات
css
line-height: 1.5; /* ✅ 1.5 × the element's font-size — scales correctly */
line-height: 24px; /* ⚠️ fixed — doesn't adapt if font-size changes */
line-height بدون وحدات يضرب حجم الخط الخاص بكل عنصر، لذا يبقى متناسباً عندما يكون للعناصر المتداخلة أحجام مختلفة — الطريقة الموصى بها.
قطع النص (حاجة شائعة)
css
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* shows "..." when text is cut off */
}
لماذا يهم
خصائص النص تحدد سهولة القراءة والتسلسل البصري — font-size/weight للتأكيد، line-height (~1.5) للقراءة المريحة، مكدسات بديلة للموثوقية، و text-overflow للقطع النظيف.
الطباعة الجيدة هي معظم الواجهة الجيدة.
