آموزش CSS – آشنایی با دستور font-face@ در سی اس اس (CSS) (جلسه ۱۴)

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

xcreating_a_folder_of_css_fonts.jpg.pagespeed.ic.sTkq2WXP5p

در ادامه به بخش Control Panel ویندوز رفته، وارد فولدر Fonts شده و هر فونت که بخواهیم را کپی کرده و داخل فولدر مرتبط با fonts در فولدر سایتمان کپی می کنیم:

xcopying_a_font_from_control_panel.jpg.pagespeed.ic.3uYGriRe1S

حال نیاز است تا این فونت را به فرمت های مختلفی که توسط مرورگر های مختلف مورد استفاده قرار می گیرند تبدیل کنیم. وب سایت های بسیاری هستند که این کار را به صورت رایگان انجام می دهند که از آن جمله می توان به http://convertfonts.com اشاره نمود. برای شروع کار وارد این سایت می شویم:

xconvertfonts.com.jpg.pagespeed.ic.GUbJMYeT4X

همانطور که در تصویر فوق می بینیم از منوی اصلی ابتدا گزینه fft to eot را انتخاب کرده و سپس فایل خود را آپلود می کنیم و پس از تبدیل کردن فایل، آن را در فولدر مربوط به فونت های سایتمان قرار می دهیم. پس از این کار مجدد به سایت برگشته و این بار از منوی اصلی گزینه ttf to woff را انتخاب کرده و مجدد آن را تبدیل کرده و در فولدر مربوط به فونت ها قرار می دهیم:

xconverting_fonts.jpg.pagespeed.ic.wXWSKZ8toG

می بینیم که هر چهار فرمت مورد نیاز را در دست داشته حال در ادامه، کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>این یک پاراگراف است</p>
   </body>
</html>

همانطور که می بینیم، یک تگ پاراگراف را داخل تگ <body> قرار داده ایم. در ادامه می بایست به تکمیل کدهای سی اس اس (CSS) در فایل مربوطه بپردازیم:

@font-face {
   font-family:'myFont';
   src:url('../fonts/yekan.eot') format('eot'),
     url('../fonts/Aseman.ttf') format('truetype'),
     url('../fonts/Aseman.woff') format('woff');
}

کاری که برای دستور font-face@ بایستی انجام دهیم این است که این دستور بایستی در ابتدای کدهای سی اس اس (CSS) قرار گیرد و در ادامه در هر کجای سی اس اس که خواستیم می توانیم به این دستور ارجاع دهیم. همانطور که در کد فوق می بینیم ابتدا دستور font-face@ را نوشته و داخل علامت های {   } با استفاده از دستور font-family نامی برای این فونت خود انتخاب می کنیم. به خاطر داشته باشیم که هر نامی را می توان برای این فونت انتخاب کرد. علاوه بر این نام فونت خود را داخل دو علامت ‘  ‘ قرار می دهیم و در نهایت یک علامت ; قرار می دهیم.
در ادامه از دستور src استفاده کرده و آدرس فونت مد نظر را وارد می کنیم. برای آن که فرمت هر فونت را هم به مرورگر اطلاع دهیم از دستور format استفاده کرده و نوع فرمت فونت را داخل آن می نویسیم (لازم به ذکر است از آنجا که سه فرمت مجزا داریم می بایست آدرس هر سه فرمت را وارد کدهای سی اس اس کنیم به این صورت که آن ها را با یک کاما از یکدیگر مجزا سازیم).
لازم به ذکر است که اینترت اسکپلورر از فرمت eot پشتیبانی می کند و این در حالی است که مرورگر های فایرفاکس، کروم و اپرا از فرمت ttf پشتیبانی می کنند و از آن جا که آخرین نسخه های مرورگر ها و به طور کلی مرورگر های جدید از فرمت woff استفاده می کنند این فرمت را هم در کد خود قرار می دهیم.
کد سی اس اس فوق تکمیل نیست چرا که نیاز است تا کمی آن را تکمیل تر کنیم تا برای مرورگرها اینترنت اسکپلورر بهینه شود. برای این منظور کد فوق را به صورت زیر تکمیل می کنیم:

@font-face {
   font-family:'myFont';
   src:url('../fonts/yekan.eot?#iefix') format('embedded-opentype'),
     url('../fonts/Aseman.ttf') format('truetype'),
     url('../fonts/Aseman.woff') format('woff');
}

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

@font-face {
   font-family:'myFont';
   src:url('../fonts/yekan.eot?#iefix') format('embedded-opentype'),
     url('../fonts/Aseman.ttf') format('truetype'),
     url('../fonts/Aseman.woff') format('woff');
}
p{
   font-family:myfont;
}

می بینیم که برای p نوع فونت خود را همان فونتی که در دستور font-face@ تعریف کردیم قرار داده ایم. حال فایل اچ تی ام ال (HTML) خود را داخل مرورگر اجرا می کنیم:

xusing_font-face_in_html_tags

می بینیم که متن داخل تگ <p> با استفاده از فونت “آسمان” به نمایش در آمده است و این در حالی است که این فونت از روی سیستم خوانده نمی شود بلکه از داخل فولدر fonts که داخل فولدر مرتبط با سایت ما قرار دارد خوانده می شود.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)