فونت سیستمی CSS: چرا San Francisco رو مک اینقدر باحاله
فرانتاندخلاصهٔ کاملتر
کریس کوییر، نویسنده این مطلب، یه یادآوری ساده میده: مقدار system-ui تو font-family رو خیلیا فراموش کردن، در حالی که پشتیبانی خوبی رو مرورگرها و پلتفرمهای مختلف داره. وقتی از این مقدار استفاده میکنی، بهجای فونت دانلودی، همون فونت پیشفرض رابط کاربری سیستمعامل کاربر نمایش داده میشه؛ یعنی رو ویندوز یه چیزی شبیه فونت ویندوز میبینی، رو لینوکس شبیه لینوکس و رو مک فونت اپل. این یعنی هزینه دانلود فونت صفره و ظاهر سایت هم به چشم کاربرای قدیمی هر پلتفرم آشناتر میرسه.
مثال ساده استفاده از این مقدار تو CSS اینه:
html {
font: 100%/1.4 system-ui, sans-serif;
}نویسنده که خودش فقط مک داره، توضیح میده که با این مقدار فونت San Francisco اپل رو میگیره. نکته جالب اینه که San Francisco یه فونت متغیر (variable font) هست، یعنی وزن (wght) و عرض (wdth) حروفش رو میشه مستقیم با CSS و بدون بارگذاری فونت جدید تغییر داد. برای مثال:
h1 {
font-variation-settings:
"wght" 900,
"wdth" 700;
}این کد یه تیتر خیلی درشت و پهن میسازه، درحالیکه همچنان از همون فونت سیستمی استفاده میکنه. نویسنده میگه سایتها لازم نیست رو همه مرورگرها دقیقا یه شکل باشن و فالبکهای system-ui هم بهاندازه کافی قابل قبولن؛ حتی ممکنه برای کاربرای قدیمی هر پلتفرم، ظاهر سایت آشناتر و طبیعیتر به نظر بیاد چون شبیه رابط کاربری خودشونه.
نکات کلیدی:
- مقدار system-ui تو font-family فونت پیشفرض سیستمعامل کاربر رو نشون میده، بدون هزینه دانلود فونت
- رو مک این مقدار باعث نمایش فونت San Francisco اپل میشه
- San Francisco یه فونت متغیره؛ محورهای wght (وزن) و wdth (عرض) با font-variation-settings قابل کنترلن
- پشتیبانی مرورگرها از system-ui گستردهست و فالبکهاش هم وضعیت قابل قبولی دارن
