آموزش استفاده از وب فونت ها در css

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

آموزش استفاده از وب فونت ها در css
Article مجازی

یکی از قابلیت های خوب افزوده شده به CSS، امکان استفاده از فونت هایی است که پیش از این تنها در سیستم عامل کاربران قابل نمایش و استفاده بودند، چرا که در وب به طور معمول تنها فونت های خاصی که در تمام سیستم عامل ها نصب و قابل اجرا هستند، پشتیبانی می شود و بقیه موارد به صورت پیش فرض (به طور مثال با فونت Arial) نمایش داده خواهند شد، از این رو توسعه دهندگان CSS، به فکر راه حل این مشکل افتادند تا اینکه در نسخه 3، خاصیتی با نام font-face@ معرفی شد، که در این آموزش قصد داریم به نحوه استفاده از آن بپردازیم.

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

در CSS قسمت وب فونت ها به دو دستور نیاز دارد:

  • دستورالعمل font-face@ وظیفه گفتن نام و محل بارگیری فونت به مرورگر را دارد. در این آموزش خواهید آموخت که چگونه این دستور CSS کار می کند.
  • خاصیت font-family، فونت یک عنصر را مشخص می کند. این خاصیت می تواند چندین نام فونت را نگه دارد که اگر مرورگر از فونت اول پشتیبانی نکرد، فونت بعدی را امتحان کند.

 

1- انواع فونت ها

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

  • EOT. فونت های Embedded OpenType فقط در Internet Explorer کار می کنند. برای تبدیل یک فونت معمولی به فرمت EOT به یک ابزار ویژه نیاز دارید، اما سایت هایی مانند FontSquirrel می توانند این کار را برای شما انجام دهند.
  • TrueType و OpenType. اگر به پوشه فونت های رایانه خود نگاه کنید، احتمالاً فونت های متداول در قالب های ttf (TrueType). یا otf (OpenType). را مشاهده می کنید که می توانید از آنها برای پردازش کلمه درنرم افزارهای word , photoshop  و … و همچنین برای صفحات وب استفاده کنید. این نوع فونت زمانی رایج ترین نوع فونت بود که برای وب فونت ها استفاده می شد و هنوز توسط اکثر مرورگرها پشتیبانی می شود.
  • Web Open Font Format .WOFF به طور خاص برای وب طراحی شده است. فونت های WOFF در واقع نسخه های فشرده شده قلم های TrueType یا OpenType هستند، به این معنی که آنها به طور کلی در اندازه کوچکتر هستند و سریعتر از سایر فونت ها بارگیری می شوند. فرمت WOFF از پشتیبانی گسترده مرورگر نیز برخوردار است، از جمله IE9 و نسخه های بعد از آن،Firefox ،Chrome ،Safari ،Opera ،BlackBerry Browser ، نسخه 5 iOS Safari و بعد از آن و Android Browser 4.4 و نسخه های بعد از آن.
  • SVGقالب Scalable Vector Graphic به خودی خود یک قالب فونت نیست. در واقع راهی است برای ایجاد بردار گرافیکی بدون از دست دادن کیفیت. پشتیبانی از فونت های SVG بسیار محدود است: Internet Explorer،Chrome ،Opera و Firefox  از فونت های SVG پشتیبانی نمی کنند. مشکل دیگر SVG این است که فایل هایی تولید می کند که اغلب دو برابر اندازه TrueType و سه برابر فونت های WOFF هستند. تنها مزیت واقعی SVG این است که این تنها قالب فونتی است که توسط نسخه های قدیمی تر iOS که دارای نسخه Safari 4.1 یا نسخه های قبلی هستند، و همچنین مرورگر Android 4.3 و 4.1 قابل درک است. اگر هدف شما دستگاه های موبایل قدیمی است، می توانید از فونت های SVG استفاده کنید.

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

 
2- مسائل حقوقی با وب فونت ها

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

 
3- نحوه استفاده از دستورالعمل  font-face@

پس از بارگیری فونت های مناسب، زمان آن رسیده که از آنها استفاده کنید. ابتدا فایل ها را در رایانه خود در محلی که فایل های وب سایت خود را ذخیره می کنید، کپی کنید. بسیاری از طراحان وب یک پوشه اختصاصی در پوشه ریشه سایت ایجاد می کنند به نام فونت (font یا web font). از طرف دیگر، اگر پوشه ای برای فایل های CSS خود دارید، می توانید فایل های فونت را در آنجا قرار دهید. مهم نیست که این فایل ها را در کجای سایت خود قرار می دهید، اما به سازماندهی کمک می کند.

دستور font-face@ ابتدایی ترین حالت فونت است و به مرورگر می گوید که فایل فونت را برای بارگیری قرار دهد. مانند یک دستور معمولی، دستورالعمل font-face@ را در شیوه نامه خود قرار دهید. به عنوان مثال، اگر یک فایل TrueType به نام League_Gothic web font.ttf درون یک پوشه در سیستم خود دارید و می خواهید از آن فونت با نام League Gothic استفاده کنید، می توانید دستور زیر را استفاده کنید:

@font-face 
{
font-family: "League Gothic";
src: url('fonts/League_Gothic-web font.woff');
}
  • ویژگی اول (font-family) ، نام فونتی را که می خواهید از آن در سبک خود استفاده کنید، مشخص می کند.
  • ویژگی دوم (src) آدرس فایل فونت در سرور مشخص می کند.

 مسیر را در داخل علامت های نقل قول و داخل ()url قرار دهید. این مسیر درست مانند سایر مسیرهای فایل HTML از جمله مسیرهای مربوط به تصاویر، پیوندها و فایل های JavaScript کار می کند.

font-face@ امکان استفاده از چندین فایل با انواع مختلف فونت را به شما می دهد. متأسفانه، اگر می خواهید از مرورگرهای قدیمی پشتیبانی کنید، کار کمی پیچیده است. به عنوان مثال، اگر می خواهید از تمام قالب های مختلف فونت برای League Gothic در سایت خود استفاده کنید، می توانید کد زیر را وارد کنید:

@font-face 
{
font-family: 'League Gothic';
src: url('fonts/League_Gothic-webfont.eot');
src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/League_Gothic-webfont.woff2') format('woff2'),
     url('fonts/League_Gothic-webfont.woff') format('woff'),
     url('fonts/League_Gothic-webfont.ttf') format('truetype'),
     url('fonts/League_Gothic-webfont.svg') format('svg');
}
  • خط 2 مانند گذشته است. خاصیت font-family نام فونت را به شما می دهد (همان نامی که هنگام اعمال فونت در سبک های CSS خود استفاده خواهید کرد).
  • خط 3 برای Internet Explorer 9 است.
  • خط 4 ویژگی دوم src را شروع می کند که طبق قوانین بخشنامه font-face@ می توانید انواع مختلفی از فونت ها را مشخص کنید. اولین فونت دوباره فونت eot. است، اما این بار خواهید دید که در انتهای فایل eot. ، باید ?#iefix اضافه کنید. این مورد برای رفع اشکالات Internet Explorer است (این بار برای IE6-8). اگر پس از eot آن عبارت را به URL اضافه نکنید، ممکن است فونت در IE8 یا نسخه های پایین تر به درستی نمایش داده نشود.

همانطور که مشاهده می کنید بعد از URI کد format('embedded-opentype') آورده شده است، این کد فرمت فونت را نشان می دهد، و شما این فرم را بعد از هر URL برای هر فرمت فونت متفاوت می توانید اضافه کنید.

خط 5 تا 8 قالب های دیگر فونت را مشخص می کند. این در واقع فقط یک خط  src است و برای خوانایی بهتر به چندین خط تقسیم شده است.

اگر فقط نیاز به پشتیبانی از Internet Explorer 8 و مرورگرهای مدرن تر دارید، می توانید با اطمینان از فایل های EOT ، WOFF2  و WOFF استفاده کنید. در واقع، اگر دیگر نگران Internet Explorer 8 نیستید، می توانید فقط نسخه های WOFF را بکار بگیرید:

@font-face 
{
font-family: 'League Gothic';
src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/League_Gothic-webfont.woff2') format('woff2'),
url('fonts/League_Gothic-webfont.woff') format('woff');
}

و اگر نگران Internet Explorer 8 یا نسخه های قبل از آن نیستید، می توانید این را حتی بیشتر ساده کنید:

@font-face 
{
font-family: 'League Gothic';
src: url('fonts/League_Gothic-webfont.woff2') format('woff2'),
url('fonts/League_Gothic-webfont.woff') format('woff');
}
 
4- ایجاد سبک با استفاده از وب فونت ها

در کد قبلی، دستورالعمل font-face@ فونت جدید League Gothic را نامگذاری می کند. این نامی است که هنگام استفاده از این فونت استفاده می کنید. برای استفاده از تگ h1 با فونت League Gothic، می توانید کد زیر را بنویسید:

h1 
{
font-family: 'League Gothic';
font-weight: normal;
}

توجه کنید که font-weight ویژگی جدیدی است که در اینجا ذکر شده است. در مرورگرها معمولاً تگ های متن را bold نشان می دهند. در صورت نیاز به نسخه bold ، بیشتر مرورگرها به صورت مصنوعی وب فونت را bold می کنند که جالب نیست. تنظیم font-weight در حالت normal به مرورگر می گوید که فقط از فونت League Gothic استفاده کند و از bold کردن آن جلوگیری کند.

همچنین در صورتی که مرورگر نتواند وب فونت را بارگیری کند، ایده خوبی است که لیستی از فونت های از پیش نصب شده را نیز در آن وارد کنید. برای مثال:

h1 
{
font-family: 'League Gothic', Arial, sans-serif;
font-weight: normal;
}
 
5- برخورد با انواع مختلف فونت های Bold و Italic

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

 
راه آسان برای اضافه کردن BOLD و ITALIC

آسان ترین روش برای افزودن انواع فونت هاي bold و italic ، اضافه کردن خصوصیات font-weight و font-style به دستور font-face@ است. به طور معمول، در CSS ویژگی font-weight به مرورگر می گوید که فونت را به صورت ضخیم، عادی یا یکی از چندین وزن دیگر نمایش دهد، در حالی که خاصیت font-style به مرورگر می گوید که یک قلم را بصورت italic یا معمولی نمایش دهد. به طور مثال اگر که فونت به نام PTSans دارید و مي خواهيد فونت شما با نسخه non-bold، normal non-italic شروع شود و قالب های مختلف فونت با PTSansRegular آغاز شود، در شيوه نامه خود، مي توانيد این فرايند را طي کنيد:

@font-face 
{
font-family: 'PTSans';
src: url('PTSansRegular.woff2') format('woff2'),
url('PTSansRegular.woff') format('woff'),
font-weight: normal;
font-style: normal;
}

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

@font-face 
{
font-family: 'PTSans';
src: url('PTSansItalic.woff2') format('woff2'),
url('PTSansItalic.woff') format('woff');
font-weight: normal;
font-style: italic;
}

در اینجا به مرورگر می گویید که فونت مورد نظر شما PTSans حالت italic است. شما دستورالعمل های مشابه font-face@ را برای نسخه های bold و bold/italic و مانند آن می توانید اضافه کنید:

@font-face 
{
font-family: 'PTSans';
src: url('PTSansBold.woff2') format('woff2'),
url('PTSansBold.woff') format('woff');
font-weight: bold;
font-style: normal;
}

 

@font-face {
font-family: 'PTSans';
src: url('PTSansBoldItalic.woff2') format('woff2'),
url('PTSansBoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
}

به عبارت دیگر، برای پوشش دادن انواع متن bold ، italic و regular ، به چهار دستورالعمل font-face@ نیاز دارید. توجه کنید که نام font-family در هر مورد یکسان است. فقط قسمت های مربوط به src ، font-weight و font-style تغییر می کنند.

در این مثال، اگر می خواهید از فونت PTSans در تمام پاراگراف های خود استفاده کنید، می توانید به راحتی این سبک را به شیوه نامه خود اضافه کنید:

p 
{
font-family: PTSans;
}

سپس می توانید تگ های پاراگراف خود را با HTML مشخص کنید. به عنوان مثال، ممکن است پاراگرافی مانند زیر داشته باشید:

هنگامی که مرورگر وب شیوه نامه را می خواند (با چهار دستورالعمل font-face@ و تگ p )، بیشتر پاراگراف را با استفاده از فونت PTSans- Regular نمایش می دهد. با این حال، کلمه " anything" موجود در تگ های em از فونت PTSansItalic استفاده می کند. کلمه " not" در داخل تگ های strong از فونت PTSansBold استفاده می کند و "Mark Twain" در هر دو تگ strong و em از فونت PTSansBoldItalic استفاده می کند.

این دستور ها حتی برای عناوین نیز کار می کنند. اگر شما یک سبک برای قالب بندی تمام تگ های h1 با PTSans ایجاد کرده اید، می توانید این سبک را ایجاد کنید:

h1 
{
font-family: PTSans;
}

با استفاده از این سبک، مرورگر وب در واقع از نسخه bold فونت PTSans استفاده می کند، زیرا سرفصل ها معمولاً به صورت ضخیم نمایش داده می شوند. (وقتی از این تکنیک استفاده می کنید که شامل چندین تغییر فونت است، نباید font-weight را normal در نظر بگیرید.)

متأسفانه، Internet Explorer 8 و نسخه های پیش از آن این روش را درک نمی کنند و از فونت PTSansRegular برای تمام متن استفاده می کنند. IE برای تگ های em و strong حالت faux-italic و faux-bold ایجاد می کند. یعنی، آن را با فونت PTSansRegular بر روی صفحه نمایش بصورت italic نشان می دهد، و فونت PTSansRegular را ضخیم تر می کند. در نتیجه متن حاصل از ترکیب این دو حالت بسیار بد بنظر می رسد.

محتوا
  • - آموزش استفاده از وب فونت ها در CSS

  • آموزش استفاده از وب فونت ها در css

توسعه وب / HTML-CSS