این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

به روز رسانی CSS API

فونت های گوگل اکنون به طور کامل از فونت های متغیر در به روز رسانی API v2 پشتیبانی می کند. نحوه فراخوانی خانواده فونت های تکی و چندگانه و نحوه تعیین محدوده محورها را توضیح خواهیم داد. برای نگاهی عمیق به فونت های متغیر، با این بروشور مصور تعاملی از دیوید برلو در TypeNetwork بیشتر بیاموزید.

چه خبر است

همه چیز با یک URL پایه جدید شروع می شود:

https://fonts.googleapis.com/css2

نحو برای تعیین سبک ها در هر خانواده برای توصیف فونت متغیر "فضاهای طراحی" تغییر کرده است.

راهنماهای شروع سریع

این HTML را در یک فایل کپی و پیست کنید:

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
    <style>
      body {
        font-family: 'Crimson Pro', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

با استفاده از یک مرورگر برای باز کردن فایل، صفحه باید متن "Beautiful the Web" را با فونت Crimson Pro نمایش دهد.

ساخت وب زیبا!

خانواده های متعدد

برای درخواست چندین خانواده، پارامتر family= برای هر خانواده مشخص کنید.

به عنوان مثال، برای درخواست فونت های Crimson Pro و Literata :

https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata

این HTML را در یک فایل کپی و پیست کنید:

<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata">
    <style>
      body {
        font-size: 48px;
      }
      div:nth-child(1) {
        font-family: 'Crimson Pro', serif;
      }
      div:nth-child(2) {
        font-family: 'Literata’, serif;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

با استفاده از یک مرورگر برای باز کردن فایل، صفحه باید متن "Beautiful the Web" را ابتدا در Crimson Pro و سپس در Literata ارائه دهد.

ساخت وب زیبا!

محدوده های محور

فونت های متغیر دامنه های پیوسته ای از سبک ها را ارائه می دهند، اغلب بدون تأخیر اضافی. این مربوط به طراحی واکنشگرا است. این تایپوگرافی پویا از دامنه‌های پیوسته سبک‌ها استفاده می‌کند، همه وزن‌های بین 100 تا 900 را در یک صفحه ارائه می‌دهد، و وزن را بر اساس برخی شرایط به‌صورت واکنش‌گرا تغییر می‌دهد.

برای درخواست یک محدوده از یک محور قلم متغیر، 2 مقدار را با ..

قلم(ها)	درخواست کنید
Crimson Pro [ `wght 200-900` ]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900`
زرشکی پرو ایتالیک [ `wght 200-900` ]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900`
Crimson Pro Bold Italic & [ `wght 200-900` ]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700`

به نظر نمی رسد مرورگر شما از فونت های متغیر ( caniuse ) پشتیبانی کند. در مرورگری که از تغییرات فونت پشتیبانی می‌کند، متن زیر باید Crimson Pro را به‌عنوان مجموعه‌ای از وزن‌ها از 400 تا 500 نشان دهد. انیمیشن‌های CSS می‌توانند سبک متن را به راحتی تغییر دهند.

اگر مرورگر شما به‌طور کامل از فونت‌های متغیر ( caniuse ) پشتیبانی می‌کند، متن زیر باید Crimson Pro را به‌عنوان مجموعه‌ای از وزن‌ها از 400 تا 500 نشان دهد. انیمیشن‌های CSS می‌توانند سبک متن را به راحتی تغییر دهند.

ساخت وب زیبا!

سبک های فردی، مانند وزن

بدون مشخصات سبک، API سبک پیش‌فرض خانواده درخواستی را ارائه می‌کند. برای درخواست سایر سبک‌های فردی، مانند وزن‌های خاص، پس از نام خانواده فونت، یک دونقطه (:) اضافه کنید، به دنبال آن فهرستی از کلیدواژه‌های ویژگی محور به ترتیب حروف الفبا، علامت (@)، و یک یا چند فهرست از مقادیر برای آن ویژگی های محور.

این مثال ها این را در عمل نشان می دهد.

قلم(ها)	درخواست کنید
Crimson Pro (پیش‌فرض)	`https://fonts.googleapis.com/css2?family=Crimson+Pro`
Crimson Pro Bold	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700`
Crimson Pro Regular & Bold	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700`
Crimson Pro Bold & Bold Italic	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700`

فونت های گوگل تمام سبک های موجود برای هر خانواده فونت را فهرست می کند.

سبک پیش فرض

وقتی یک درخواست موقعیت یا محدوده ای را برای یک محور مشخص نمی کند، موقعیت پیش فرض استفاده می شود. موقعیت پیش فرض محور مورب 0 (عادی) و پیش فرض برای محور وزنی 400 (منظم) است.

برای خانواده‌هایی با محورهایی که دارای موقعیت پیش‌فرض نیستند، درخواست‌هایی که موقعیت‌هایی را برای آن محورها مشخص نمی‌کنند ناموفق خواهند بود. به عنوان مثال، هنگام درخواست خانواده با محور وزنی بین 500 تا 900، وضعیت وزن باید مشخص شود.

وزنه های غیر استاندارد

با فونت های ایستا، سبک های وزن معمولاً به صورت مضرب 100 مشخص می شوند (مثلاً 300، 400، 700). فونت های متغیر هم وزن استاندارد و هم وزن متوسط را ارائه می دهند. برای ارائه وزن میانی:

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450

به نظر نمی رسد مرورگر شما از فونت های متغیر ( caniuse ) پشتیبانی کند. در مرورگری که از تغییرات فونت پشتیبانی می کند، متن زیر باید Crimson Pro را در وزن های بصری متمایز 400، 450 و 500 ارائه کند.

اگر مرورگر شما به طور کامل از فونت های متغیر ( caniuse ) پشتیبانی می کند، متن زیر باید Crimson Pro را در وزن های بصری متمایز 400، 450 و 500 ارائه کند.

ساخت وب زیبا!

بهینه سازی برای تأخیر و اندازه فایل

در مورد سبک هایی که استفاده می کنید دقیق باشید. API سبک های درخواستی را در فشرده ترین مجموعه فونت ها ارائه می دهد. درخواست سبک های استفاده نشده ممکن است باعث شود کاربران شما بیشتر از نیاز خود داده های فونت را دانلود کنند و باعث تاخیر بیشتر شود. اگر فقط از 3 وزن خاص استفاده می کنید، آنها را در درخواست خود به عنوان سبک های فردی مشخص کنید. اگر از محدوده وزنی پیوسته استفاده می کنید، آن محدوده وزنی را در درخواست خود مشخص کنید.

از font-display استفاده کنید

ویژگی font-display به شما امکان می دهد تا زمانی که فونت هنوز در حال بارگیری است یا در دسترس نیست، چه اتفاقی می افتد. معمولاً تعیین مقداری غیر از auto پیش‌فرض مناسب است.

مقدار مورد نظر را در پارامتر display ارسال کنید:

https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap

بهینه سازی درخواست فونت شما

اغلب اوقات، زمانی که می خواهید از یک فونت وب در سایت یا برنامه خود استفاده کنید، از قبل می دانید به کدام حروف نیاز دارید. این اغلب زمانی اتفاق می افتد که از یک فونت وب در یک لوگو یا عنوان استفاده می کنید.

در این موارد، باید یک مقدار text= را در URL درخواست فونت خود مشخص کنید. این به فونت های گوگل امکان می دهد فایل فونتی را که برای درخواست شما بهینه شده است، برگرداند. در برخی موارد، این می تواند اندازه فایل فونت را تا 90٪ کاهش دهد.

برای استفاده از این ویژگی، کافی است text= به درخواست API خود اضافه کنید. به عنوان مثال، اگر فقط از Inconsolata برای عنوان وبلاگ خود استفاده می کنید، می توانید عنوان را به عنوان مقدار text= قرار دهید. این درخواست به این صورت است:

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello

مانند تمام رشته‌های پرس و جو، باید مقدار URL را رمزگذاری کنید:

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World

این ویژگی همچنین برای فونت های بین المللی کار می کند و به شما امکان می دهد کاراکترهای UTF-8 را مشخص کنید. مثلا ¡هولا! به صورت زیر نمایش داده می شود:

https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!

لطفاً توجه داشته باشید که پارامتر 'text=' فقط یک بار قابل تعیین است. برای همه خانواده های موجود در درخواست اعمال می شود. اگر به بهینه‌سازی متن متفاوت در چندین خانواده نیاز دارید، لطفاً از درخواست‌های API جداگانه استفاده کنید.

تشکیل URL های API

سختگیری

به عنوان یک نکته کلی، CSS API به روز شده در مورد درخواست هایی که پذیرفته می شوند سخت تر از CSS API اصلی است.

دستورالعمل های عمومی:

فهرست کردن محورها بر اساس حروف الفبا (محل محلی en-US )
گروه های ارزش محور (یعنی تاپل ها) باید به صورت عددی مرتب شوند
تاپل ها نمی توانند همپوشانی یا لمس کنند (به عنوان مثال wght 400..500 و 500..600)

مشخصات URL API

/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]

spec : <family_name>[:<axis_tag_list>@<axis_tuple_list>]

family_name : نام خانواده فونت

axis_tag_list : <axis>[,<axis>...] // Sorted alphabetically (en-US locale)

axis : یک برچسب محور، به عنوان مثال ital ، wdth ، wght

axis_tuple_list : <axis_tuple>[;<axis_tuple>...]

axis_tuple : <value>[,<value>...] // Same length as axis_tag_list

value : <range> | <float>

range : <float>..<float>

float : مقداری در محدوده محور مربوطه

text : متنی که در فونت درخواستی نمایش داده می شود

display : auto | block | swap | fallback | optional

پشتیبانی از مرورگر قدیمی

مرورگرهای بدون پشتیبانی از فونت متغیر ممکن است نتوانند طرح شما را آنطور که در نظر گرفته شده نشان دهند. پشتیبانی از فونت متغیر مرورگرها را در caniuse بررسی کنید.

با تمرین بهبود پیشرونده ، می‌توانید از رفتار غیرمنتظره در آن مرورگرهای قدیمی جلوگیری کنید. از پرس و جوهای @supports در CSS خود برای گیت کردن ویژگی های فونت متغیر استفاده کنید.

در این مثال، می‌خواهیم از وزن 450 متن مرکزی استفاده کنیم، اما وقتی ویژگی‌های فونت متغیر پشتیبانی نمی‌شوند، باید به حالت عادی (وزن 400) یا متوسط (وزن 500) برگردیم:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />

<style>
  * {
    font-family: 'Markazi Text';
    font-weight: 400;
  }

  @supports (font-variation-settings: "wght" 450) {
    * {
      font-family: 'Markazi Text';
      font-weight: 450;
    }
  }
</style>

درخواست CSS Markazi+Text:wght@450 وزن 450 را برای کلاینت هایی که فونت های متغیر را پشتیبانی می کنند و وزن های 400 و 500 را برای مشتریانی که پشتیبانی نمی کنند ارسال می کند. به طور کلی، موارد بازگشتی در محدوده درخواست شما در مرورگرهای قدیمی در دسترس خواهند بود.

محور	بازگشت به عقب
`ital`	0، 1
`wght`	100، 200، 300، 400، 500، 600، 700، 800، 900

این مثال‌ها نشان می‌دهند که چه سبک‌هایی در مرورگرهای قدیمی برای چند درخواست مختلف در دسترس هستند.

درخواست کنید	سبک های موجود در مرورگرهای قدیمی
`ital@0`	`ital@0`
`wght@500`	`wght@500`
`wght@432`	`wght@400;500`
`wght@440..560`	`wght@400;500;600`

فونت های متغیر موجود

جدولی از فونت های متغیر موجود در v2 API را می توانید در اینجا بیابید.

در ادامه مطلب

فهرست کاملی از خانواده فونت‌های ارائه شده توسط Google Fonts API در فونت‌های Google را مشاهده کنید.
در صفحه ملاحظات فنی درباره نحوه عملکرد Google Fonts API بیشتر بدانید.