این آموزش در تاریخ ۱۴۰۰/۱۱/۰۲ آپدیت شده است.
آموزش دستور font-face در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش دستور font-face در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
دستور font-face در CSS
با استفاده از دستور یا قانون font-face@ در CSS میتوان در یک صفحه وب ( یا درکل وبسایت ) ، فونت های دلخواه خودمون رو تعریف نماییم.
حتما و حتما آموزش نحوه اضافه کردن فونت دلخواه در سایت رو مشاهده نمایید، چون در اون جلسه از همین font-face استفاده کردیم، پس لطفا اون جلسه رو بطور کامل اوکی باشید.
پس دیگه حتما از طریق لینک بالا، اون آموزش رو مشاهده نمایید چون در این جلسه وارد جزئیات نمیشم و فقط چنتا مثال باهمدیگه خواهیم داشت.
Free-Learn
مثال از دستور font-face در CSS
در ادامه میتوانید یک مثال از دستور / قانون font-face@ را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : تعریف و فراخوانی فونت شماره ۱ دلخواه من
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> @font-face{ font-family: 'FontMan'; src: url('myfont/Vazir.ttf') format('truetype'), url('myfont/Vazir.woff') format('woff'), url('myfont/Vazir.woff2') format('woff2'); } body{ font-family:FontMan; text-align:center; } </style> |
مثال شماره ۲ : تعریف و فراخوانی فونت شماره ۲ دلخواه من
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> @font-face{ font-family: 'FontMan'; src: url('myfont/IRANYekan.ttf') format('truetype'), url('myfont/IRANYekan.woff') format('woff'), url('myfont/IRANYekan.woff2') format('woff2'); } body{ font-family:FontMan; text-align:center; } </style> |
مثال شماره ۳ : تعریف و فراخوانی همزمان ۲ فونت در صفحه
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@font-face{ font-family: 'FontMan1'; src: url('myfont/Vazir.ttf') format('truetype'), url('myfont/Vazir.woff') format('woff'), url('myfont/Vazir.woff2') format('woff2'); } @font-face{ font-family: 'FontMan2'; src: url('myfont/IRANYekan.ttf') format('truetype'), url('myfont/IRANYekan.woff') format('woff'), url('myfont/IRANYekan.woff2') format('woff2'); } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی font-face@ در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| font-face@ | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این دستور در CSS بصورت زیر می باشد.
|
1 2 3 |
@font-face { ویژگی + مقادیر موجود در جدول مقادیر } |
Free-Learn
جدول مقادیر دستور font-face در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این دستور استفاده کرد مشاهده نمایید.
| ویژگی | مقدار | توضیح |
|---|---|---|
| font-family | name | ضروری – یک نام را برای فونت تعریف میکند |
| src | URL | ضروری – مسیر یا محل فایل فونت را تعریف میکند |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
اختیاری – میزان کِش آوردن / پَهنی یا باریکی فونت را مشخص می کند مقدار پیش فرض “normal” |
| font-style | normal italic oblique |
اختیاری – استایل فونت را تعریف می کند مقدار پیش فرض “normal” |
| font-weight | Normal Bold ۱۰۰ ۲۰۰ ۳۰۰ ۴۰۰ (Normal) ۵۰۰ ۶۰۰ ۷۰۰ (Bold) ۸۰۰ ۹۰۰ |
اختیاری – وزن فونت را مشخص میکند مقدار پیش فرض “normal” |
| unicode-range | unicode-range | اختیاری – محدوده کاراکترهای یونیکد را که فونت پشتیبانی می کند تعریف می کند مقدار پیش فرض “U + 0-10FFFF” |
Free-Learn
نکات و توضیحات
- مثال از نحوه استفاده از مقدار font-stretch :
|
1 2 3 4 5 |
@font-face { font-family: 'نام خانوادگی فونت'; src: url('..') format('..'); font-stretch: extra-expanded; } |
- مثال از نحوه استفاده از مقدار font-style :
|
1 2 3 4 5 |
@font-face { font-family: 'نام خانوادگی فونت'; src: url('..') format('..'); font-style: italic; } |
- مثال از نحوه استفاده از font-weight :
|
1 2 3 4 5 |
@font-face { font-family: 'نام خانوادگی فونت'; src: url('..') format('..'); font-weight: 500; } |
- از دستور font-face@ میتوان در هرکجای فایل CSS استفاده کرد ولی معمولا و بیشتر از این دستور در ابتدای یک فایل CSS استفاده میکنند، شماهم بهتره از این دستور در ابتدای فایل CSS تان استفاده نمایید.
- ویژگی font-stretch بروی هر فونتی عمل نمیکنه، چرا که خوده فونت باید حتما قابلیت پهن شدن و باریک شدن رو داشته باشه، در غیراینصورت این ویژگی عمل نمیکنه.
