یک API برای فونت های وب سریع و زیبا

نحوه استفاده از Google Fonts CSS API برای ارائه کارآمد فونت های وب.

Jimmy Mooney

در طول سال ها، با فناوری فونت های وب ، چیزهای زیادی تغییر کرده است. چیزی که قبلاً یک روش خاص بود که نیاز به تصویری از متن یا یک افزونه فلش داشت (و بهینه‌سازی موتور جستجوی وب‌سایت شما را به خطر انداخت) اکنون یک روش استاندارد در سراسر وب است. روزی روزگاری، قبل از بارگیری صفحه، مجبور بودید یک فونت کامل را بارگیری کنید - با سبک ها و کاراکترهایی که ممکن است حتی استفاده نکرده باشید - اما حتی این موضوع به گذشته تبدیل شده است.

Google Fonts CSS API نیز در طول سال‌ها تکامل یافته است تا با تغییرات در فناوری فونت‌های وب همگام شود. راه درازی از ارزش پیشنهادی اصلی خود پیموده است - برای سریع‌تر کردن وب با اجازه دادن به مرورگر شما برای ذخیره فونت‌های رایج در تمام وب‌سایت‌هایی که از API استفاده می‌کنند. این دیگر درست نیست ، اما API همچنان بهینه‌سازی‌های اضافی و مهمی را ارائه می‌کند تا وب‌سایت‌ها به سرعت بارگیری شوند و فونت‌ها به خوبی کار کنند.

با استفاده از Google Fonts CSS API، وب‌سایت شما می‌تواند فقط داده‌های فونت مورد نیاز خود را درخواست کند تا زمان بارگذاری CSS خود را به حداقل برساند و اطمینان حاصل شود که بازدیدکنندگان وب‌سایت شما می‌توانند محتوای شما را در سریع‌ترین زمان ممکن بارگذاری کنند. API به هر درخواست با بهترین فونت برای آن مرورگر وب پاسخ می دهد.

همه اینها با گنجاندن یک خط HTML در کد شما اتفاق می افتد.

نحوه استفاده از Google Fonts CSS API

اسناد Google Fonts CSS API آن را به خوبی خلاصه می کند:

شما نیازی به انجام هیچ برنامه نویسی ندارید. تنها کاری که باید انجام دهید این است که یک پیوند شیوه نامه خاص را به سند HTML خود اضافه کنید، سپس به فونت در سبک CSS مراجعه کنید.

حداقل کاری که باید انجام دهید این است که یک خط را در HTML خود بگنجانید، مانند این:

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />

وقتی فونتی را از API درخواست می‌کنید، مشخص می‌کنید که کدام خانواده یا خانواده‌ها را می‌خواهید و در صورت تمایل، وزن‌ها، سبک‌ها، زیرمجموعه‌ها و بسیاری از گزینه‌های دیگر را مشخص می‌کنید. سپس API درخواست شما را به یکی از این دو روش رسیدگی می کند:

1. اگر درخواست شما از پارامترهای مشترکی استفاده می‌کند که API قبلاً فایل‌هایی برای آنها دارد، بلافاصله CSS را به کاربر شما برمی‌گرداند و آنها را به این فایل‌ها هدایت می‌کند.
2. اگر فونتی با پارامترهایی درخواست کرده‌اید که API در حال حاضر آن‌ها را در حافظه پنهان ندارد، فونت‌های شما را به سرعت زیرمجموعه‌بندی می‌کند و از HarfBuzz برای انجام سریع آن استفاده می‌کند و CSS را با اشاره به آنها برمی‌گرداند.

فایل های فونت می توانند بزرگ باشند، اما لازم نیست که بزرگ باشند

فونت های وب می توانند بزرگ باشند. درسته. تنها یک وزن Noto Sans Japanese در WOFF2 تقریباً 3.4 مگابایت است—و دانلود آن برای تک تک کاربران شما زمان بارگذاری صفحه شما را کاهش می دهد. وقتی هر میلی‌ثانیه مهم است و هر بایت ارزشمند است، می‌خواهید مطمئن شوید که فقط داده‌هایی را که کاربران نیاز دارند بارگیری می‌کنید.

Google Fonts CSS API می‌تواند فایل‌های فونت بسیار کوچکی (به نام زیرمجموعه‌ها) ایجاد کند، که در زمان واقعی تولید می‌شوند تا فقط متن و سبک‌های مورد نیاز وب‌سایت شما را به کاربران ارائه دهد. به جای استفاده از کل فونت، می توانید با استفاده از پارامتر text ، کاراکترهای خاصی را درخواست کنید.

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />

CSS API همچنین بهینه سازی فونت وب اضافی را به طور خودکار و بدون هیچ پارامتر API برای کاربران شما فراهم می کند. API به کاربران شما فایل‌های CSS را ارائه می‌کند که unicode-range قبلاً فعال شده است ( در صورت پشتیبانی از مرورگر وب )، بنابراین آنها فونت‌ها را فقط برای کاراکترهای خاصی که وب‌سایت شما نیاز دارد بارگیری می‌کنند.

توصیفگر CSS محدوده یونیکد ابزاری است که اکنون می تواند برای مبارزه با بارگیری فونت های بزرگ مورد استفاده قرار گیرد. این ویژگی CSS طیفی از کاراکترهای یونیکد را تنظیم می کند که اعلان @font-face حاوی آن است. اگر یکی از این کاراکترها در صفحه نمایش داده شود، آن فونت دانلود می شود. این برای همه انواع زبان ها به خوبی کار می کند، بنابراین می توانید فونتی را انتخاب کنید که شامل نویسه های لاتین، یونانی یا سیریلیک باشد و زیر مجموعه های کوچکتری ایجاد کنید. در نمودار قبلی، می بینید که اگر مجبور باشید هر سه مجموعه کاراکتر را بارگذاری کنید، بیش از 600 گلیف خواهد بود.

این همچنین فونت های چینی، ژاپنی و کره ای (CJK) را برای وب فعال می کند. در نمودار قبلی، می بینید که یک فونت CJK 15-20 برابر تعداد کاراکترهایی را پوشش می دهد که یک فونت کاراکتر لاتین انجام می دهد. این فونت‌ها معمولاً بسیار بزرگ هستند و بسیاری از کاراکترهای آن زبان‌ها به اندازه دیگران استفاده نمی‌شوند.

استفاده از CSS API و unicode-range می‌تواند انتقال فایل را تقریباً ۹۰٪ کاهش دهد. با استفاده از توصیفگر unicode-range ، می توانید هر بخش را به طور جداگانه تعریف کنید، و هر بخش فقط زمانی دانلود می شود که محتوای شما حاوی یکی از کاراکترهای این محدوده کاراکتر باشد.

مثال: اگر می‌خواهید فقط کلمه "こんにちは" را در Noto Sans JP تنظیم کنید، می‌توانید:

• فایل های WOFF2 خود را خود میزبانی کنید.
• از CSS API برای بازیابی WOFF2 استفاده کنید.
• از CSS API با پارامتر text= تنظیم شده روی "こんにちは" استفاده کنید.

در این مثال، می‌توانید ببینید که با استفاده از CSS API، به لطف پشتیبانی داخلی API برای جدا کردن فونت‌های بزرگ به محدوده یونیکد، در حال حاضر 97.5 درصد در زمان خود میزبانی فونت WOFF2 صرفه‌جویی کرده‌اید. با یک قدم جلوتر رفتن و مشخص کردن دقیقاً متنی که می‌خواهید نمایش دهید، می‌توانید اندازه فونت را تنها به 95.3٪ از فونت CSS API کاهش دهید - که 99.9٪ کوچکتر از فونت خود میزبان است.

Google Fonts CSS API به طور خودکار فونت ها را در کوچکترین و سازگارترین قالب پشتیبانی شده توسط مرورگر کاربر شما ارائه می کند. اگر کاربر شما از مرورگری با پشتیبانی WOFF2 استفاده می‌کند، API فونت‌ها را در WOFF2 عرضه می‌کند، اما اگر از مرورگر قدیمی‌تری استفاده می‌کند، API فونت‌ها را در قالبی ارائه می‌کند که توسط آن مرورگر پشتیبانی می‌شود. برای کاهش اندازه فایل برای هر کاربر، API همچنین داده‌ها را در مواقعی که نیازی به فونت‌ها نیست حذف می‌کند. به عنوان مثال، داده های اشاره برای کاربرانی که مرورگرهایشان به آن نیاز ندارند حذف می شود.

فونت های وب خود را با Google Fonts CSS API محافظت کنید

تیم Google Fonts همچنین به استانداردهای جدید W3C کمک می کند که به نوآوری فناوری های فونت وب مانند WOFF2 ادامه می دهد. یکی از پروژه‌های فعلی، انتقال افزاینده فونت است که به کاربران اجازه می‌دهد تا بخش‌های بسیار کوچکی از فایل‌های فونت را همانطور که روی صفحه استفاده می‌شوند بارگیری کنند و بقیه را در صورت درخواست پخش کنند، و از عملکرد محدوده یونیکد پیشی بگیرند. هنگامی که از API فونت های وب ما استفاده می کنید، کاربران شما هنگامی که در مرورگر خود در دسترس قرار می گیرند، این پیشرفت های فناوری انتقال فونت اساسی را دریافت می کنند.

این زیبایی یک API فونت است: کاربران شما از هر پیشرفت فناوری جدید بدون هیچ تغییری در وب سایت شما بهره مند می شوند. قالب جدید فونت وب؟ مشکلی نیست پشتیبانی از مرورگر یا سیستم عامل جدید؟ رسیدگی شده است بنابراین به جای اینکه درگیر نگهداری از فونت های وب خود باشید، آزاد هستید که روی کاربران و محتوای خود تمرکز کنید.

فونت های متغیر داخلی را پشتیبانی می کنند

فونت های متغیر فایل های فونتی هستند که می توانند طیف وسیعی از تنوع طراحی را در میان محورهای متعدد ذخیره کنند و نسخه جدید Google Fonts CSS API شامل پشتیبانی از آنها می شود. افزودن یک محور تغییرات اضافی، انعطاف‌پذیری جدیدی را با فونت ممکن می‌سازد – اما می‌تواند اندازه فایل فونت را تقریباً دو برابر کند.

هنگامی که در درخواست CSS API خود دقیق تر هستید، Google Fonts CSS API می تواند تنها بخشی از فونت متغیر مورد نیاز وب سایت شما را ارائه دهد تا حجم دانلود را برای کاربران کاهش دهد. این امکان استفاده از فونت های متغیر را برای وب بدون تحمل زمان بارگذاری طولانی صفحه فراهم می کند. شما می توانید این کار را با تعیین یک مقدار واحد در یک محور یا تعیین یک محدوده انجام دهید. حتی می توانید چندین محور و خانواده فونت های متعدد را در یک درخواست مشخص کنید. API برای رفع نیازهای شما انعطاف پذیر است.

پیاده سازی ساده، برای شما بهینه شده است

Google Fonts CSS API به شما کمک می کند فونت هایی را ارائه دهید که عبارتند از:

• سازگاری بیشتر با مرورگرهای وب
• تا حد امکان کوچک.
• به سرعت تحویل داده شد.
• استفاده برای شما راحت تر است.

برای اطلاعات بیشتر در مورد فونت های Google، به fonts.google.com مراجعه کنید. برای کسب اطلاعات بیشتر در مورد CSS API، اسناد API را مرور کنید.

سپاسگزاریها

تصویر قهرمان توسط leesehee .