font-face@

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

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

بلاک این دستور بصورت زیر است:

 

@font-face {
  /* تعریف فونت */
}

 

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

این اطلاعات شامل منبع، نام، وزن، استایل، کشیدگی و گستره یونیکد و مواردی دیگر می باشند.

دستور زیر ابتدایی ترین حالت را برای تعریف یک فونت نشان می دهد:

 

@font-face {
  font-family: 'Mojagha';
  src:  url('Mojagha.woff?') format('woff');
}

 

 

font-family

از طریق font-family نام فونت را مشخص می کنیم تا بتوان از آن نام برای استفاده از این فونت در سراسر صفحه استفاده کرد. مثلا اگر بخواهیم از فونت تعریف شده برای پاراگراف ها استفاده کنیم خواهیم نوشت:

 

p {
  font-family: "Mojagha", sans-serif;
}

 

برای بررسی دقیقتر ویژگی font-family به مطلب مربوط به آن مراجعه کنید.

 

src

ویژگی src با استفاده از یک آدرس (URL) منبع کد را مشخص می کند تا مرورگر بتواند فونت را از آن منبع دریافت کند. این آدرس می تواند یک آدرس محلی بر روی سیستم خودمان باشد و یا آدرس سروری که فونت را نگهداری می کند باشد.

این ویژگی می تواند یک یا چند آدرس بپذیرد که در صورت چند آدرس بودن نیاز است تا URLهای مختلف بصورت یک لیست و با استفاده از ویرگول از هم جدا شوند.

 

@font-face {
  font-family: 'WMoji';
  src:  url('WMoji.eot?') format('eot');
        url('WMoji.woff') format('woff'),
        url('WMoji.ttf') format('truetype');
}

 

 

تعریف استایل ها و وزن های مختلف

در داخل دستور @font-face علاوه بر تعریف دو ویژگی اصلی نام و منبع فونت می توان اطلاعات دیگری را نیز مشخص کرد.

به عنوان مثال اگر فونت مورد نظر دارای فایل استایل متفاوت و همینطور وزن های مختلف است و می خواهیم به تمام این موارد دسترسی داشته باشیم باید بصورت زیر عمل کنیم:

 

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
}

 

حال این امکان وجود دارد که به هر نحوی که می خواهیم از این فونت استفاده کنیم:

 

h1 {
  font: 700 italic 'Open Sans', sans-serif;
}

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

p .note {
  font-style: italic;
}

 

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

در این مثال تا زمانی که از وزن 700 و حالت italic بصورت زیر استفاده نشود دستور چهارم بالا اجرا نخواهد شد:

 

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

p {
  font-style: italic;
  font-weight: 700;  
}

 

در این مثال تمام سند از حالت عادی این فونت استفاده می کند اما تمام پاراگراف ها از حالت ایتالیک استفاده می کنند که با توجه به دستور چهارم قابل دسترس است.

تصویر زیر همین موضوع را بیان می کند:

 

تابع local

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

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

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

 

src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff');

 

 

فرمت های مختلف فونت

مرورگرهای مختلف از فرمت های مختلفی برای فونت ها استفاده می کنند. پس اگر می خواهیم تا فونت مورد نظر در مرورگرهای مختلف به درستی نمایش داده شود باید از فرمت ها مختلف استفاده کنیم.

چهار فرمت اصلی وجود دارند:

 
(Web Open Font Format) WOFF این فرمت توسط موزیلا طراحی شد تا داده های فونت را سبک تر و راحت تر فشرده سازی کند و در نتیجه برای وب مفیدتر باشد. تمام فونت های نوع OTF و TTF قابلیت تبدیل شدن به فرمت WOFF را دارند. همینطور در این فرمت طراح فونت می تواند لایسنس مربوطه را در خود فایل قرار دهد.

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

 

پشتیبانی مرورگرها برای فرمت woff:

WOFF2 نسل بعد از WOFF است که فشرده سازی بهتری دارد و سریع تر می باشد.

 

پشتیبانی مرورگرها برای فرمت woff2:

 
(Embedded Open Type) EOT این فرمت توسط شرکت مایکروسافت طراحی شد و تنها فرمتی هست که IE8 و پایین تر پشتیبانی می کنند. پس زمانی که از این فرمت در دستور font-face استفاده شود فقط همین مرورگرها آن را اجرا می کنند.

 

پشتیبانی مرورگرها برای فرمت eot:

 
(OpenType Font/TrueType Font) OTF/TTF فرمت OpenType یک فرمت cross-platform می باشد که ویژگی های زیادی برای کنترل تایپوگرافی دارد. OTF از TTF جدیدتر است و ویژگی های بیشتری دارد.

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

 

پشتیبانی مرورگرها برای فرمت ttf:

 
(Scalable Vector Graphics) SVG/SVGZ

فرمت SVG فونت را بصورت وکتور یا همان برداری بازسازی می کند که این امر باعث می شود تا حجم فایل کمتر باشد و همینطور کارایی بهتری در دستگاههای موبایل داشته باشیم. این فرمت تنها فرمتی است که سافاری روی iOS 4.1 و پایین تر پشتیبانی می کنند.

SVGZ همان SVG از نوع ZIP شده می باشد.

 

پشتیبانی مرورگرها برای فرمت svg:

 

 

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

بعد از دیدن فرمت های مختلف سوالی که در ذهن بوجود می آید این است که از کدامیک استفاده کنیم؟ یا اینکه چطور مطمئن باشیم که همه مرورگرها فونت مورد نظر ما را استفاده می کنند؟

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

 

@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'); /* Old iOS */
}

 

اما اگر پشتیبانی مورد نیاز ما مثل جدول زیر است می توانیم بصورت زیر عمل کنیم:

 

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

 

اگر بخواهیم کمی عمیقتر پشتیبانی کنیم… :)

می توانیم فرمت ttf را نیز اضافه کنیم:

 

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

 

 

unicode-range

ویژگی دیگری که در زمان تعریف یک فونت می توان تعیین کرد unicode-range می باشد. با استفاده از این ویژگی می توان تعریف کرد که چه گستره ای از کاراکترها از فونت مورد نظر استفاده کنند. و یا به زبان دیگر فونت مورد نظر بر چه کاراکترهایی اعمال شود.

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

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

این ویژگی به چهار روش مقدار می گیرد:

 

تک کد

با استفاده از این روش فقط یک کاراکتر انتخاب می شود که در مثال زیر کاراکتر & انتخاب شده است:

 

unicode-range: U+26;

 

 

گستره ای از کدها

با استفاده از این روش یک دامنه ای از کاراکترها را می توان انتخاب کرد. به عنوان نمونه در مثال زیر تمام کاراکترهایی که بین U+0025 تا U+00FF قرار می گیرند، انتخاب می شوند:

 

unicode-range: U+0025-00FF;

 

 

استفاده از علامت سوال

در این روش کافی است آن جایی که می خواهیم متغیر باشد را علامت سوال قرار دهیم. مثلا اگر بنویسیم U+4?? این یعنی همه کاراکترها از U+400 تا U+4FF انتخاب می شوند:

 

unicode-range: U+4??;

 

و در نهایت می شود برای این ویژگی چندین مقدار تعریف کرد که این کار توسط ویرگول انجام می شود:

 

unicode-range: U+0025-00FF, U+4??;

 

به عنوان مثال فرض کنید جمله زیر را در یک عنصر h1 داریم:

 

<h1>CSS & Tricks.ir</h1>

 

حال می خواهیم تمام متن این عنصر از فونت پیشفرض (Helvetica) استفاده کند و فقط علامت & با یک فونت خاص نمایش داده شود.

کافی است بصورت زیر عمل کنیم:

 

@font-face {
  font-family: 'Pacifico';
  src: url(https://fonts.gstatic.com/s/pacifico/v7/Q_Z9mv4hySLTMoMjnk_rCfesZW2xOQ-xsNqO47m55DA.woff2);
  unicode-range: U+26;
}

h1 { 
  font-family: 'Pacifico', Helvetica, sans-seri;  
}

 

بصورت زنده زنده بررسی کنید: :)

 

See the Pen unicode-range by Mojtaba Seyedi (@seyedi) on CodePen.

 

پشتیبانی مرورگرها در مورد این ویژگی به صورت زیر می باشد:

 

@font-face در یک نگاه

در یک نگاه تمام ویژگی هایی که می توان برای این دستور تعیین کرد در زیر آمده اند که برای مطالعه هر کدام می توانید به مطلب مربوط به آن در همین سایت مراجعه کنید:

 

@font-face {
  font-family: ;
  src: ;
  unicode-range: ;
  font-variant: ;
  font-feature-settings: ;
  font-stretch: ;
  font-weight: ;
  font-style: ;
}

 

 

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

در حال حاضر تعداد زیادی سرویس فونت قابل دسترس هستند که در ادامه محبوب ترین ها آورده شده اند:

• Google Web Fonts
• Adobe’s Typekit
• FontSquirrel
• Fonts.com

در اینجا نحوه استفاده از یکی از این سرویس ها یعنی گوگل فونت را با هم بررسی می کنیم:

در قسمت راست صفحه می توانیم از طریق نام، نوع فونت و یا استایل آن و گزینه های دیگر، فونت مورد نظر را پیدا کنیم:

 

 

حال کافی است با کلیک بر روی علامت بعلاوه قرمز رنگ فونت مورد نظر را انتخاب کرده تا به سبد فونت ما اضافه شود:

 

 

سپس جعبه فونت های انتخاب شده را باز می کنیم و با منظره ای مشابه به تصویر زیر مواجه خواهیم شد:

 

 

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

سپس باید تصمیم بگیریم که می خواهیم از روش import@ استفاده کنیم یا از روش link سپس کد مربوطه را کپی کرده و در جای مناسب در کد قرار می دهیم.

اگر قرار است از import استفاده کنیم کافی است کد داده شده را کپی کرده و در قسمت CSS قرار دهیم:

 

@import 'https://fonts.googleapis.com/css?family=Droid+Sans:400,700';

 

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

 

font-family: 'Droid Sans', sans-serif;

 

و اگر استفاده از تگ link انتخاب ما می باشد کافی است تگ لینک داده شده را در HTML قرار دهیم:

 

<link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet">

 

و دوباره بصورت زیر در سی اس اس از فونت انتخابی استفاده کنیم:

 

font-family: 'Droid Sans', sans-serif;

 

ویژگی خوبی که استفاده از اینگونه سرویس ها دارد این است که خود سرویس تمام استایل ها و انواع مختلف فونت را نگه داری می کند و نیاز نیست خود ما در هاست همه فایل ها را داشته باشیم و اگر به آدرسی که سرویس برای فونت می دهد نگاه کنیم خواهیم دید که در پشت پرده همان دستورات font-face نوشته شده اند و نیازی نیست تا ما نگران نحوه نوشتن آنها باشیم.

 

ابزار تولید فونت

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

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

برای تنظیمات پیشرفته بعد از آپلود فایل تیک گزینه EXPERT را زده و تنظیمات دلخواه را اعمال کنید.

 

 

 

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

پشتیبانی مرورگرها برای دستور @font-face:

 

دموی زیر را بررسی کنید:

See the Pen @font-face by Mojtaba Seyedi (@seyedi) on CodePen.