آموزش html , css

تعریف فونت دلخواه با font-face در CSS

لزوم داشتن یک وب سایت جذاب، داشتن UI جذاب و حرفه ای است. یکی از موارد موثر در UI صفحات وب، فونت است. تعریف فونت دلخواه برای صفحات وب، با font-face در CSS امکان پذیر است.

در صورتی که فونت دلخواه ما در فونت های پیشفرض سیستم عامل وجود نداشته باشد و ما بخواهیم فونت دلخواه خود را برای صفحات وب اضافه کنیم، باید از عبارت font-face استفاده کنیم.

ساختار دستور font-face در CSS

با عبارت font-family برای فونت دلخواه خود یک نام دلخواه وارد می کنیم در خانواده فونت ها با آن نام شناخته می شود.

در عبارت های url آدرس فونت مد نظر به همراه نام فایل و نوع پسوند آن باید وارد شود. مثلاً اگر نام فایل فونت من Byekan باشد باید آن را به صورت: Byekan.ttf وارد کنم.

با عبارت format فرمت فونت را تعیین می کنیم. فرمت های فونت چهار نوع هستند:

۱- مرورگر IE از از فونت های با فرمت eot پشتیبانی می کنند.

۲- پسوندهای otf و ttf برای فونت های سیستمی است. مخفف این عبارات به ترتیب از چپ: True Type format , Open Type Format می باشد.

۳- دستگاه های اپلی از فرمت SVG پشتیبانی می کنند. البته از نسخه IOS 5 به بعد این دستگاه ها از پسوند Woff هم پشتیبانی می کنند.

نسخه های پشتیبانی شده توسط مرورگرها از فرمت Woff متفاوت است.


بیشتر بخوانید: کلاس و id در css


حال می خواهیم یک فونت دلخواه برای صفحه وب خود که نام آن index است، تعریف کنیم. برای چنین منظوری یک صفحه ی HTML را در نظر بگیرید که به این صورت است:

تعریف فونت دلخواه با font-face

می خواهیم فونت دلخواهی را به این صفحه با font-face در css تعریف کنیم. فایل های فونت دلخواه را آماده کنید و در مسیر همان فایل html داخل پوشه ای با نام fonts قرار دهید.

فونتی که من انتخاب کردم فونت Vazir است.

دوباره یک فایل Css به پروژه اضافه کنید. نام فایل را من style.css گذاشتم.

کدهای زیر در فایل css قرار دارد:

با عبارت loacl ، اگر فونت مورد نظر در سیستم کاربر وجود داشته باشد، دیگر فایل های فونت از روی سرور لود نمی شوند.

اما تا به الان هیچ چیزی تغییر نکرده است و باید فایل style.css را به صفحه html لینک کنیم.

با تگ link می توانیم این عمل را انجام دهیم. تگ link باید بین تگ شروع و پایانی Head قرار بگیرد.

فونت صفحه وب با استفاده از عبارت font-face به فونت vazir تغییر یافت.

عبارت font-face در CSS
برچسب ها

حسین درویشی

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

نوشته های مشابه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا