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