تصویر نویسنده

۱۳ مرداد ۱۳۹۹

0

فونت های متغیر در مقایسه با فونت های ثابت و سازگاری با مرورگر

مقاله

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

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

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

فونت های متغیر بخشی از مشخصات “OpenType” است که در ابتدا به عنوان یک پروژه مشترک بین ۴ غول اصلی – Apple ، Microsoft Adobe و Google ساخته شده است. مفهوم اصلی فونت های متغیر استفاده از تغییرات نامحدود در سبک فونت از یک نوع خاص با تکیه بر فقط یک فایل فونت است.

این امر به یک توسعه دهنده اجازه می دهد تا با تغییر یا متحرک کردن سبک فونت بر اساس نمای دستگاه، نوع دستگاه، جهتگیری دستگاه، رویدادهای ماوس و غیره از پتانسیل RWD (responsive web design) به طور کامل استفاده کند.

در مقابل فونت ثابت استاندارد نیازمند فایل های فونت جداگانه برای هر سبک فونت می باشد که منجر به کارایی وحشتناک سایت می شود. در این مقاله ، ما با استفاده از قدرت سازگاری مرورگر ابزار ابری Lambdatest Cross، مزایای فونتهای متغیر نسبت به فونت های ثابت، نحوه استفاده از آنها در صفحات وب و چگونگی اضافه کردن فونت های ثابت جایگزین برای مرورگرهای پشتیبانی نشده را بررسی خواهیم کرد.

مشکلات فونت های ثابت سنتی

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

مثلا برای  پروژه وب بعدی خودتان، باید دو نوع فونت ثابت را انتخاب کنید – “Roboto” برای سرفصل ها و “Open sans” برای متن های پاراگراف. شما در واقع در حال انتخاب یک “خانواده فونت” هستید. یک خانواده فونت، به نوبه خود ، شامل “سبک های مختلف فونت” است – تغییرات بر اساس وزن و italic های مختلف فونت هستند.

در مورد مثال ما، فرض کنید شما به فونت های زیر نیاز دارید:

  • ‘light 300’
  • ‘regular 400’
  • ‘semi bold 600’
  • ‘bold 700’
  • ‘regular 400 italic’

برای هر نوع فونت باید فایل های جداگانه بارگیری کنید (یا از لینک گوگل فونتز استفاده کنید)، برای هر دو نوع فونت – “Roboto” و “Open Sans”. همانطور که در تصویر زیر مشاهده می کنید، گوگل فونتز یک هشدار را نشان می دهند ، که نشانگر زمان لود زیاد برای نیازهای مورد آزمایش ما است.

این به نوبه خود اثر منفی بر عملکرد وب سایت شما خواهد گذاشت. نشانگر زمان لود همچنان از سرعت سریع تا متوسط کاهش می یابد، زیرا در ادامه سبک های مختلف فونت را اضافه می کنیم. زمان لود آهسته تر می تواند موجب رتبه پایین در Google SERPs (صفحات نتیجه موتور جستجو) شود.

اگرچه “Roboto Medium” و “Roboto Bold” بسیار مشابه هستند و به یک خانواده فونت تعلق دارند، اما هرکدام از آنها فایل فونت مستقل خود را دارند.

زمان لود آهسته

به عنوان مثال در مورد “Roboto” و “Open Sans”، شما به ۲۲ فایل با اندازه تقریبی ۳mb نیاز خواهید داشت! این فایل های فونت توسط مرورگر هر بازدید کننده در وب سایت شما بارگیری می شود تا متن را با فونت مورد نظر به نمایش درآورد.

این باعث افزایش زمان بارگذاری وب سایت می شود و باعث می شود تجربه کاربری ناامید کننده ای برای هر بازدید کننده، خصوصاً با اینترنت ضعیفتر حاصل  شود.

فایلهای فونت استاتیک
فایلهای فونت استاتیک

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

سرعت بارگذاری یک وب سایت احتمالاً بزرگترین عامل عملکرد برای SEO (بهینه سازی موتور جستجو) و تجربه کاربری است. بنابراین، توسعه دهندگان در تلاش برای بهینه سازی وب سایت های خود به این نتیجه می رسند که ظاهر بصری را به نفع عملکرد بهتر فدا کنند و معمولاً خود را به تعداد کمی از فونت ها محدود می کنند، زیرا هر فایل فونت اضافی، باری بر دوش کارایی صفحه است.

قلم های ثابت سنتی دارای انعطاف پذیری صفر هستند و محدود به تعداد محدودی از فونت های ثابت مانند ‘light’, ‘regular’, ‘regular-italic’, ‘semi-bold’, ‘bold’, ‘extra-bold هستند.

به عنوان مثال ، خانواده قلم ‘open sans’ در مقایسه با ” Roboto ” که ۱۲ تا سبک دارد فقط ۱۰ سبک دارد. برخی از خانواده های فونت مانند “Lobster” و “Abril Fatface” فقط یک سبک فونت واحد دارند.

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

فونت متغیر چیست؟

یک فونت متغیر شامل یک نوع سبک حروف کلی که معمولاً به عنوان خانواده فونت در یک فایل فونت منفرد شناخته می شود به جای داشتن فایل های فونت جداگانه برای هر نوع تغییر در نوع فونت می باشد.

با کمک @font-face در CSS و قوانین استایل دهی، هزاران وزن های فونت، عرض و سبک متفاوت می توانند ایجاد شوند. علاوه بر این، بر خلاف فونت های استاتیک، فونت های متغیر از CSS و ویژگی های انیمیشن و جابه جایی آن پشتیبانی می کنند که به دستیابی به انیمیشن های تغییر روان و یک دست بین سبک های مختلف فونت کمک می کنند.

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

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

باید توجه داشته باشید که اگرچه اندازه یک فونت متغیر نسبت به فایل فونت ثابت سنتی کمی بزرگتر است، در کل یک فونت متغیر کارایی بسیار بهتری را ارائه می دهد. با توجه به اینكه به طور متوسط، برای هر خانواده فونت حداقل به ۴ تا ۵ نوع سبک فونت احتیاج دارید، اندازه فایل یک فونت متغیر از اندازه ترکیبی ۴-۵ فایل فونت ثابت بطور قابل توجهی کوچکتر است.

تا آنجا که به تاریخچه فونت های متغیر و چگونگی به وجود آمدن آن ها مربوط می شود، این ویژگی بخشی از مشخصات فرمت فونت ‘OpenType’ نسخه ۱.۸ است که در سال ۲۰۱۶ با همکاری یکی از بزرگترین غول های طراحی و فضای وب منتشر شد. – Microsoft, Apple Google, وAdobe. فرمت OpenType، افزونه فرمت TrueType است، بنابراین پسوند “.otf” یا “.ttf” دارد.

فونت های متغیر چگونه کار می کنند؟

مفهوم اصلی فونتهای متغیر مفهوم “محورهای تغییرات (Axes of Variations) ” است. این محورها تمام جنبه های سبک فونت را کنترل می کنند – حروف فونت چقدر پررنگ یا روشن هستند، حروف چقدر گسترده یا باریک هستند یا اینکه حروف بصورت italic هستند یا خیر. مشخصات فونت OpenType دو نوع محور تغییرات را تعریف می کند:

  • محورهای تغییر استاندارد (Standard Axes of variation)
  • محورهای تغییر سفارشی (Custom Axes of Variation)

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

مشخصات OpenType پنج محور تغییرات را تعریف می کند، هر کدام با یک برچسب ۴ کارکتری که شامل حروف کوچک است نشان داده می شوند:

  • محور وزن “wgth”: متغیر وزن فونت را کنترل می کند. مقدار می تواند از ۱ تا ۹۹۹ متغیر باشد. مقدار با استفاده از ویژگی وزن فونت CSS کنترل می شود.
  • محور عرض “wdth”: متغیر عرض فونت را کنترل می کند. مقدار به صورت درصد است و میتواند از ۰٪ تا ۱۰۰٪ (یا بالاتر) باشد. مقادیر بالاتر مانند ۱۲۰٪ یا ۱۵۰٪ به بالاترین مقدار مجاز مطابق با فونت تنظیم می شوند. این مقدار با استفاده از ویژگی کشش قلم CSS کنترل می شود.
  • محور شیب “slnt”: متغیر شیب فونت را کنترل می کند. مقدار در درجه است و می تواند از منفی ۹۰ تا ۹۰ درجه باشد. به طور پیش فرض روی ۲۰ درجه تنظیم شده است. مقدار با استفاده از ویژگی سبک فونت CSS کنترل می شود.
  • محور Italicها “ital”: این قضیه را کنترل می کند که آیا قلم متغیر بصورت Italic است یا خیر. این مقدار با استفاده از ویژگی سبک فونت CSS کنترل می شود. به منظور جلوگیری از سردرگمی با محور slnt ، تنظیم کنید که font-synthesis: none;
  • محور اندازه بصری “opsz” : متغیر اندازه بصری فونت را کنترل می کند. این مقدار با استفاده از ویژگی اندازه بصری فونت CSS که تنظیم شده به “auto” یا “none” کنترل می شود. اگر می خواهید ضخامت کلی حروف را بر اساس اندازه کلی فونت افزایش یا کاهش دهید، اندازه بصری به درد میخورد.

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

محورهای تغییر سفارشی

OpenType Spec به شما امکان می دهد بسیاری از محورهای تغییر را به صورت دلخواه تعریف کنید. یک تفاوت اساسی که باید بخاطر بسپارید این است که بر خلاف محورهای استاندارد تغییرات که با استفاده از ۴ کارکتر از حروف کوچک تعریف می شوند، محور های تغییرات سفارشی با استفاده از حروف بزرگ تعریف می شوند.

به عنوان مثال ، یک فونت متغیر به نام “Decovar” دارای محور های تغییرات سفارشی است:

  • SKLA: Inline Skeleton
  • BLDA: Inline
  • TRMA: Rounded
  • SKLD: Stripes

همانطور که در بالا بحث شد دو روش برای تعیین مقادیر محورهای تغییرات برای اجرای فونت های متغیر در اختیار شما قرار دارد:

  • با استفاده از خصوصیات CSS مرتبط با هر محور: وزن فونت، کشش فونت، سبک فونت و ویژگی های اندازه بصری فونت.
heading {
  font-weight: 650;
  font-style: oblique 80deg;
  font-stretch: 75%;
  font-optical-sizing: auto;
}
  • با استفاده از ویژگی “تنظیمات تغییر فونت”

راه دوم برای تعریف محورهای تغییر فونت برای اجرای فونت های متغیر، استفاده از یک ویژگی جدید به نام “تنظیمات تغییر فونت” است که اخیراً توسط W3C به عنوان بخشی از CSS Font Modeule سطح ۴ معرفی شده است.

Syntax ویژگی جدید:

font-variation-settings:‘wgth’ <value>, ‘wdth’ <value>, ‘ital’ <value>, ‘slnt’ <value>, ‘opsz’ <value>, ‘PROP’ <value>,…… ;

مثالی در زیر آورده شده است:

.heading {
/*
  font-weight: 650;
  font-style: oblique 80deg;
  font-stretch: 65%;
  font-optical-sizing: auto;
*/
  font-variation-settings: "wght" 650, “slnt” ۸۰, "wdth" 65, "opsz" 70;
}

توجه: محورهای تغییرات استاندارد/ثبت شده را می توان با استفاده از هر دو روش تعریف کرد در حالیکه محور تغییرات سفارشی فقط با استفاده از روش دوم تنظیم می شود.

تفاوت بین دو روش:

مقادیر اندازه بصری فونت “auto” یا “none” است. این ویژگی فقط برای خاموش یا روشن کردن اندازه بصری قابل استفاده است. اما اگر از روش دوم استفاده می کنید (تنظیمات تغییر فونت)، می توانید یک مقدار عددی اضافه کنید. مثلا:

font-optical-sizing: auto;
font-variation-settings: "opsz" 70;

هنگام استفاده از “تنظیمات تغییر فونت” ، نیازی به افزودن نماد ٪ موقع تنظیم مقدار “کشش فونت” ندارید. مثلا:

font-stretch: 65%;
font-variation-settings: "wdth" 65;

مقدار برای italic های سبک فونت “none” یا “italic” است. اما اگر از ویژگی “تنظیمات تغییر قلم” استفاده می کنید ، مقدار می تواند “۰” یا “۱” باشد. مثلا:

font-style: italic;
font-variation-settings: "ital" 1;

در هنگام استفاده از “تنظیمات تغییر فونت” ، نیازی به افزودن نماد درجه ندارید. مثلا:

font-style: oblique 80deg;
font-variation-settings: "slnt" 80;

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

پشتیبانی از سازگاری با مرورگرها برای قلم های متغیر

جدول سازگاری فونتهای متغیر
جدول سازگاری فونت های متغیر با مرورگرها

در ژوئن ۲۰۱۹، قلم های متغیر توسط ۸۴.۱۷٪ مرورگرهای کاربران در سراسر جهان پشتیبانی می شوند. نسخه های کنونی همه مرورگرهای اصلی پشتیبانی کاملی از این ویژگی می کنند، با این استثنا که تنها اینترنت اکسپلورر بسیار بد است، هر چند بخاطر پشتیبانی ضعیف مرورگراش مشهور است.

در میان مرورگرهای دسکتاپMicrosoft edge 17+ ، Google Chrome 66+)  Firefox 62+ ، Safari 11+ ، Opera 53+) و در بین مرورگرهای تلفن همراه (Chrome 74 ، Firefox 66 ، iOS Safari 11+ و مرورگر اندروید ۶۷) پشتیبانی از فونت های متغیر را ارائه می دهند. هیچ polyfill و یا راهکار دیگری برای ارائه سازگاری مرورگرها برای فونت های متغیر وجود ندارد.

اگر بازدید کنندگان وب سایت شما هنوز از IE یا نسخه های مرورگر قدیمی استفاده می کنند، ممکن است فونت های متغیر مناسب شما نباشند. با این حال، با استفاده از @supports در CSS، می توانید راهکار های مختلفی را برای مرورگرهای پشتیبانی نشده ارائه دهید تا از یک تجربه یکنواخت تا حدی اطمینان حاصل شود.

LambdaTest چگونه می تواند در ارزیابی مرورگر کمک کند؟

LambdaTest ابزاری ابری برای ارزیابی مرورگر است که شامل ۲۰۰۰+ مرورگر و نسخه مرورگر می شود تا به شما نشان دهد وب سایتتان در مرورگرهای مختلف دسکتاپ و موبایل چگونه عمل می کند. این ابزار خدمات بیشماری برای آزمایش برنامه های وب ارائه می دهد:

  • تست واکنشگرایی وب سایت
  • تست خودکار bulk screenshot در مرورگرهای مختلف
  • تست تطابق بصری برای مقایسه پیکسل به پیکسل
  • گرید سلنیوم برای کمک به شما در انجام تست خودکار مرورگر
  • تجربه ارزیابی مرورگر زنده و متقابل با استفاده از ماشین های مجازی در حال اجرا روی ابر. این سرویس “ارزیابی Real-time” نامیده می شود.می توانم از این سرویس ارائه شده توسط LambdaTest برای تعامل با مرورگرهای مختلف در زمان واقعی برای تأیید سازگاری مرورگر فونت های متغیر استفاده کنیم.

با توجه به این ها، بیایید دوباره به اجرای انیمیشن با استفاده از فونت های متغیر برگردیم.

فونت های متغیر را با استفاده از font-face ترکیب کنید

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

@font-face {
  font-family: "amstelvar";
  src: url("/fonts/amstelvar.ttf") format("truetype-variations");
 /* Define value range for each variation axis */
  font-weight: 1 999;
  font-stretch: 0% 100%;
  font-optical-sizing: 0 100;
}

توجه داشته باشید که فونت های ثابت استاندارد دارای قالب های “truetype” یا “woff”/”woff2” هستند. به منظور تمایز فونت های ثابت و فونت های متغیر، فرمت فونت را روی “truetype-variations” یا “woff2-variations” تنظیم کنید، به مرورگر نشان دهید که این یک فونت متغیر است. اکثر فونت های متغیر دارای فرمت ttf هستند. با این وجود ، برای عملکرد بهتر و اندازه های کوچکتر، توصیه می شود از قالب های woff یا woff2 استفاده کنید.

می توانید فونت های خود را با استفاده از ابزار command line گوگل تبدیل کنید. در زیر یک کد نمونه برای درج یک فونت متغیر به نام “Amstelvar” آورده شده است. می توانید مقادیر وزن “wgth”، عرض “wdth” و محور اندازه بصری “opsz” را با استفاده از ویژگی های محور CSS یا با استفاده از تنظیمات تغییرات فونت تغییر دهید

@font-face {
   font-family: 'amstelvar';
   src: url('/Amstelvar-Roman-VF.ttf') format("truetype-variations");
   font-weight: 1 999;
   font-stretch: 0% 100%;
   font-optical-sizing: 0 100;
}
.heading-1 {
   font-size: 70px;
   font-family: 'amstelvar';
   /* Using CSS properties */
   font-weight: 850;
   font-stretch: 90%;
   font-optical-sizing: auto;
   /* Using font-variation-settings property */
   font-variation-settings: "wght"850, "wdth"90, "opsz"90;
}
.heading-2 {
   font-size: 50px;
   font-family: 'amstelvar';
   /* Using CSS properties */
   font-weight: 100;
   font-stretch: 20%;
   font-optical-sizing: auto;
   /* Using font-variation-settings property */
   font-variation-settings: "wght"100, "wdth"20, "opsz"30;
}
.heading-3 {
   font-size: 40px;
   font-family: 'amstelvar';
   /* Using CSS properties */
   font-weight: 500;
   font-stretch: 70%;
   font-optical-sizing: none;
   /* Using font-variation-settings property */
   font-variation-settings: "wght"500, "wdth"70, "opsz" 0;
}

فونت های متغیر متحرک

از فونت های متغیر می توان برای ایجاد انیمیشن های فونت خلاقانه استفاده کرد. برای رسیدن به این منظور دو روش وجود دارد:

  1. ویژگی انتقال CSS (CSS transition property)
  2. قانون انیمیشن CSS @keyframes (CSS @keyframes animation rule)

همانطور که قبلاً گفته شد، هر دو مورد را با استفاده از LambdaTest، بر روی مرورگرهای مختلف نشان خواهیم داد.

متحرک کردن فونت های متغیر با استفاده از ویژگی انتقال

ویژگی انتقال CSS در مواردی که انیمیشن فونت به رویدادی مانند کلیک ماوس یا حرکت موس وصل شود، قابل استفاده است. قطعه کد زیر نمونه ای از چگونگی تحریک فونت متغیر “Amstelvar” با استفاده از خاصیت انتقال CSS هنگامی که نشانگر موس روی آن قرار گرفته است، می باشد. وقتی کلاس متن “‘heading-3” نشان داده شد، مقدار محور وزن “wgth” از ۳۰۰ به ۹۹۹ تغییر می یابد ، مقدار محور عرض “wdth” از ۴۰٪ به ۷۰٪ تغییر می کند و مقدار محور اندازه بصری  “opsz” از ۰ به ۷۰ تغییر یافته است.

@font-face {
   font-family: 'amstelvar';
   src: url('/Amstelvar-Roman-VF.ttf') format("truetype-variations");
   font-weight: 1 999;
   font-stretch: 0% 100%;
   font-optical-sizing: 0 100;
}
.heading-1 {
   font-size: 70px;
   font-family: 'amstelvar';
   font-variation-settings: "wght"850, "wdth"90, "opsz"90;
}
.heading-2 {
   font-size: 50px;
   font-family: 'amstelvar';
   font-variation-settings: "wght"100, "wdth"20, "opsz"30;
}

.heading-3 {
   font-size: 40px;
   font-family: 'amstelvar';
   font-variation-settings: "wght"300, "wdth"40, "opsz"0;
   transition: font-variation-settings 2s ease;
}
.heading-3:hover{
   font-variation-settings: "wght"999, "wdth"70, "opsz"70;
}

اکنون، بگذارید تست مرورگر را انجام دهیم تا تفاوت رندر بین Opera وIE 11 را ارزیابی کنیم. توجه داشته باشید که فونت های متغیر در نسخه دسکتاپ مرورگر Opera پشتیبانی می شوند اما در Opera mini که مخصوص موبایل است، پشتیبانی نمی شوند. در زیر مقایسه تفاوت سازگاری مرورگر دسکتاپ Opera و IE11 با استفاده از LambdaTest را نشان دادیم.

اول آن را در مرورگر Opera ورژن ۶۱ دسکتاپ آزمایش کردیم:

تست انیمیشن روی مرورگر اپرا

سپس نگاهی به آن در اینترنت اکسپلورر ۱۱ انداختیم :

تست انیمیشن روی مرورگر اکسپلورر

متحرک کردن فونت های متغیر با استفاده از keyframes

علاوه بر خاصیت انتقال CSS، روش دیگر برای محرک ساختن فونت های متغیر با استفاده از قانون انیمیشن keyframes می باشد. قطعه کد زیر نمونه ای از ایجاد انیمیشن بی نهایت با مدت ۳ ثانیه است که مقدار محور عرض ‘wdth’ را از ۱۰۰ به ۶۰۰ تغییر می دهد.

@font-face {
   font-family: 'amstelvar';
   src: url('/Amstelvar-Roman-VF.ttf') format("truetype-variations");
   font-weight: 1 999;
   font-stretch: 0% 100%;
   font-optical-sizing: 0 100;
}
.heading {
   font-size: 40px;
   font-family: 'amstelvar';
   animation: myFont 3s ease infinite;
 }
@keyframes myFont{
   ۰%{
       font-variation-settings: "wght" 100;
   }
   ۱۰۰%{
       font-variation-settings: "wght" 500;
   }
}

زمان انجام ارزیابی مرورگر و دیدن نحوه عملکرد کد ما در مرورگرهای مختلف. در این مثال برای قلم های متغیر، IE 11 را با Safari مقایسه خواهیم کرد که به ترتیب روی Windows 10 و macOS Mojave کار می کنند.

تست مرورگر سافاری
آزمایش در مرورگر safari ورژن دسکتاپ در Mac Mojave
آزمایش در اینترنت اسکپلورر
آزمایش در اینترنت اسکپلورر ۱۱

ممکن است مطمئن نباشید که فونت های متغیر مناسب وب سایت شما هستند. اما، پس از انجام ارزیابی مرورگر برای فونت های متغیر، می فهمید که فونت های متغیر برای بازدید کنندگان وب سایت که از IE 11 یا نسخه های پایینتر استفاده می کنند، کار نخواهند کرد.

بنابراین اگر فونت های متغیر برای شما مناسب نباشند، چه کاری می توانید انجام دهید؟ اگر تعداد قابل توجهی از بازدید کنندگان در وب سایت شما از طریق Internet Explorer وارد می شوند، چگونه می توانید فونت های متنوع و خوب طراحی کنید؟ نگران نباشید، راه حل هایی برای این کار وجود دارد.

راهکار هایی برای مرورگرهای پشتیبانی نشده

آسانترین راهکار برای فونت های متغیر در مرورگرهای پشتیبانی نشده مانند اینترنت اکسپلورر یا مرورگرهای موبایل مانند Opera mini و UC، تهیه دو نسخه از یک فونت مشابه در داخل @font-face است. نسخه اول فایل فونت متغیر است که دارای یک فرمت “woff2-variations” یا “truetype-variations” است در حالی که فایل دوم برای فونت ثابت با فرمت “woff”  “woff2” یا “ttf” است. بدون ارائه فرمت فونت ثابت، فونت های متغیر بر روی یک مرورگر پشتیبانی نشده رندر نمی شوند.

به عنوان مثال، یکی از محبوب ترین فونت های متغیر “IBM Plex” است که در هر دو قالب متغیر و ثابت موجود می باشد. اگر می خواهید برای IBMPlex با دو سبک فونت دارای وزن فونت۴۰۰ و ۷۰۰ در مرورگرهای پشتیبانی نشده راهکار جایگزین داشته باشید، کد زیر را اضافه کنید:

@font-face {
   font-family: 'IBMPlex';
   src: url('IBMPlex-variable.woff2') format('woff2-variations'),
       url('IBMPlex-regular.woff2') format('woff2');
   font-weight: 400;
}

@font-face {
   font-family: 'IBMPlex';
   src: url('IBMPlex-variable.woff2') format('woff2-variations'),
       url('IBMPlex-regular.woff2') format('woff2');
   font-weight: 700;
}

مرورگرهایی که پشتیبانی از ویژگی فونت های متغیر را دارند، فرمت فونت های ‘woff2-variations’/ ‘truetype-variations’ را دانلود می کنند، در حالی که مرورگرهایی که از این ویژگی پشتیبانی نمی کنند، فرمت های “woff” ، “woff2” یا “ttf” را دانلود می کنند. همانطور که در قانون  font-face مشخص شده است.

برای اطمینان از اینکه مرورگرها فرمت صحیح فونت را مطابق آنچه در نظر گرفته شده است بر اساس پشتیبانی از ویژگی های مورد نظر خود بارگیری کنند، از ویژگی supports مانند موارد زیر استفاده کنید:

.heading {
   font-family: 'IBMPlex'sans-serif;
   font-weight: 700;
}

@supports (font-variation-settings: normal) {
   .heading {
       font-family: 'IBMPlex', sans-serif;
       font-variation-settings: "wght"850, "wdth"90, "opsz"90;
   }
}

در اینجا مثال دیگری با استفاده از فونت متغیر “Source Sans” توسط Adobe وجود دارد. ما یک بار دیگر از ابزار ارزیابی سازگاری مرورگر LambdaTest برای مشاهده صفحه وب با فونت متغیر در یک مرورگر مدرن مانند Chrome و ارزیابی فونت جایگزین در یک مرورگر پشتیبانی نشده مانند اینترنت اکسپلورر ۱۱ استفاده می کنیم.

@font-face {
   font-family: 'SourceSans';
   src: url('SourceSansVariable-Roman.ttf') format('truetype-variations'),
       url('SourceSansPro-Regular.ttf') format('truetype');
   font-weight: 400;
}

@font-face {
   font-family: 'SourceSans';
   src: url('SourceSansVariable-Roman.ttf') format('truetype-variations'),
       url('SourceSansPro-Bold.ttf') format('truetype');
   font-weight: 700;
}

.heading-1 {
   font-size: 70px;
   font-family: 'SourceSans';
   font-weight: 700; /* For IE */
}

.heading-2 {
   font-size: 50px;
   font-family: 'SourceSans';
   font-weight: 400; /* For IE */
}

.heading-3 {
   font-size: 40px;
   font-family: 'SourceSans';
   font-weight: 700; /* For IE */
 
}

/* For Modern Browsers */
@supports (font-variation-settings: normal) {
   .heading-1 {
       /* Using font-variation-settings property */
       font-variation-settings: "wght"850;
   }

   .heading-2 {
       /* Using font-variation-settings property */
       font-variation-settings: "wght"100;
   }

   .heading-3 {
       /* Using font-variation-settings property */
       font-variation-settings: "wght"500;
   }
}

بیایید ارزیابی مرورگر را انجام دهیم و مشاهده کنیم که راهکار های جایگزین ما همانطور که فکر می کردیم کار می کنند. این بار تفاوت سازگاری مرورگر بین Chrome 75 beta و IE 11 را مقایسه خواهم کرد.

Chrome desktop 75 beta
Chrome desktop 75 beta
اینترنت اکسپلورر 11
اینترنت اکسپلورر ۱۱

منابع

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

AxisPraxis

V-Fonts

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

ما همچنین از یک ابزار ارزیابی مرورگر به نام LambdaTest استفاده کردیم تا وب سایت ما را در مرورگرهای قدیمی آزمایش کند و بررسی کند که آیا polyfillها و راهکار های جایگزین شما به درستی کار می کنند یا خیر.

آیا برای وب سایت یا وب اپ خود باید فونت های متغیر را به فونت های ثابت ترجیح دهید؟

ممکن است بسیاری از توسعه دهندگان به دلیل عدم وجود پشتیبانی کلی از مرورگر ها، از امتحان کردن فونت های متغیر دریغ کنند. با این حال، همانطور که در بالا بحث شد، این برداشت نسبتاً اشتباه است. به استثنای Internet Explorer، همه مرورگرهای اصلی دیگر از جمله Microsoft Edge پشتیبانی کاملی از این ویژگی ارائه می دهند. فونت های متغیر دنیای کاملاً جدیدی از امکانات مهیج را برای توسعه دهندگان ارائه می دهد و یکی از جالب ترین افزودنی های CSS در زمان های اخیر است. داشتن سهولت و آزادی استفاده از هزاران سبک مختلف فونت از یک فایل واحد، به همراه توانایی حرکت سازی و اضافه کردن تغییر شکل به فونت های شما، تایپوگرافی را بار دیگر به خط مقدم طراحی وب سوق داده است.

منبع : lambdatest

۰ ۰ vote
Article Rating