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

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

۱. مقدمه

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

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

آنچه یاد خواهید گرفت

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

پیش‌نیازها

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

آشنایی با مقیاس‌های تایپوگرافی
آشنایی با فیگما
دانش پایه از HTML و CSS.

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

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

۲. شروع کنید

راه‌اندازی

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

ابتدا وارد فیگما شوید یا یک حساب کاربری ایجاد کنید .

کپی از انجمن فیگما

به فایل «انتقال به فونت‌های متغیر» بروید یا در انجمن فیگما عبارت «انتقال به فونت‌های متغیر» را جستجو کنید. برای کپی کردن فایل در فایل‌های خود، روی «تکرار» در گوشه بالا سمت راست کلیک کنید.

طرح بندی فایل

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

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

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

بررسی فونت متغیر

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

۳. فونت‌های متغیر چیستند؟

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

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

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

مزایا

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

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

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

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

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

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

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

۱b7fbf03fcbf16dc.gif

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

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

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

۵. استایل خود را ارتقا دهید

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

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

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

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

۶. اعمال شده به رابط کاربری

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

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

۷. پیاده‌سازی در کد

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

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

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

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

با رفتن به fonts.google.com ، فونت‌های متغیر موجود را بررسی کنید. در قسمت جستجو، گزینه‌ی «فقط فونت‌های متغیر را نشان بده» را برای فیلتر کردن انتخاب کنید. فونت‌های متغیر شامل یک بخش در نزدیکی پایین صفحه هستند که می‌توانید برای هر یک از محورهای موجود در خانواده، اسلایدرها را تنظیم کنید.

استایل با CSS

همه فونت‌ها تعداد محورهای قابل تنظیم یکسانی ندارند. در حال حاضر، وزن (Weight)، عرض (Width)، شیب (Slant)، کج (Italic) و اندازه نوری (Optical Size) رایج‌ترین‌ها هستند.

این موارد را می‌توان با ویژگی‌های اولیه فونت 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) در سبک فونت قابل اعتماد نیستند.

۸. وارد کردن با API فونت‌های گوگل

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

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

این کد حاوی رابط کاربری نمونه کارت را در 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 تنظیم کرده‌اید مطابقت داشته باشند و سپس این سبک را برای هر کدام انتخاب کنید تا به کشوی کناری اضافه شود.
در کشو، زیر سبک‌های انتخاب‌شده، به دنبال «استفاده در وب» باشید. دو راه برای اضافه کردن فونت به کد شما وجود دارد: از طریق <link> یا @import. شما فقط به یکی نیاز دارید، بیایید @import را انتخاب کنیم.
از ‎@import‎ تا نقطه‌ویرگول کپی کنید و آن را درون تگ‌های استایل بعد از کامنت import قرار دهید.
از آنجایی که Roboto Flex تنها فونت مورد استفاده است، با اضافه کردن «قوانین CSS برای مشخص کردن خانواده‌ها» که در زیر کد واردات قرار دارد، بدنه را طوری تنظیم کنید که font-family را فراخوانی کند.

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

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

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

۹. ویژگی‌های متغیر فونت در CSS

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

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

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

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

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

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

۱۰. تبریک

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

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

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