فونت‌ها
فونت اصلی
استایل‌های مربوط به font-family رو به * ندید چون باعث بالا رفتن Specificity میشه
و در کار بعضی از کتابخونه‌ها مثل Fontawesome یا Monaco Editor مشکل ایجاد میکنه.
به‌جاش میتونید این استایل رو به html بدید.
از اونجایی که به طور پیش‌فرض، font از المان پدر به ارث می‌رسه،
تمام المان‌های شما فونت مورد نظر رو دریافت می‌کنن.
اما بعضی از المان‌ها مثل input و button احتیاج دارن که دقیقاً فونت اون‌ها رو مشخص کنید؛
چون مرورگر به طور پیش‌فرض از فونت دیگه‌ای براشون استفاده میکنه.
html {
font-family: "Vazirmatn", system-ui;
}
input,
label,
select,
textarea,
button,
fieldset,
legend,
datalist,
output,
option,
optgroup {
font: inherit;
}
فونت پشتیبان
همیشه یه فونت پشتیبان مثل system-ui رو به آخر font-family اضافه کنید
تا اگه به هر دلیلی فونت اصلی از کار افتاد،
مرورگر بتونه از فونت پیش‌فرض استفاده کنه.
دقت کنید که فقط فونت‌های Generic می‌تونن به‌عنوان Fallback استفاده بشن:
- system-ui
- serif
- sans-serif
- cursive
- fantasy
- monospace
بهترین فونت پیش‌فرض system-ui ئه.
چون فونتیه که سیستم عامل ازش استفاده میکنه؛
بنابراین چشم کاربرش بهش عادت داره.
از طرفی تو زبان فارسی هم ظاهر نسبتاً خوبی داره.