جشنواره نوروزی آکادمی آی تی تخفیف عیدانه آکادمی آی تی شروع شد، 50% تخفیف روی تمامی دوره ها - کد تخفیف eyd99
همین حالا کلیک کن

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

0 0 نظر
دپارتمان: آموزش طراحی سایت

استفاده از فونت های مختلف در سایت

1. استفاده از فونت های گوگل

خود این روش به سه صورت انجام میشه:

  • استفاده از لینک اون فونت

  • استفاده از تگ لینک در فایل html 

  • استفاده از javascript هست (منسوخ شده)

 

2. استفاده از فونت های داخل ویندوز

 

فرمت های مختلف فونت

در جدول زیر که داریم میایم با فرمت های مختلف فونت آشنا میشیم .
در اینجا ما فرمت TTF،OTF،WOFF ورژن 2 WOFF ،SVG و EOT رو داریم که هرکدوم از اون ها یک تاریخچه ای رو داره. همان طور که میبینید WOFF مخفف Web Open Font Format  هست و ورژن 2اش هم موجوده که توسط mozilla دولوپ شد و کار لود کردن فونت خیلی سریع تر انجام میشه در این نوع فورمت و نسبت به ساختار OTF و TTF ساختار Web Open Format ساختار فشرده تری هست و این باعث میشه به صورت بهتری وب سایتمون لود بشه، OTF و TTF هم بیشتر به خاطر اون ویژگی هایی که دارند اون طراح ها بیشتر به اینا علاقه مندند و بیشتر میرن سمت اینها ولی خب برای وب همون Web Open Format با همون WOFF بسیار مناسب تر هست.
SVG هم داریم، SVGZ هم داریم. SVG مخفف Scalable Vector Graphics Font/Shapes هستش، SVGZ هم زیپ شدش یا همون فشرده شده اش هست. حالا به صورت Vector این نوع فرمت هست و از لحاظ سایزی یکم کم حجم تره ،برای موبایل ها بسیار مناسبه و EOT هم که در آخر داریم توسط مایکروسافت تولید شد وفقط به درد اینترنت اکسپلورر و ورژن های پایین تر از 8، یعنی از 6تا 8 میخوره.

 

سازگاری فرمت ها با مرورگرهای مختلف

حالا در جدول بعد میایم ورژن کامل این مرورگر ها و سازگاریشون رو میبینیم. 

 

در اینجا میبینیم که EOT فقط برای ورژن های بالای6 اینترنت اکسپلورر کاربرد داره ولی در بقیه مرورگرها اصلاهیچ فایده ای نداره برای ما.SVG رو میبینیم،TTF/OTF رو میبینیم و WOFF هم نشون داده شده .به اینها دقت کنید تفاوت بسیار چشمگیری  بین TTF) chrome) و WOFF) chrome) نیست. ولی WOFF ورژن 2 اومده و یک جهش کرده و از ورژن 36 به بعد میاد ساپورت میکنه و حواستون باشه این WOFF 2 ای که استفاده میکنید برای مرورگر های مدرن ،توی IE که اصلا به درد نمی خوره  در سافاری هم به همین شکل.

استفاده از تگ html

حالا ما بیایم در کد توضیح بدیم چه جوری ازین فونت ها استفاده کنیم. من اول از همه میام به سایت google fonts و اونجا یک فونتی رو انتخاب میکنم مثلا این فونت:

 

 

و ما میتونیم چند تا فونت رو انتخاب بکنیم  Add to collection رو بزنیم و بعدا ازشون استفاده بکنیم به صورت یکجا یا اینکه حالا من فقط این فونت رو میخوام روی Quick-Use کلیک میکنم

 

وارد این بخش میشیم

 

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

 

 

استفاده از روش استانداردش، که همون تگ لینک هست، به این صورت هست .من مثلا میام این قسمت رو کپی میکنم 

 

وارد پروژه ام میشم در قسمت body یک پاراگراف ایجاد میکنم  و یک متن  lorem ipsum رو هم  قرار میدم 

  

آکادمی آی تی

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione maiores quo a lias non, aspernatur soluta facilis similique aut quidem id eius esse porro eaque veniam ipsum earum necessi tatibus possimus. Aspernatur!

آکادمی آی تی Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione maiores quo alias non, aspernatur soluta facilis similique aut quidem id eius esse porro eaque veniam ipsum earum necessitatibus possimus. Aspernatur!

 

و کافیه این لینکی که کپی کردیم رو قبل از لینک مربوط به style css مون بیاریم paste اش میکنم در اینجا کار انجام شده،  
اسم فونت هم اگر میخواهید مراجعه نکنید به همون صفحه اینجا نوشته شده ،و من این رو کپی میکنم میرم به فایل style ام میگم مثلا این پاراگرافم font family  اش این اسم باشه

{;p{ font-family: 'Yekan',Lulo

و میبینیم که فونت به خوبی کار میکنه و ست شده ،اسم فونت هم نوشته شده در همون صفحه من اگر بیام به این بخش

 

 

در بخش چهارمش شما میتونید اسم فونت رو ببینید sans-serif هم به عنوان یک فونت بک آپ اضافه میکنیم که اگر بنا بر هر مشگلی این فونت کار نکرد بره سراغ فونت استاندارد sans-serif که توی همه ی مرورگرها ساپورت میشه و هست. 

 

استفاده از [email protected]

راه حل دومی که داریم اینه که از [email protected] استفاده بکنیم و من میام کپی میکنم این قسمت رو 

 

میام به کدم برمیگردم این لینک رو پاک میکنم میبینیدکه به حالت دیفالتش بر میگرده،میرم در فایل style ام در ابتدا اون قسمت رو که کپی کردم paste میکنم 

 

 

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

روش آخر هم

استفاده از javascript هست

بر میگردم به صفحه در قسمت javascript میبینیم که یک تگ script قرار داره 

 

این رو باید در فایل html مون قرار بدیم و یا اینکه میتونیم یک فایل js جداگونه بسازیم در پروژمون و لینکش کنیم و همین قسمت رو در اون فایل قرار بدیم .حالا ما میایم برای سادگی کار تگ script رو در html مون قرار میدیم ،من بعد از این تگ لینک script ام رو قرار میدم 

 

 

و باز هم میبینیم که به درستی کار میکنه. حالا من چه جوری به صورت دستی فونت هام رو دانلود بکنم؟یا همون فونت ها که در  پوشه فونت ویندوزم قرار داره استفاده کنم ،این رو پاک میکنیم

 

 

و برای مثال میایم به این سایت و یک فونت رو انتخاب میکنم .روی اسم فونت کلیک میکنم 

 

 

و وارد یک صفحه جدید میشم 

 

چیزهایی که گفتیم رو اینجا هم داره مثلااز تگ لینک استفاده بکنید 


 

یا اینکه بیاید [email protected] بیارید 

 

حالا قسمت جدید ی که میخوایم بهتون بگیم

استفاده از @font-face

 

 

من قبلش میام فایلش رو دانلود میکنم 

 

 

روی دانلود کلیک میکنم

 

 

و فایلم رو باز میکنم و حالا میام وارد این فولدر میشم 

 

 

و این فونت هارو 

 

 

در فولدر فونتز پروژه ام کپی میکنم 

میبینیم که همه رو آوردم

 

 

برمیگردم به برکت و الان میبینید که این فونت ها در فولدر فونتز ام قرار داده شده 

 

 

حالا کافیه که من در ابتدا بنویسم @font-face .حالا در اینجا مینویسم font-family

و هر اسمی  که دلم میخواد رو به این فونت جدیدی که میخوام import کنم نسبت میدم  مثلا اسمش رو میگذارم Lulo و همون اسمی هست که خود این فونت داره هر چیزی میتونه باشه اصلا میتونید بگذارید امیر فرقی نداره 

 

 

حالا بعد از این قسمت مینویسیم

آدرس فونت هامون رو پاس میدیم، اول با EOT همیشه شروع میکنید اگر EOT دارید که برای اینترنت اکسپلورر باشه .من میگم یک قدم به عقب برگرد چون در فایل style مون هستیم که در پوشه css قرار داره ،ما باید یک مرحله به عقب برگردیم به root foldre مون و بعد داخل پوشه فونتز بشیم و اسم فونتمون رو بیاریم

و اسم فونت رو ازینجا کپی میکنم 

و اینجا paste میکنم 

 @font-face{ font-family:"Lulo"; src:url('../fonts/Lulo Clean W01 One.eot');

باز هم زیرش میایم مینویسیم ،برای ورژن های پایین تر از ورژن  9ie این کار رو انجام میدیم .باز هم میایم میگیم یک مرحله به عقب برگرد وهمون فونت بالا رو که به فرمت eot هست رو  میگذاریم فقط اینجا علامت سوال نامبر ساین(#) رو قرار میدیم و iefix

 @font-face{ font-family:"Lulo"; src:url('../fonts/Lulo Clean W01 One.eot'); /*IE9*/ src:url('../fonts/Lulo Clean W01 One.eot?#iefix') }

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

 @font-face{ font-family:"Lulo"; src:url('../fonts/Lulo Clean W01 One.eot'); /*IE9*/ src:url('../fonts/Lulo Clean W01 One.eot?#iefix') format('embedded-opentype'),/*IE6-IE8*/ }

من در اینجا دیگه سمی کالن نمیگذارم و از کاما استفاده میکنم و بعدش میام باز هم از URL های مختلف استفاده میکنیم .مثلا در اینجا دیگه به جای eot

 @font-face{ font-family:"Lulo"; src:url('../fonts/Lulo Clean W01 One.eot'); /*IE9*/ src:url('../fonts/Lulo Clean W01 One.eot?#iefix') format('embedded-opentype'),/*IE6-IE8*/ url('../fonts/Lulo Clean W01 One.woff') format('woff'), url('../fonts/Lulo Clean W01 One.woff2') format('woff2'), url('../fonts/Lulo Clean W01 One.ttf') format('truetype'), url('../fonts/Lulo Clean W01 One.otf') format('opentype'); }

البته ورژن woff2 و اینجاهم ذکر میکنیم و در قسمت فرمت دیگه نمینویسیم ttf ، مینویسیمtruetype
حالا اگه svg  داشته باشیم اون رو میاریم اگه otf داشته باشیم  otf میاریم .منotf رو در کد بالا اورده ایم ،و در اینجا نمی نویسیم  otf و مینویسیم مثل truetype و دیگه در آخر هم کالن (;) رو میگذارید.حالا این اسمی رو که اینجا ست کردیم روکافیه در قسمت فونت فمیلی بیاریم  و میبینیم که فونت به درستی کار میکنه .پس ما میایم به این شیوه عمل میکنیم .اولین src مخصوص ورژن  9ie هست .و src بعدی که میاد ،چندین url داره میاد اولیش بر روی ie 6تا 8 هست و من جلوش مینویسم IE6-IE8به همین صورتاستفاده میکنم  .اینها رو هم توضیح دادم .که برای وب مناسب تره حالا اگه به صورت مدرن مطمئن هستید که یوزر هاتون استفاده میکنند ،از woff2 هم استفاده کنید .TTF هم و OTF هم که اکثر دیزاینر ها روی فونت های TTF کار میکنند.و الان سایتمون به درستی رندر شده است و کار میکنه احتمالا روی مرورگرهای دیگه هم به درستی عمل میکنه .حالا شما خودتون هم در ورژن های دیگه چک کنید اگر مشکلی داشت حتما در قسمت نظرات اعلام کنید. حالا وب سایت آکادمی آی تی یک بخش داره برای فونت ها و اگر اینجا دقت کرده باشید فونت های فارسی هست که به صورت بهینه آورده شدند 

 

 

و شما میتونید بولدشون کنید ،رنگشون رو عوض کنید ،اندازه اش رو تغییر بدید و اینجا میتونید همه رو تست کنید

 

 

اگر خواستید پکیجش رو میتونید کامل دانلود کنید .من اینجا دانلودش میکنم 

فایلمون رو باز میکنیم و در اینجا فرمت های مختلف فونتمون رو میبینیم 

 

 

من در اینجا از yekan استفاده میکنم 

اینها رو در فولدر فونتز هم قرار میدم 

و میندازم در فولدر فونتز

 

 

حالا میریم وارد برکت میشیم ، من از این fontface قبلی کپی میگیرم  در زیرش paste میکنم.اسمش رو میگذارم yekan ،باز هم میگم این اسم دلبخواهیه و هرچی دلتون میخواد میگذارید .حالا ما در اینجا eot داریم  برای یکان ttf هم داریم woff2 نداریم ،پس من به این قسمت احتیاجی ندارم.برای woff هم Yekan رو قرار میدم و svg هم داریم حالا میتونیم از svg هم استفاده کنیم 

 

@font-face{ font-family:"Lulo"; src:url('../fonts/Lulo Clean W01 One.eot'); /*IE9*/ src:url('../fonts/Lulo Clean W01 One.eot?#iefix') format('embedded-opentype'),/*IE6-IE8*/ url('../fonts/Lulo Clean W01 One.woff') format('woff'), url('../fonts/Lulo Clean W01 One.woff2') format('woff2'), url('../fonts/Lulo Clean W01 One.ttf') format('truetype'), url('../fonts/Lulo Clean W01 One.otf') format('opentype'); } @font-face{ font-family:"Yekan"; src:url('../fonts/Yekan.eot'); /*IE9*/ src:url('../fonts/Yekan.eot?#iefix') format('embedded-opentype'),/*IE6-IE8*/ url('../fonts/Yekan.woff') format('woff'), url('../fonts/Yekan.ttf') format('truetype'), url('../fonts/Yekan.svg') format('svg'); } p{ font-family: 'Yekan',Lulo ; }

در index ام یک header ایجاد میکنم و مینویسم آکادمی آی تی

  

آکادمی آی تی

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione maiores quo a lias non, aspernatur soluta facilis similique aut quidem id eius esse porro eaque veniam ipsum earum necessi tatibus possimus. Aspernatur!

آکادمی آی تی Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione maiores quo alias non, aspernatur soluta facilis similique aut quidem id eius esse porro eaque veniam ipsum earum necessitatibus possimus. Aspernatur!

حالا میریم وارد برکت میشیم ، من از این fontface قبلی کپی میگیرم  در زیرش paste میکنم.اسمش رو میگذارم yekan ،باز هم میگم این اسم دلبخواهیه و هرچی دلتون میخواد میگذارید .حالا ما در اینجا eot داریم  برای یکان ttf هم داریم woff2 نداریم ،پس من به این قسمت احتیاجی ندارم.برای woff هم Yekan رو قرار میدم و svg هم داریم حالا میتونیم از svg هم استفاده کنیم 

 

@font-face{ font-family:"Lulo"; src:url('../fonts/Lulo Clean W01 One.eot'); /*IE9*/ src:url('../fonts/Lulo Clean W01 One.eot?#iefix') format('embedded-opentype'),/*IE6-IE8*/ url('../fonts/Lulo Clean W01 One.woff') format('woff'), url('../fonts/Lulo Clean W01 One.woff2') format('woff2'), url('../fonts/Lulo Clean W01 One.ttf') format('truetype'), url('../fonts/Lulo Clean W01 One.otf') format('opentype'); } @font-face{ font-family:"Yekan"; src:url('../fonts/Yekan.eot'); /*IE9*/ src:url('../fonts/Yekan.eot?#iefix') format('embedded-opentype'),/*IE6-IE8*/ url('../fonts/Yekan.woff') format('woff'), url('../fonts/Yekan.ttf') format('truetype'), url('../fonts/Yekan.svg') format('svg'); } p{ font-family: 'Yekan',Lulo ; }

در index ام یک header ایجاد میکنم و مینویسم آکادمی آی تی

  

آکادمی آی تی

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione maiores quo a lias non, aspernatur soluta facilis similique aut quidem id eius esse porro eaque veniam ipsum earum necessi tatibus possimus. Aspernatur!

آکادمی آی تی Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione maiores quo alias non, aspernatur soluta facilis similique aut quidem id eius esse porro eaque veniam ipsum earum necessitatibus possimus. Aspernatur!

 


 

مثلا من در اینجا یکی رو انتخاب میکنم 

 

 

بر روی این علامت پلاس کلیک کنید و میبینید یک چیزی این پایین ظاهر میشه 

روش کلیک میکنیم .حالا اینجا به صورت STANDARD و @import اومده استفاده کرده و شما رو راهنمایی میکنه

به همون شکل هست فقط اینجا دیگه javascript ای نداریم. اینجا سرعت لود فونت هم زده مثلا fast و سریع هست. شما میتونید اینجا بولدش رو بگیرید یا همون regular به صورت معمولی باشه .دانلودش کنید دانلودش کردید میتونید به همین صورت در فولدر فونت تون قرار بدید

حالا برای چی من همچین کاری میکنم؟اولا حالا خیالتون راحته ،احتمال که اصلا نداره و خیلی احتمالش کمه که گوگل بیاد توی قسمت فونتش down شه.یک صدم درصد هم احتمال بدیم اگه down شه ما اینها رو در سرور خودمون آپلود کردیم.حالا قسمت مهمش اینه که من اگه به اینترنت وصل نباشم این فونت ها رو نمیخونه .اگر به اینترنت وصل نباشم و ازین تگ لینک و@import ای که داریم یا همون javascript ای که داشتم استفاده کنم، اینها لود نمیشه دیگه.
پس میایم فونتش رو دانلود میکنیم و در فولدر فونتم قرار میدم و معمولا فرمت های زیادی نداره مثلا من درون سایت eot و svg و اینها همه رو گرفتم .در اینجا معمولا ttf ای چیزی هست و به همون سادگی ازش استفاده میکنیم.

 

 

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

 

سبد خرید

سبد خرید شما خالی است.

دریافت مشاوره رایگان