نحوه‌ی کارکرد font-face@ در CSS

font-face@ یک دستور در CSS است که با استفاده آن می‌توانید فونت‌های اختصاصی خود را در صفحه‌ی وب‌تان بارگذاری کنید. پس از اضافه کردن این دستور به فایل استایل دهی‌تان، مرورگر کاربران برای لود کردن صفحه‌ی وب شما، فونت را از جایی که شما آن‌ را میزبانی (host) می‌کنید، دانلود می‌کند و سپس از آن استفاده می‌کند.

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

جامع‌ترین و کامل‌ترین نوع پشتیبانی از مرورگرها

در حال حاضر استفاده از font face امن‌ترین و بهترین روش از نظر پشتیبانی صحیح و حداکثری توسط مرورگرهای مختلف است. همان‌طور که در تصویر زیر مشاهده‌ می‌کنید، دستورfont-face@ باید پیش از هر دستور دیگری در فایل css شما قرار گیرد. به عبارت دیگر دقیقا از بعد ازجایی که این دستور را قرار داده‌اید، می‌توانید از آن فونت استفاده کنید.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

پس از قطعه کد بالا، می‌توانید با استفاده از دستورهایی مثل دستور زیر،‌ از فونت لود شده استفاده کنید:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

پشتیبانی عملی‌تر و کاربردی‌تر از مرورگرها

این روزها WOFF و WOFF 2 بسیار پرکاربر شده‌اند و همه به سمت و سوی این‌ دو سوق داده شده‌اند. پس احتمالا از همچین کدی در عمل استفاده خواهید کرد:

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

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

اگر شما نیاز به نوعی از پشتیبانی در مرورگرها دارید که علاوه‌ بر کاربردی و عملی بودن، کامل هم باشد، از چیزی شبیهبه کدی که در زیر مشاهده می‌کنید، استفاده خواهید کرد:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

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

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

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
}

روش‌های جایگزین

import@:

در حالی که تا به این‌جای این مقاله به بررسی font-face@ پرداختیم، بهتر است که راجع به import@ نیز صحبت کنیم. Font face برای فونت‌هایی مناسب است که بر روی هاست ما بارگذاری شده‌اند و قرار است به شکل اختصاصی برای وب‌سایت ما، از آن‌ها استفاده شود. اما import@ زمانی به کار می‌آید که ما قصد استفاده از فونت‌هایی را داریم که در هاست ما وجود ندارند. مثلا برای استفاده از فونت‌های موجود در Google Fonts باید از این راه دوم استفاده کرد. در زیر نیز می‌توانید قطعه کد مربوط به بارگذاری فونت Open Sans را از روی Google Fonts را مشاهده کنید:

@import url(//fonts.googleapis.com/css?family=Open+Sans);

حال می‌توانیم از این فونت برای استایل‌دهی به متون صفحه، استفاده کنید:

body {
  font-family: 'Open Sans', sans-serif;
}

نکته‌ی جالبی که ذکر آن خالی از لطف نیست این است که اگر به آدرس فراخوانی شده توسط import بالا بروید، می‌بینید که در پشت صحنه، font-face@ در حال انجام کارهاست.

ولی باید بدانیم که استفاده از مراکزی مثل Google Fonts، مزیت بزرگی دارند؛ آن هم قابلیت استفاده از خیل عظیمی از فونت‌های مختلف بدون نیاز به نگهداری از آن‌ها و تمام فایل‌های موردنیازشان، بر روی هاست‌های شخصی‌مان است. این نوع استفاده باعث به حداقل رسیدن ناسازگاری‌های مرورگر‌ها نیز می‌شود.

@import url(//fonts.googleapis.com/css?family=Open+Sans);

body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-heught: 24px;
  padding: 50px;
}

h1 {
  font-size: 30px;
  line-height: 45px;
}

لینک کردن استایل‌شیت

شما می‌توانید همان‌گونه که فایل‌های css را در <head> صفحه‌ HTML اتان لینک می‌کنید، آدرس فونت را نیز به سند خود لینک دهید تا بتوانید از آن فونت در سند خود استفاده کنید. برای استفاده از همان open sans از Google Fonts، باید از کد زیر در تگ هد سندتان استفاده کنید.

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

سپس می‌توانیم همانند بقیه‌ی روش‌ها با دستور css زیر، از فونت فراخوانی شده‌ی بالا در سند خود استفاده کنیم:

body {
  font-family: 'Open Sans', sans-serif;
}

در این روش نیز باز هم درحال استفاده کردن از font-face@ در پشت صحنه هستیم؛ اما به جای تزریق آن به فایل css مان، آن را به فایل HTML اضافه می‌کنیم و سپس در فایل CSS از آن فونت لود شده، استفاده می‌کنیم.

body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-heught: 24px;
  padding: 50px;
}

h1 {
  font-size: 30px;
  line-height: 45px;
}

هر دوی روش‌های اخیر، به یک شکل کار می‌کنند و هر دو موارد مورد نیاز را دانلود می‌کنند.

درک انواع مختلف فایل‌های فونت

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

(WOFF / WOFF2 (web open font format

برای استفاده بر روی وب ساخته شده است و توسط موزیلا توسعه پیدا کرده است. فونت‌های WOFF اغلب سریع‌تر از دیگر فرمت‌ها لود می‌شوند؛ چرا که یک نسخه‌ی فشرده‌تر نسبت به فونت‌های (OTF (openType و (TTF (TrueTyp است. این فرمت می‌تواند شامل metadata و اطلاعات license نیز در خود فایل فونت باشد. به نظر که این فرمت نسبتا جدید برنده‌ی نهایی خواهد بود و در آینده همه به سمت آن کشیده خواهیم شد.

WOFF2 نیز نسل بعدی WOFF است و دارای فشرده‌سازی بهتری نسبت به نسل قبلی خود است.

(SVG / SVGZ (Scalable Vector Graphics

در واقع فرمت SVG برای فونت‌ها، یک بازسازی برداری از فونت است که حجم فایل آن را خیلی سبک‌تر می‌کند و ایده‌آل برای استفاده در موبایل هاست. این فونت تنها فرمتیست که در ورژن ۴.۱ و پایین‌تر سافاری iOS مجاز است. این نوع از فونت‌ها به شکل کامل توسط فایرفاکس، اینترنت اکسپلورر و اینترنت اکسپلورر موبایل پشتیبانی نمی‌شوند. فایرفاکس پیاده‌سازی این نوع فونت را برای تمرکز بر روی WOFF متوقف کرده است.

SVGZ نیز ورژن فشرده‌شده‌ی SVG است.

(EOT (Embedded open type

این فرمت به‌وسیله‌ی مایکروسافت (مبتکر اصلی font-face@) ساخته شده و تنها فونت پشتیبانی شده توسط اینترنت اکسپلورر می‌باشد. در واقع این فرمت، تنها فرمت فونت است که توسط IE8 و پایین‌تر از آن می‌تواند نمایش داده شود.

(OTF / TTF (openType و TrueType

وظیفه‌ی فرمت WOFF، بازسازی کردن ساختار OTF و TTF بوده است تا بتواند جایگزین‌ آن‌ها شود. یکی از مهم‌ترین دلایلی که احساس نیاز به جایگزین شدن این فرمت‌ها حس شد، کپی کردن آسان و قانونی این فونت‌ها بود. البته این ایراد می‌تواند برای برخی طراحان تبدیل به یک مزیت بزرگ شود!

کارایی

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

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

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

مباحث دیگری که نیاز به توجه در هنگام پیاده‌سازی فونت‌ها دارند:

حجم فایل را کاهش دهید

فونت‌ها به طرز غافل‌گیرانه‌ای می‌توانند سنگین باشند؛ پس سعی کنید از گزینه‌های سبک‌تر استفاده کنید. برای مثال فونتی که حجم ۵۰ کیلوبایتی دارد را به فونتی که ۴۰۰ کیلوبایت حجم دارد، ترجیح دهید.

درصورت امکان، مجموعه کارکترها را محدود کنید

آیا واقعا به تمامی اشکال مختلف یک فونت مثل bold و black weight ها نیاز دارید؟ شما می‌توانید با انتخاب هوشمندانه‌ی فونت‌های مورد استفاده‌تان، سرعت لود صفحاتتان را افزایش دهید.

برای صفحات کوچک، فونت‌های سیسیتمی را استفاده کنید

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

در مثال زیر صفحات نمایش زیر ۱۰۰۰ پیکسل از یک فونت سیستمی استفاده می‌کنند و صفحات عریض‌تر از ۱۰۰۰ پیکسل از فونت سفارشی ما استفاده خواهند کرد.

@media (min-width: 1000px) { 
  body {
    font-family: 'FontName', Fallback, sans-serif; 
  }
}

سرویس‌های فونت

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

در زیر تعدادی از این سرویس‌های میزبانی فونت را آورده‌ایم:

Font icon ها پس چه شدند؟

درست است که ما می‌توانیم با استفاده از font-face@ یک فایل فونت که پر از آیکون است را در صفحه‌ وبمان لود کنیم و از آن به عنوان یک سیستم آیکونی برای کل وب‌سایتمان، به راحتی استفاده کنیم؛ ولی به نظر شخصی من، بهتر است به جای استفاده از فونت آیکون‌ها، از SVG ها استفاده کنید. برای کسب اطلاعات بیش‌تر از مزیت‌های هر کدام از این دو روش، می‌توانید به این‌ مقاله بروید.

منبع