کتابخانه
@fontsource-variable/open-sans یه بسته npm برای میزبانی خودته روی فونت Open Sans در نسخه متغیر. فایل های فونت کنار پروژه می مونن و بدون وابستگی به سرویس بیرونی مثل گوگل فونت ها لود می شن. اگه سایتت متن لاتین داره و سرعت و پایداری فونت برات مهمه، انتخاب خوبیه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز OFL-1.1؛ هش هر فایل با منبع بررسی شده است.
۲٫۶ مگابایت· ۷۱ فایل· انتشار
SHA-256: 114dfe9b6eb0beb3501e556c1b9b35e7003cca031b9fca3eb8109385dee496bf
Open Sans از پرکاربردترین فونت های بدون سریف برای متن لاتینه و گوگل برای وب منتشرش کرده. بیشتر سایت ها اون رو از گوگل فونت ها لود می کنن. روی سایت ایرانی این یه مشکل تکراری داره: وقتی اینترنت بین الملل کند یا قطع می شه، فونت دیر میاد یا اصلا نمیاد، مرورگر می ره سراغ فونت پیش فرض سیستم و ظاهر صفحه به هم می ریزه. این بسته برای همین ساخته شده. فونت رو توی خود پروژه نگه می داری و از سرور خودت سرو می کنی.
مزیت نسخه متغیر اینه که به جای یه فایل جدا برای هر وزن، یه فایل داری که وزن توش پیوسته تغییر می کنه. پس می تونی هر وزنی توی بازه پشتیبانی شده بدی، نه فقط عددهای گرد، و معمولا درخواست های کمتری هم می ره. بسته های Fontsource فونت رو بر اساس زیرمجموعه های نوشتاری مثل لاتین تکه تکه می کنن و با unicode-range معرفی شون می کنن. برای همین مرورگر فقط تکه هایی رو می گیره که صفحه بهشون نیاز داره.
یه نکته رو از اول بدون: Open Sans حروف فارسی نداره. توی سایت فارسی فقط برای کلمه های انگلیسی، اسم برندها و عددهای لاتین به کار میاد و برای متن اصلی باید یه فونت فارسی جدا انتخاب کنی. توی font-family معمولا Open Sans رو اول می نویسن و فونت فارسی رو بعدش. چون Open Sans حروف فارسی نداره، مرورگر اون ها رو از فونت دوم می گیره. اگه سایتت کاملا فارسیه و هیچ متن لاتینی نداره، لازم نیست این بسته رو بیاری.
این بسته بیشتر به درد پروژه هایی می خوره که با npm و باندلری مثل Vite یا webpack ساخته می شن، مثل React، Vue و Next. توی وردپرس هم اگه قالبت فونت رو از گوگل می گیره و می خوای مستقل بشی، می تونی فایل ها رو کنار قالب بذاری و خودت معرفی شون کنی. اگه فقط یکی دو وزن ثابت لازم داری، نسخه غیر متغیر ممکنه سبک تر باشه، پس مقایسه کن. مرورگرهای خیلی قدیمی هم فونت متغیر رو درست نشون نمی دن. اگه مخاطبت از اون ها استفاده می کنه، یه فونت جایگزین توی CSS بذار.
مجوز این فونت OFL (همون SIL Open Font License) هست. استفاده تجاری و جاسازی توی سایت و محصول آزاده، فقط خود فونت رو نمی شه جدا فروخت و متن مجوز باید همراهش بمونه. نسخه رسمی و بدون تغییر این بسته توی مخزن داخلی ما هم هست، پس وقتی دسترسی به npm مشکل داره می تونی از همون جا برداری.
اگه پروژه ات باندلر داره، همین قدم ها رو برو. اگه نداره، قدم ماقبل آخر رو ببین.
آخرش توی تب Network مرورگر چک کن فایل های فونت از دامنه خودت میان، نه از سرویس بیرونی.
نه، Open Sans فقط حروف لاتین و چند خط دیگه رو داره و حروف فارسی توش نیست. برای متن فارسی باید یه فونت فارسی جدا بذاری و Open Sans رو برای کلمه های انگلیسی و عددهای لاتین کنارش به کار ببری.
توی این روش فایل های فونت از سرور خودت سرو می شن و به سرویس بیرونی وابسته نیستی. وقتی دسترسی به سرویس های خارجی کند یا قطعه، فونت همچنان درست لود می شه. کنترل کش و تنظیمات سرو فایل ها هم دست خودته.
اگه چند وزن مختلف استفاده می کنی، نسخه متغیر راحت تره چون یه فایل برای همه وزن هاست. اگه فقط یکی دو وزن ثابت لازم داری، نسخه معمولی ممکنه سبک تر باشه. بهترین راه اینه که توی پروژه خودت هر دو رو امتحان کنی.
مجوز این فونت OFL هست و استفاده تجاری و جاسازی توی سایت و محصول رو اجازه می ده. فقط نباید خود فونت رو به تنهایی بفروشی و متن مجوز باید همراه فایل ها بمونه. برای جزئیات دقیق، متن مجوز رو بخون.
بله. فایل های فونت رو کنار قالب یا قالب فرزند روی هاست بذار، با @font-face معرفی شون کن و لود فونت از گوگل رو توی قالب غیرفعال کن. بعدش توی تب Network چک کن که فایل ها از دامنه خودت میان.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.