آموزش دستور font-face در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش دستور font-face در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
دستور font-face در CSS
با استفاده از دستورالعمل / قانون font-face@
در CSS میتوان در یک صفحه وب ( یا درکل وبسایت ) ، فونت های دلخواه خودمون رو تعریف و یا درکل نصب نماییم.
قبل از اینکه دستور font-face در CSS به وجود بیاد، خب ما مجبور بودیم از فونت های پیش فرض سیستمی ( فونت هایی که با نصب سیستم عامل بروی سیستم کاربر نیز نصب میشوند ) مثه Tahoma یا Arial یا Verdana استفاده نماییم.
و در بیشتر موارد استفاده از فونت پیش فرضی که خوده مرورگر مشخص میکرد و عملا کاری از دست ما برنمیومد، یعنی اگه من دوست داشتم از فونت دلخواهم استفاده کنم خب نمیتونستم چرا که هنوز دستور font-face ایجاد نشده بود.
ولی الان دیگه با وجود دستور یا قانون font-face ما به راحتی میتونیم فونت های دلخواه خودمون رو بروی وبسایتمون نصب کنیم، تا متن های موجود در سایتمون با فونت دلخواه خودمون نمایش داده بشه.
Free-Learn
فرمت های مختلف یک فونت وب
یک فونت وب یا فونتی که قرار است در وب و وبسایت استفاده شود باید دارای چندین فرمت مختلف باشد، که این فونت بتونه در همه ی مرورگرهای اینترنتی نمایش داده بشه، این فرمت ها به شرح جدول زیر می باشند :
نوع فرمت | توضیح |
---|---|
TTF | مخفف TrueType Font یک فرمت استاندارد که توسط مایکروسافت و اپل ایجاد شده. این فرمت بیشترین استفاده رو در سیستم عامل های ویندوز (مایکروسافت) و مک (اپل) دارد. |
OTF | مخفف OpenType Font ساخته شده از فرمت TTF و متعلق به مایکروسافت امروزه در سیستم های کامپیوتری از این نوع فرمت استفاده می شود. |
WOFF | مخفف Web Open Font Format این فرمت مخصوص استفاده در وب می باشد. این فرمت از ترکیب ۲ فرمت TTF و OTF بصورت فشرده بدست آمده. |
WOFF2 | مخفف Web Open Font Format – همان WOFF می باشد. ولی فرمت WOFF2 با فشرده سازی بیشتری ایجاد شده. |
SVG | مخفف Scalable Vector Graphics دارای سرعت فراخوانی بیشتر نسبت به بقیه فرمت ها معمولا و بیشتر این فرمت توسط مرورگر Safari پشتیبانی میشود و در حال حاضر توسط Firefox ، IE یا IE Mobile پشتیبانی نمی شوند. |
EOT | مخفف Embedded OpenType شکل کامل و جمع وجور شده فرمت OTF می باشد. این فرمت فقط در مرورگر IE پشتیبانی میشود. |
سوال : خب این همه فرمت برای چیه؟ مگه نمیشه فقط از ۱ یا ۲ تا از این فرمت ها استفاده کرد؟؟ یعنی حتما باید همه فرمت های زیر رو داشته باشیم.
پاسخ : خب میدونی تمام هدف اینه که فونت مورد علاقه ما بدون هیچ مشکلی و بطور کاملا صحیح بروی تمامی مرورگرهای بازدید کنندگان سایت، نمایش داده شود.
ادامه پاسخ : مثلا TTF برای چیه؟ فونت هایی که ما روی ویندوز داریم از نوع TTF هستند، خب اگه مثلا فونت مورد علاقه من روی سیستم فلان کاربر نبود خب دیگه مرورگر از TTF و دیگر فرمت ها استفاده میکنه برای نمایش فونت مورد علاقه من در سیستم کاربر.
ادامه پاسخ : پس بطور کلی همه ی این فرمت ها صرفا برای صحیح تر نمایش دادن فونت ما بروی مرورگرهای مختلف و سیستم های مختلف می باشد. (مثلا فرمت EOT برای نمایش فونت ما در مرورگر اینترنت اکسپلورر می باشد)
Free-Learn
جدول پشتیبانی مرورگرها از فرمت های فونت وب
در جدول زیر میتوانید مشاهده نمایید که چه نسخه ای از مرورگرهای اینترنتی از فرمت های وب فونت یا بطور کلی از دستور font-face در CSS پشتیبانی می کنند.
فرمت | Chrome | Firefox | Opera | Safari | IE |
TTF/OTF | ۴٫۰ | ۳٫۵ | ۱۰٫۰ | ۳٫۱ | ۹٫۰ |
WOFF | ۵٫۰ | ۳٫۶ | ۱۱٫۱ | ۵٫۱ | ۹٫۰ |
WOFF2 | ۳۶٫۰ | ۳۵٫۰ | ۲۶٫۰ | ۱۰٫۰ | خیر |
SVG | ۴٫۰ | خیر | ۹٫۰ | ۳٫۲ | خیر |
EOT | خیر | خیر | خیر | خیر | ۶٫۰ |
Free-Learn
نحوه بدست آوردن فرمت های فونت وب
خب در جدول بالا ما متوجه شدیم که باید از فونت دلخواهمون فرمت های مختلفی همچون WOFF و EOT و.. داشته باشیم، خب حالا چجوری باید این فرمت هارو بدست بیاریم.
شما کافیه فرمت TTF فونت دلخواهتون رو داشته باشید، بعد از اون به راحتی با استفاده از ابزارهای آنلاین که برای اینکار ایجاد شده اند میتوان به راحتی این فرمت TTF رو به دیگر فرمت تبدیل و در نتیجه بقیه فرمت هارو هم بدست آورد.
حال اگه فقط فرمت TTF فونت رو دارید خب خیلی راحت الان با استفاده از سایتی که در ادامه معرفی میکنم میتونیم دیگر فرمت های فونت رو برای استفاده در سایت به راحتی بدست آوریم.
وارد سایت web-font-generator.com شوید، سپس همانند تصویر زیر بروی دکمه ..Brows کلیک نمایید و از داخل سیستم خودتان فایل فونت TTF رو انتخاب نمایید.
همچنین تیک گزینه …I’m uploading a font را بزنید تا اجازه تبدیل و ایجاد وب فونت ها برای شما صادر شود.
در نهایت برای شروع عمل تبدیل / ایجاد دیگر فرمت های فونت بروی دکمه Generate web font کلیک نمایید.
حال کمی صبر نمایید تا عمل تبدیل به پایان برسد، سپس همانند تصویر بروی دکمه ی Download Package کلیک نمایید و فایل فشرده شده (zip) فایل های فونت تون رو دانلود نمایید.
حال اگه محتویات فایل فشرده شده رو مشاهده نمایید میبینید که فرمت TTF ما به فرمت های EOT,WOFF,SVG تبدیل شده و حتی اگه فایل styles.css موجود در پکیج رو باز کنید میتوانید دستورات CSS لازم برای تعریف فونت بروی سایت را نیز مشاهده نمایید.
Free-Learn
نحوه تعریف فونت دلخواه در سایت
خب ما فرمت های مختلف فونت مون رو بدست آوردیم، حالا میریم برای تعریف این فونت ها بروی صفحه وبمون ، پس همه ی فرمت های فونت رو درون یک پوشه بگذارید و اسمشو بزارید Fonts یا هراسمی که دوست داشتید.
بطور کلی ۲ مرحله داریم برای تعریف و استفاده از فونت دلخواه مون بروی سایت :
مرحله اول : باید از دستور font-face@ برای تعریف فونت مون استفاده نماییم : ( پس دستورات زیر رو باید در ابتدای فایل CSS تون اضافه کنید )
1 2 3 4 5 6 |
@font-face { font-family: 'نام خانوادگی فونت'; src: url('مسیر / محل فونت') format('فرمت فونت'), url('مسیر / محل فونت') format('فرمت فونت'), url('مسیر / محل فونت') format('فرمت فونت'); } |
خب پس همانند شکل کلی بالا ما با استفاده از دستور font-face@ اول یک نام برای فونت مون مشخص میکنیم و بعدش میایم و دونه به دونه فایل ها و فرمت های فونت مون رو مسیردهی و فراخوانی میکنیم.
مرحله دوم : صدا زدن نام خانوادگی فونت در هرکجای سایت که خواستیم ازش استفاده کنیم، مثلا من میخوام فونت تگ های H3 در سایت بشه همون نام خانوادگی که برای فونتم تعریف کردم پس بصورت زیر عمل میکنم :
1 2 3 |
h3{ font-family: نام خانوادگی فونت; } |
Free-Learn
مثال از دستور font-face در CSS
در ادامه میتوانید یک مثال از دستور / قانون font-face@
را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : تعریف و استفاده از یک عدد فونت
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> @font-face { font-family: 'myfont'; src: url('myfont/font1.eot?#iefix') format('embedded-opentype'), url('myfont/font1.woff') format('woff'), url('myfont/font1.ttf') format('truetype'), url('myfont/font1.svg#myfont') format('svg'); font-weight: normal; font-style: normal; } body{ font-family:myfont; text-align:center; } </style> |
مثال شماره ۲ : تعریف و استفاده از یک عدد فونت ( یه فونت دیگه )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> @font-face { font-family: 'myfont'; src: url('myfont/font2.eot?#iefix') format('embedded-opentype'), url('myfont/font2.woff') format('woff'), url('myfont/font2.ttf') format('truetype'), url('myfont/font2.svg#myfont') format('svg'); font-weight: normal; font-style: normal; } body{ font-family:myfont; text-align:center; } </style> |
مثال شماره ۳ : تعریف و استفاده همزمان از ۳ فونت
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<style> @font-face { font-family: 'myfont1'; src: url('myfont/font1.eot?#iefix') format('embedded-opentype'), url('myfont/font1.woff') format('woff'), url('myfont/font1.ttf') format('truetype'), url('myfont/font1.svg#myfont1') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'myfont2'; src: url('myfont/font2.eot?#iefix') format('embedded-opentype'), url('myfont/font2.woff') format('woff'), url('myfont/font2.ttf') format('truetype'), url('myfont/font2.svg#myfont2') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'myfont3'; src: url('myfont/font3.eot?#iefix') format('embedded-opentype'), url('myfont/font3.woff') format('woff'), url('myfont/font3.ttf') format('truetype'), url('myfont/font3.svg#myfont3') format('svg'); font-weight: normal; font-style: normal; } p.t1{ font-family:myfont1; text-align:center; } p.t2{ font-family:myfont2; text-align:center; } p.t3{ font-family:myfont3; text-align:center; } </style> |
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; } |
در یک آموزش جداگانه بطور کاملتر ” نحوه اضافه کردن فونت دلخواه به سایت ” را آموزش دادم که پیشنهاد میکنم حتما این آموزش را مشاهده نمایید.
از فرمت EOT فقط برای مرورگر IE یا اینترنت اکسپلورر استفاده میشود، پس اگه میخواید فونت دلخواهتون در این مرورگر هم نمایش داده شود باید از این فرمت استفاده نمایید.
از دستور font-face@ میتوان در هرکجای فایل CSS استفاده کرد ولی معمولا و بیشتر از این دستور در ابتدای یک فایل CSS استفاده میکنند، شماهم بهتره از این دستور در ابتدای فایل CSS تان استفاده نمایید.
ویژگی font-stretch بروی هر فونتی عمل نمیکند، چرا که خوده فونت باید از همچین ویژگی / قابلیتی ( کشیدگی یا پهن و باریک کردن کاراکترهای فونت ) پشتیبانی کند.
Free-Learn
دانلود فونت + مثال این آموزش
برای دانلود فونت ها و مثالی که در این آموزش استفاده شده، جهت راحتی و آشنایی بهتر شما با نحوه اضافه کردن فونت دلخواه لطفا اینجا کلیک کنید.