آموزش اضافه کردن فونت های دلخواه به فایل css در طراحی سایت

آموزش اضافه کردن فونت های دلخواه به فایل css در طراحی سایت

آموزش اضافه کردن فونت های دلخواه به فایل css در طراحی سایت

منتشر شده در تاریخ 1397/07/10 توسطadmintarhan

چگونه فونت دلخواهمان را به سایت اضافه کنیم ؟

سلام دوستان ما در این مقاله به سراغ افزودن فونت دلخواه در طراحی سایت می رویم در هنگام اضافه کردن فونت به فایل css باید چند نکته را رعایت کرد که ما به بررسی این نکات خواهیم رفت.

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

فرمت فونت

خب به سراغ اضافه کردن فونت به سایت می رویم که با چند مرحله ساده این کار انجام خواهد شد.

در ابتدا یک فولدر با نام fonts به فولدر اصلی سایتتان اضافه کنید

البته نام فولدر هرچیزی می تواند باشد ولی سعی کنید در نامگذاری از اسم هایی استفاده کنید که به آسانی قابل تشخیص هم برای خود و هم برای دیگران باشند.

 

بعد از اینکه فولدر فونت را ساختید فونت هایی که دانلود کرده اید را در داخل فولدر قرار دهید دقت کنید که برای اینکه تمامی مرورگر ها فونت مورد نظر شما را نمایش دهند فرمت های woff و eot و ttf را قرار دهید.

خب سپس به فایل css سایتتان بروید و در قسمت بالایی فایل css در بالاترین جایگاه کد های زیر را قرار دهید.

برای معرفی یک فونت به css از font-face@ استفاده می کنیم.

 

  }font-face@

  در این خط نام فونت را قرار می دهیم سعی کنید که نام فونت یکی باشد;’font-family :’ font name

/*src :url(‘fonts/yekan.eot’) format(’embedded-opentype’),     /*for internet explor

/*url(‘fonts/yekan.woff’) , /*for Pretty Modern Browsers

/*url(‘fonts/yekan.ttf’)format(‘truetype’), /* Safari, Android, iOS

/*url(‘fonts/yekan.svg#svgFontName’) format(‘svg’); /* Legacy iOS  

 

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

خب به سراغ توضیحات کد بالا می رویم در خط اول نام فونت را تعیین می کنیم توجه داشته باشید که در انتخاب نام فونت حرف های بزرگ و کوچه اهمیت دارند در واقع از خط اول برای استفاده از فونت در هرجای سایت که بخواهیم استفاده می کنیم.

 

 

کد فونت

 

[av_notification title=” color=’blue’ border=” custom_bg=’#444444′ custom_font=’#ffffff’ size=’large’ icon_select=’yes’ icon=’ue81d’ font=’entypo-fontello’ admin_preview_bg=”]
اگر کدهای بالا به شما کمکی نکرد نگران نباشید با ما در تماس باشید تا کارشناسان ما شما را راهنمایی نمایند.
[/av_notification]

 

[av_notification title=” color=’orange’ border=” custom_bg=’#444444′ custom_font=’#ffffff’ size=’large’ icon_select=’yes’ icon=’ue81f’ font=’entypo-fontello’ admin_preview_bg=”]
دوستان و کاربران عزیز اگر از فونت های تجاری استفاده می کنید حتما فونت ها را خریداری نمایید.
[/av_notification]

 

نظرات

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

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

آموزش طراحی سایت

آموزش طراحی سایت از پایه تا پیشرفته

به زودی