کتابخانه
@fontsource/open-sans یه بسته npm برای میزبانی خودت از فونت Open Sans است. به جای لود کردن فونت از یه سرویس خارجی، فایل های فونت رو از همین بسته برمی داری و کنار پروژه یا روی هاست خودت سرو می کنی. برای سایت هایی که نمی خوان به اینترنت بین الملل وابسته باشن، گزینه خوبیه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز OFL-1.1؛ هش هر فایل با منبع بررسی شده است.
۲٫۸ مگابایت· ۳۹۷ فایل· انتشار
SHA-256: 2b40af3f0610e0fc0373b9d4fd4381597ddf7b648a59144b1b04b2dfee98b6ac
اگه سایتت فونت رو از یه سرویس خارجی لود می کنه، یه مشکل آشنا داری. وقتی اتصال به بیرون از کشور کند یا قطع می شه، مرورگر منتظر فونت می مونه و صفحه یا دیر نشون داده می شه یا با فونت پیش فرض سیستم باز می شه. @fontsource/open-sans همین وابستگی رو برمی داره. فونت Open Sans رو تمیز و مرتب به شکل یه بسته npm بهت می ده و فایل ها رو خودت سرو می کنی.
روش کارش ساده است. تو پروژه Fontsource هر فونت یه بسته جدا داره و داخلش فایل های فونت و CSS آماده با تعریف font-face هست. وزن ها و استایل ها هم جدا از هم ایمپورت می شن، پس لازم نیست همه رو بکشی تو پروژه. مثلا اگه فقط متن معمولی و پررنگ می خوای، همون دو تا رو ایمپورت می کنی. مجوز این فونت OFL هست و استفاده تو پروژه های شخصی و تجاری رو اجازه می ده، ولی بهتره متن مجوز رو یه بار خودت هم بخونی.
یه نکته رو از همین اول جدی بگیر: Open Sans حروف فارسی نداره. برای متن لاتین، اعداد انگلیسی، نام برندها، کدها و منوهای انگلیسی عالیه. اگه سایتت فارسیه، برای متن فارسی باید یه فونت فارسی جدا انتخاب کنی و Open Sans فقط بخش لاتین رو پوشش بده. اگه این رو ندونی، می بینی متن فارسی با یه فونت پیش فرض نمایش داده می شه و فکر می کنی خود فونت لود نشده.
این بسته بیشتر به درد پروژه هایی می خوره که با npm و یه ابزار بیلد کار می کنن، مثل قالب های سفارشی، پروژه های وردپرسی با Vite یا webpack، یا فرانت اند جدا از وردپرس. اگه سایتت یه قالب آماده ساده است و بیلدی نداری، لازم نیست حتما سراغ npm بری. می تونی فایل های فونت رو دستی روی هاست بذاری.
موقع انتخاب، فقط وزن هایی رو بیار که واقعا استفاده می کنی. هر وزن اضافه یعنی حجم بیشتر برای بازدیدکننده. نسخه های رسمی و بدون تغییر این بسته تو مخزن داخلی ما هم در دسترسه، پس اگه دسترسی به npm مشکل داشت، می تونی از همین صفحه برداری.
برای استفاده لازم نیست کار پیچیده ای بکنی. مسیر کلی این طوره:
بعد از اضافه کردن، صفحه رو تو مرورگر باز کن و از تب Network ابزار توسعه دهنده چک کن فایل فونت از دامنه خودت لود می شه، نه از سرویس بیرونی. اگه هنوز درخواست بیرونی می بینی، احتمالا قالب یا افزونه ای فونت خودش رو جدا لود می کنه و باید اون رو خاموش کنی.
نه. Open Sans برای حروف لاتین و چند الفبای دیگه طراحی شده و گلیف فارسی نداره. اگه متن فارسی باهاش بنویسی، مرورگر میره سراغ فونت جایگزین. بهترین کار اینه که برای فارسی یه فونت فارسی جدا انتخاب کنی و Open Sans رو برای متن انگلیسی و اعداد لاتین نگه داری.
تو Google Fonts مرورگر بازدیدکننده فونت رو از سرور بیرونی می گیره. تو این بسته فایل ها کنار پروژه خودت هستن و از سرور خودت سرو می شن. نتیجه اش وابستگی کمتر به اینترنت بین الملل و کنترل بیشتر روی کش و بارگذاری فونته.
نه، فقط همونایی که تو طراحی استفاده می کنی. هر وزن یه فایل جدا داره و اضافه کردنش حجم صفحه رو بیشتر می کنه. برای بیشتر سایت ها متن معمولی و یه وزن پررنگ کافیه. اگه بعدا لازم شد، وزن دیگه ای رو جداگانه اضافه کن.
بله. فایل های فونت رو بگیر، تو پوشه قالب یا قالب فرزند بذار و با font-face تو CSS معرفی شون کن. یا از کد آماده پایین صفحه کمک بگیر. فقط حواست باشه فونت هایی رو که خود قالب یا افزونه ها از بیرون لود می کنن خاموش کنی.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.