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

انتقال به فونت های متغیر

1. مقدمه

آخرین به روز رسانی: 05/11/22

تنوع پویا را در UI خود با فونت‌های متغیر بپذیرید، که به شما امکان پاسخگویی بیشتر در طرح‌بندی‌ها، تم‌ها و دسترسی را می‌دهد و در عین حال برنامه‌های شما را سریع‌تر می‌کند!

چیزی که یاد خواهید گرفت

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

پیش نیازها

برای این آزمایشگاه ما بر روی برخی از مفاهیم اساسی طراحی بنا خواهیم کرد.

آشنایی با مقیاس های نوع
آشنایی با Figma
دانش اولیه HTML و CSS.

آنچه شما نیاز دارید

حساب فیگما
فایل Figma designlab
ویرایشگر کد انتخابی برای وب

2. شروع کنید

راه اندازی

برای شروع باید به فایل Designlab Figma دسترسی داشته باشید. هر آنچه برای آزمایشگاه نیاز دارید در فایل Figma موجود است. می توانید فایل را دانلود و وارد کنید یا آن را از انجمن Figma کپی کنید.

ابتدا وارد Figma شوید یا یک حساب کاربری ایجاد کنید .

کپی از انجمن Figma

به فایل انتقال به فونت های متغیر بروید یا در انجمن Figma، عبارت Migrating to Variable fonts را جستجو کنید. روی Duplicate در گوشه سمت راست بالا کلیک کنید تا فایل را در فایل های خود کپی کنید.

طرح بندی فایل

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

این نرم افزار کد شما را از طریق آن مفاهیم و تمرین ها با جزئیات بیشتر راهنمایی می کند. برای کسب اطلاعات بیشتر در مورد ویژگی‌های جدید Material You، همراه با Codelab بخوانید.

با شروع از تابلوی هنری Intro ، دکمه‌هایی وجود دارند که تابلوهای هنری را به ترتیب به یکدیگر متصل می‌کنند. برای دسترسی به لینک، روی دکمه کلیک کنید.

فونت متغیر را بررسی کنید

قبل از شروع، باید مطمئن شویم که یک فونت متغیر داریم! این فایل از Roboto Flex استفاده می‌کند که از قبل در Figma موجود است، یا می‌توانید آن را از fonts.google.com دانلود کنید.

3. فونت های متغیر چیست؟

فونت های متغیر یک فرمت فونت نوآورانه جدید است که به کاربران اجازه می دهد تا بر نوع و نمادهای خود کنترل داشته باشند. Roboto Serif و Roboto Flex حروف‌های جدیدی هستند که برای فناوری فونت‌های متغیر تازه ساخته شده‌اند و هر کدام دارای طیف وسیعی از محورها هستند.

بیان زیبایی شناختی و محورها

طراحان دیگر محدود به سبک‌های مجموعه سخت قدیمی‌تر نیستند، مانند منظم، پررنگ، مورب، و غیره. متغیرهای درون فونت‌های متغیر توسط محورها یا نمونه‌ها کنترل می‌شوند. اگر طراح نوع انتخاب کند، هر متغیری در طراحی نوع می تواند به یک محور قابل کنترل توسط کاربر اختصاص داده شود. محورهای رایج عبارتند از: مورب، اندازه نوری، مایل، وزن، عرض. این پنج محور، محورهای ثبت شده در CSS هستند.

مزایا

فونت‌های متغیر به شما امکان می‌دهند چندین سبک را در یک فایل فونت ارائه دهید، وب‌سایت‌ها را پایدارتر، کوچک‌تر و سریع‌تر می‌کند و به طراح کنترل واضح‌تری می‌دهد.

4. از فونت های متغیر در طراحی استفاده کنید

تغییر محورها

بیایید تمام پارامترها (یا محورهای) موجود و تأثیر آنها را مرور کنیم. نوع سمت راست را انتخاب کنید و نوع Type Details modal (نماد بیشتر) را باز کنید تا نوار لغزنده محورها باز شود و هر پارامتر را مرور کنید.

وزن ضخامت یک حرف را مشخص می کند. این یک محدوده کامل و پیوسته از ضخامت ضربه را فراهم می کند.

عرض نتیجه این است که چقدر فضای افقی توسط کاراکترهای یک تایپ فیس اشغال شده است.

استایل را از حالت عمودی به مایل تنظیم کنید که برای تایپوگرام‌ها به عنوان سبک «میب» نیز شناخته می‌شود. اگرچه نادر است، اما Slant می تواند در جهت دیگری کار کند، که به آن سبک "میل به پشت" یا "میل معکوس" می گویند.

درجه یک اصلاح کننده ثانویه وزن نوری یک تایپ است و مستقل از محور Weight است. وزن و درجه هر دو بر ضخامت یک حرف تأثیر می‌گذارند، اما تنظیمات با Grade بسیار دقیق‌تر هستند.

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

برای بازی با محورهای فونت متغیر خارج از Figma ، نسخه آزمایشی Variable Fonts را بررسی کنید.

5. سبک خود را افزایش دهید

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

در حالی که یک مقیاس نوع می‌تواند از بیش از یک خانواده فونت تشکیل شده باشد، در اینجا ما فقط از یکی برای سفارشی کردن یک نسخه فشرده از مقیاس نوع پیش‌فرض Material استفاده می‌کنیم.

بیایید سفارشی کردن مقیاس نوع را با کپی بدنه شروع کنیم. این به ما امکان می دهد ابتدا اندازه نوع پایه سایت را تنظیم کنیم و از آنجا به صورت نوری تنظیم کنیم. پیش فرض برای Body Large 18pt است ، انتخاب شده و روی Roboto Flex تنظیم شده است. تنظیم برای خوانایی بیشتر به معنای به روز رسانی اندازه و وزن قلم بود که به معنای فایل فونت دیگری بود، اما اکنون می توانیم برخی از محورها را به خوبی تنظیم کنیم. اندازه، درجه و وزن نوری را تنظیم کنید.
با Label ادامه دهید. برچسب‌ها سودمندتر هستند و در زمینه‌های کوچک‌تر مانند دکمه‌ها استفاده می‌شوند. درجه را به صورت اپتیکال تنظیم کنید تا برچسب به درستی روی ظروف دکمه و تراشه ها ظاهر شود.
با عنوان ، عنوان ، و نمایش به پالایش ادامه دهید. هر سه برای متون کوتاه‌تر با تاکید متوسط تا زیاد، مانند عناوین صفحه و بخش‌ها استفاده می‌شوند. عنوان و صفحه نمایش به دلیل اندازه و تاکید زیاد می توانند گویاتر باشند. با خیال راحت با تمام محورهای اینجا بازی کنید!
با انتخاب نوع، روی 4 نقطه کلیک کنید و (+) را اضافه کنید تا یک سبک متن تنظیم شود، که تنظیمات نوع قابل استفاده مجدد را تضمین می کند.

می‌توانید مقیاس پیش‌فرض نوع Material را به‌عنوان سبک‌های Figma با سازنده تم مواد یا با کپی کردن کیت طراحی M3 ایجاد کنید.

6. برای UI اعمال می شود

با تنظیم یک مقیاس نوع، اجازه دهید آن را به عناصر UI اعمال کنیم تا در کد پیاده سازی شوند! در نظر بگیرید که چگونه می توان از فونت های متغیر برای افزودن بیان و خوانایی بیشتر استفاده کرد. اگر استایل های Figma را در آخرین تمرین تنظیم کنید، می توان آنها را اعمال کرد، سپس محورهای سبک را به روز کنید.

به عناصر UI در سمت چپ نگاهی بیندازید. کارت اول حاوی نوع گیاه، توضیحات و برخی برچسب‌های دسته‌بندی است، در حالی که بقیه کارت‌ها دستورالعمل‌های مراقبت از گیاه را شرح می‌دهند. نوع گیاه به عنوان یک نقش با تاکید بالا منطقی است، بنابراین از سبک "تیتر" ما استفاده کنید. آن را روی چیزی که قبلاً به عنوان سرفصل تنظیم کرده بودیم تنظیم کنید. کارت‌های مراقبت نیز دارای عنوان هستند، اما تاکید یکسانی ندارند، بنابراین آنها را به عنوان "عنوان" تنظیم کنید.
جزئیات گیاه و نسخه دستورالعمل را می توان به "جسم بزرگ" اختصاص داد، در حالی که برچسب دسته به "برچسب بزرگ".
نقش های مختلف را آزمایش کنید و عناصر رابط کاربری و مقیاس نوع خود را تنظیم کنید تا تعادل مناسب را پیدا کنید.

7. در کد پیاده سازی کنید

پیاده‌سازی فونت‌های متغیر در کد با CSS روشی مشابه هر فونت وب با استفاده از سرویس تحویل فونت برای بارگذاری در فونت و سفارشی‌سازی با ویژگی‌های CSS است.

ما از HTML و CSS اولیه برای پیاده سازی استفاده خواهیم کرد و نه از MWC یا هر چارچوبی.

فونت های متغیر در فونت های گوگل

از فونت‌های Google به‌عنوان سرویس تحویل فونت خود برای راهی آسان برای پیاده‌سازی تعداد زیادی فونت، از جمله فونت‌های متغیر، در وب‌سایت خود استفاده کنید!

با پیمایش به fonts.google.com، فونت های متغیری را کاوش کنید. در قسمت جستجو، گزینه Show only variable fonts to filter را علامت بزنید. فونت های متغیر شامل یک زمین بازی در نزدیکی پایین صفحه است که در آن می توانید لغزنده هایی را برای هر یک از محورهای موجود در خانواده تنظیم کنید.

با CSS استایل کنید

همه فونت‌ها دارای تعداد یکسان محور برای سفارشی کردن نیستند. در حال حاضر وزن، عرض، شیب، کج و اندازه نوری رایج ترین هستند.

اینها را می توان با ویژگی های اصلی فونت CSS که قبل از فونت های متغیر وجود داشت تنظیم کرد. اگرچه همه چیز هنوز به طور گسترده پشتیبانی نمی شود (از می 2022)، همه محورها را می توان به طور قابل اعتماد با استفاده از ویژگی جدید font-variation-settings تنظیم کرد.

`Axes`	`Abbreviation`	`CSS property`
`Weight`	`wght`	`font-weight`
`Width`	`wdth`	`font-stretch`
`Slant`	`slnt`	`font-style*`
`Italic`	`ital`	`font-style*`
`Optical Size`	`opsz`	`font-optical-sizing`

* مایل (slnt) و ایتالیک (ital) در سبک فونت قابل اعتماد نیستند.

8. با Google Fonts API وارد کنید

ما فقط از Roboto استفاده کرده‌ایم، اما به تمام فونت‌های موجود در fonts.google.com نگاه کنید.

برای بقیه قسمت‌های کد لبه به Roboto می‌مانیم و نوع را در کارت‌های زیر بر اساس تمرین قبلی‌مان سفارشی می‌کنیم.

این کد حاوی UI نمونه کارت را در وب IDE انتخابی خود کپی کنید.

<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */


/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {   
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>

مشخصات سبکی را که در آخرین تمرین برای عنوان ، عنوان ، بدنه و برچسب تنظیم کردیم، یادداشت کنید. با در نظر گرفتن این موارد، به صفحه Roboto Flex بروید. لغزنده ها را مطابق با مشخصاتی که در Figma تنظیم کرده اید تنظیم کنید و سپس این سبک را برای هر کدام انتخاب کنید تا به کشوی کناری اضافه شود.
در کشو، در زیر سبک های انتخاب شده، به دنبال Use on the Web باشید. دو راه برای اضافه کردن فونت به کدتان وجود دارد: با <link> یا @import. شما فقط به یکی نیاز دارید، بیایید @import را انتخاب کنیم.
از @import به نقطه ویرگول کپی کنید و آن را در تگ های سبک بعد از کامنت import قرار دهید.
از آنجایی که Roboto Flex تنها فونت مورد استفاده است، بدنه را تنظیم کنید تا با افزودن «قوانین CSS برای تعیین خانواده‌ها» که در کد واردات گنجانده شده است، خانواده فونت را فراخوانی کند.

body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

که فونت و مجموعه سبک‌های انتخاب شده را وارد می‌کند، اما استفاده از محدوده‌های Axis به شما امکان می‌دهد از محدوده پیوسته سبک‌ها به جای سبک‌های فردی استفاده کنید. برای ایجاد یک محدوده، دو مقدار را با .. به هم وصل کنید (مثلا 100..900). مطمئن شوید که فقط محدوده‌هایی را اضافه می‌کنید که در لغزنده‌های فونت وجود دارد، در غیر این صورت به درستی بارگیری نمی‌شود.

این به بهترین وجه برای انتقال صاف انیمیشن و آزمایش در مرورگر استفاده می شود، زیرا در محدوده کامل بارگیری می شود و درخواست دانلود را بزرگتر می کند.

9. خواص فونت متغیر CSS

با وارد کردن فونت شما، اجازه دهید به Figma برگردیم تا برخی از ویژگی‌های CSS را برای استایل‌سازی درآوریم و نگاهی به ویژگی font-variation-settings CSS بیندازیم.

با شروع با انتخاب h1 سرفصل ها در پانل سمت راست، برگه Inspect را در بالا انتخاب کنید. این پانل را به حالت بازرسی کد برای انتقال برنامه‌نویس تغییر می‌دهد. کد آخرین بخش است.
اگر قبلاً این کار را نکرده‌اید، قالب را به CSS تغییر دهید. ویژگی‌های استاندارد، در صورت استفاده، فهرست می‌شوند ( font-weight, font-stretch, font-style, font-optical-sizing ) و به دنبال آن font-variation-settings سطح پایین که حاوی محورهای سفارشی ثبت نشده هستند، فهرست می‌شوند. قبل از اینکه به font-variation-settings بروید، ابتدا از ویژگی های استاندارد استفاده کنید.

Figma از font-variation-settings برای عرض (wdth) به جای font-stretch استفاده می کند.

این کد CSS مربوط به نوع را برای استایل انتخابگر h1 ما کپی کنید.

h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}

سبک عنوان کارت مراقبت را می توان در h2 کپی کرد. همین کار را برای کپی بدنه، کپی کردن در p انجام دهید. سبک های برچسب را می توان در .label کپی کرد

10. تبریک می گویم

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

اگر سؤالی دارید، در هر زمان با استفاده از @MaterialDesign در توییتر از ما بپرسید.

منتظر مطالب و آموزش های طراحی بیشتر در youtube.com/MaterialDesign باشید