این آموزش در تاریخ ۱۴۰۲/۰۶/۲۸ آپدیت شده است.
آموزش نحوه اضافه کردن فونت دلخواه در سایت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه اضافه کردن فونت دلخواه در سایت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 تعریف وب فونت
- 2 فرمت های مختلف یک فونت وب
- 3 جدول پشتیبانی مرورگرها از فرمت های فونت وب
- 4 نحوه تبدیل فرمت TTF به دیگر فرمت ها
- 5 استفاده از دستور Font-Face@ برای تعریف فونت ها
- 6 مثال از نحوه اضافه کردن فونت دلخواه در سایت
- 7 نحوه تعریف همزمان چندین فونت برای سایت
- 8 نحوه وزن دادن به فونت ( نازکی و کلفتی فونت )
- 9 دانلود فونت + مثال این آموزش
- 10 نکات و توضیحات
تعریف وب فونت
خب دوستان ما در این جلسه ( نحوه اضافه کردن فونت دلخواه در سایت ) میخوایم یاد بگیریم که چجوری میشه یک یا چندین فونت دلخواه رو بروی سایت نصب کرد ( منظور از نصب در اینجا یعنی اضافه کردن چند خط کد CSS هستش )
پس بطور کلی به فونت هایی که در فضای وب و بروی سایت ها نصب و استفاده میشه بهش میگیم وب فونت یا به انگلیسی Web Font ، همین تموم شد رفت.
هر فونتی که با فرمت TTF داشته باشید خیلی راحت میتونیم به فرمت های دیگه تبدیل و بروی سایت نصبش کنیم و اصلا اینجوری نیست که فکر کنید فقط یسری فونت های خاص هستند برای اینکار، نه کلا هرفونتی داشته باشید میشه روی سایت نصبش کرد.
Free-Learn
فرمت های مختلف یک فونت وب
ما برای اینکه بتونیم از یک فونت دلخواه بروی سایتمون استفاده کنیم باید از فونت مورد نظرمون چندین فرمت مختلف داشته باشیم، که این فرمت ها به شرح زیر می باشند :
- فرمت WOFF و WOFF2بیشترین سازگاری و پشتیبانی رو در مرورگرها داره. ( از هیچی فرمتی هم استفاده نکرده باشید باید حتما از این فرمت استفاده کنید )
- فرمت EOT فقط بروی مرورگر اینترنت اکسپلورر یا IE پشتیبانی میشود ( مرورگر IE هم که خدابیامرزدش بهتره در موردش صحبت نکنیم ) ( دیگه منم تو جدول نیاوردمش )
- قبلا فرمت SVG هم بود ولی خب این فرمت کلا از رده خارج شده ( دیگه منم تو جدول نیاوردمش )
| نوع فرمت | توضیح |
|---|---|
| TTF | مخفف TrueType Font یک فرمت استاندارد که توسط مایکروسافت و اپل ایجاد شده این فرمت بیشترین استفاده رو در سیستم عامل های ویندوز ( مایکروسافت ) و مک ( اپل ) دارد |
| OTF | مخفف OpenType Font ساخته شده از فرمت TTF و متعلق به مایکروسافت |
| WOFF | مخفف Web Open Font Format از ترکیب ۲ فرمت TTF و OTF بصورت فشرده درست شده |
| WOFF2 | همون WOFF هست فقط با فشرده سازی بیشتر |
سوال : خب این همه فرمت برای چیه؟ مگه نمیشه فقط از ۱ یا ۲ تا از این فرمت ها استفاده کرد؟؟ یعنی حتما باید همه فرمت های زیر رو داشته باشیم.
پاسخ : خب میدونی تمام هدف اینه که فونت مورد علاقه ما بدون هیچ مشکلی و بطور کاملا صحیح بروی تمامی مرورگرهای بازدید کنندگان سایت، نمایش داده شود، فقط همین ( پس حتما باید از ۲تا فرمت ( woff و woff2 ) استفاده کرده باشید )
Free-Learn
جدول پشتیبانی مرورگرها از فرمت های فونت وب
در ادامه آموزش نحوه اضافه کردن فونت دلخواه در سایت میخوایم با جدول پشتیبانی مرورگرهای اینترنتی از فرمت های مختلف یک وب فونت آشنا شویم.
| فرمت | Chrome | Firefox | Opera | Safari | Edge |
| TTF / OTF | بله | بله | بله | بله | بله |
| WOFF | بله | بله | بله | بله | بله |
| WOFF2 | بله | بله | بله | بله | بله |
Free-Learn
نحوه تبدیل فرمت TTF به دیگر فرمت ها
خب اگه الان شما از فونت موردنظرتون فرمت های woff و woff2 رو دارید خب پس این مرحله رو رها کنید و برید مرحله بعدی.
ولی اگه از فونتتون تنها فرمتی که دارید فرمت TTF هستش خب باید این فرمت رو به دیگر فرمت ها ( مثه WOFF و.. ) تبدیل کنید.
اگه فقط فرمت TTF فونت رو دارید خب خیلی راحت الان با استفاده از سایتی که در ادامه معرفی میکنم میتونید به راحتی فونتتون رو به دیگر فرمت ها تبدیل کنید.
پس در مرحله اول باید وارد سایت transfonter.org بشید
بعدش در همون ابتدا یه دکمه آبی رنگ به اسم ” Add fonts ” هستش که باید روش کلیک کنید و فایل فونتتون رو بهش بدید.
فایل فونت رو که از سیستم تون انتخاب و بهش دادید دیگه بعدش خودش خودکار آپلودش میکنه و بعدش در تصویر زیر من شماره گذاری کردم و در ادامه توضیح میدم :
- اون میشه فایل فونتی که بهش دادیم و الان آپلودش کرده و آماده تبدیل هستش
- در اون قسمت باید فرمت های مورد نیازمون رو تیک بزنیم، که من فقط همون woff و woff2 رو تیک زدم
- و در نهایت باید روی دکمه Convert کلیک کنیم تا عمل تبدیل انجام بشه
بعد از اینکه عمل تبدیل انجام شد، یه باکس بهتون نشون میده که میتونید فایل فونت رو دانلود کنید یاهم میتونید با کلیک بروی گزینه ” Preview ” یه پیش نمایش از فونت رو ببینید.
تموم شد رفت، به همین راحتی! حالا اگه محتویات فایل دانلود شده رو نگاه کنید میبینید که فونت رو به ۲ فرمت woff و woff2 تبدیل کرده و حتی خودش یه فایل CSS داده که داخل نحوه تعریف فونت هم قرار داره.
- این فایل که اسمش demo هست در واقع یه پیش نمایش از همین فونتی هست که تبدیل شده
- فایل CSS که شامل دستورات و نحوه تعریف فونت هستش
- اینم که دیگه فایل فونت مون هستش که به فرمت های woff و woff2 تبدیل شده
Free-Learn
استفاده از دستور Font-Face@ برای تعریف فونت ها
خب ما الان از فونت موردنظرمون فرمت های مورد نیاز رو بدست آوردیم، الان فقط مونده تعریف و آدرس دهی فونت ها با استفاده از ویژگی Font-Face@
پس علی یارتون همه فونت هارو بزارید داخل یک پوشه بعد اون پوشه رو بزارید کنار صفحه وبتون و در ادامه میریم برای آدرس دهی فونت ها
مرحله اول » تعریف یک نام دلخواه برای فونت و آدرس دهی فرمت های مختلف فونت
باید برای فونت مون یک نام خانوادگی ایجاد کنیم که از این به بعد هرکجای سایتمون خواستیم ازش استفاده کنیم کافیه از همون نام استفاده کنیم. به همین راحتی !
همچنین باید مسیر فایل های فونت رو که فرمت های مختلفی براش ایجاد کردم رو بطور دقیق آدرس دهی کنیم که بتونیم در واقع فونت مون رو داخل CSS فراخوانی کنیم.
- شکل کلی برای تعریف نام یک فونت و مسیردهی فایل های فونت
|
1 2 3 4 |
@font-face { font-family: 'نام فونت'; src: url('مسیر فونت') format('فرمت فونت'); } |
خب پس همانند شکل کلی بالا ما با استفاده از ویژگی font-face@ اول یک نام برای فونت مون مشخص میکنیم و بعدش میایم و دونه به دونه فایل ها و فرمت های فونت مون رو مسیردهی و فراخوانی میکنیم.
مثال شماره ۱ : تعریف نام فونت و مسیردهی فایل های فونت
|
1 2 3 4 |
@font-face { font-family: 'MyFont'; src: url('Font_File.woff') format('woff'), url('Font_File.woff2') format('woff2'); } |
مرحله دوم » صدا زدن نام فونت در هرکجای سایت که خواستیم
حالا نوبت میرسه به نحوه فراخوانی یا صدا زدن فونتمون، برای فراخوانی فونت کافیه هرکجای سایت که میخواید ازش استفاده کنید نامش رو صدا بزنید.
مثلا من میخوام فونت تگ های H2 در سایت بشه همون فونتی که در مثال بالا تعریف کردیم، پس بصورت زیر عمل میکنم :
|
1 2 3 |
h3{ font-family: MyFont; } |
تموم شد رفت و به همین راحتی!
Free-Learn
مثال از نحوه اضافه کردن فونت دلخواه در سایت
مثال شماره ۱ : تعریف و فراخوانی فونت شماره ۱ دلخواه من
|
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
نحوه تعریف همزمان چندین فونت برای سایت
یعنی چی تعریف همزمان چندین فونت!؟ یعنی اینکه ما چندین فونت برای سایتمون تعریف میکنیم بعد اگه بفرض مثال فونت شماره ۱ به هر دلیلی حالا مشکلی براش پیش اومد و نتونست فراخوانی شه فونت شماره ۲ فراخوانی شه.
و اگه بفرض مثال فونت شماره ۲ نتونست فراخوانی شه فونت شماره ۳ مون فراخوانی شه و …
سعی کنید حداقل ۲ فونت استفاده کنید تا اگه اولی به هردلیلی اوکی نبود فونت دومی بتونه جایگزین شه. تعریف زیاد فونت ها ( مثلا ۱۵ تا تعریف کردیم ) این اصلا نیاز نیست و جالبم نیست چون تاثیر زیادی در سرعت بارگذاری سایت داره.
مثال : استفاده از چندین فونت ( فونت جایگزین )
|
1 2 3 4 |
.Box1{ font-family: FontMan1 ,FontMan2; text-align:center; } |
نام فونت های چند کلمه ای
در ادامه ی آموزش نحوه اضافه کردن فونت دلخواه در سایت یک نکته مهمی در مورد نام فونت ها وجود داره، اونم اینکه باید حواستون به نام فونت های چند کلمه ای و با فاصله باشه.
این فونت هارو بهتره برای بحث بهینه بودن درون دوبل کوتیشن گذاشت یعنی درون ” “، و اگه داخل دوبل کوتیشن قرار نگیره ممکنه در برخی مرورگرها بکل اون فونت نمایش داده نشه.
یا ممکنه حتی اگه داخل دوبل کوتیشن نزارید بازم مشکلی نداشته باشه و نشون بده ولی خب بطور کلی برای بحث بهینه و استاندارد بودن میگن باید حتما داخل دوبل کوتیشن بزارید.
همیشه سعی کنید در نام فامیلی که برای فونت تان ایجاد مینمایید هیچ فاصله ای نباشد تا در فراخوانی آن مشکلی نداشته باشید.
|
1 2 3 |
p{ font-family : "My Best Font",myfont2; } |
Free-Learn
نحوه وزن دادن به فونت ( نازکی و کلفتی فونت )
خب در ادامه آموزش نحوه اضافه کردن فونت دلخواه در سایت میخوایم یاد بگیریم که چگونه میتوان وزن یک فونت رو کم و زیاد کرد.
فونت ها میتونن وزن داشته باشند، مثلا میتونن کلفت باشن یا میتونن لاغر باشند، که ما با استفاده از ویژگی font-weight میتونیم وزن فونت مون رو مشخص نماییم.
ولی یک نکته اینجا وجود داره و خیلی هم مهمه، اینکه هر فونتی رو نمیشه همینجوری وزنش رو کم و زیاد ( چاق یا لاغر ) کرد، تنها به شرطی میتونیم اینکارو کنیم که فایل فونت خودش در وزن های مختلفی وجود داشته باشد.
مثلا ما فونت داریم که در وزن های بفرض مثال ( خیلی لاغر – لاغر – نرمال – کمی چاق – چاق – خیلی چاق ) هستند، پس باید دونه به دونه این فونت هارو که در وزن های مختلفی هستند در سایت قرار بدیم و تعریف شون کنیم.
بعدش دیگه هرکجا که خواستیم مثلا فونت مون رو پررنگ یا بولد شده یا در واقع همون حالت چاق شدش نشون بدیم باید از ویژگی font-weight استفاده نماییم.
پس در مرحله اول اونجایی که داریم فونت رو تعریف میکنیم با استفاده از ویژگی font-weight مشخص میکنیم که وزن فونت ما چه اندازه ای است ، لطفا به دستورات زیر توجه نمایید.
|
1 2 3 4 5 |
@font-face { font-family: 'myfont2'; src: url('myfont/font2.woff') format('woff'); font-weight: bold; } |
یاهم میتونیم بطور مستقیم فایل خوده همون فونتی رو تعریف کنیم که خودش در وزن مثلا بولد یا چاق هستش
|
1 2 3 4 |
@font-face { font-family: 'myfont2'; src: url('myfont/Font_Bold.woff') format('woff'); } |
حال در مرحله ی دوم میتونیم دیگه اونجایی که میخوایم فونت رو صدا ( فراخوانی ) کنیم نیز با استفاده از همین ویژگی font-weight وزن فونت مون رو مشخص کنیم.
|
1 2 3 4 |
p{ font-family:myfont; font-weight:bold; } |
تنظیم وزن فونت بصورت عددی
ما بصورت عددی نیز میتونیم وزن فونت مون رو مشخص کنیم، یعنی مثلا بگیم وزن فونت مون ۶۰۰ باشه یا ۸۰۰ – که این عدد میتواند بین ۱۰۰ تا ۹۰۰ باشد.
|
1 2 3 4 |
p{ font-family:myfont2; font-weight:600; } |
Free-Learn
دانلود فونت + مثال این آموزش
خب دوستان گلم به پایان آموزش نحوه اضافه کردن فونت دلخواه در سایت رسیدیم، امیدوارم که هیچ مشکل خاصی در این آموزش نداشته باشید.
برای دانلود فونت ها و مثالی که در این آموزش استفاده شده، جهت راحتی و آشنایی بهتر شما با نحوه اضافه کردن فونت دلخواه لطفا اینجا کلیک کنید.
Free-Learn
نکات و توضیحات
- فرمت woff و woff2 بیشترین سازگاری و پشتیبانی رو در مرورگرها داره، سعی کنید حتما و فقط از این ۲فرمت استفاده کنید، و دیگه بقیه فرمت ها نیاز نیست.
- فرمت EOT فقط بروی مرورگر اینترنت اکسپلورر یا IE پشتیبانی میشود، خوده مرورگر IE هم دیگه میدونید خیلی وقته به رحمت خدا رفته، اگه هم کسی رو میشناسید که هنوز از مرورگر اینترنت اکسپلورر استفاده میکنه، من همینجا اعلام میکنم که این شخص رو زنده میخوام 😎
- قبلا فرمت SVG هم بود ولی خب این فرمت کلا از رده خارج شده ( پس اینم نباید ازش استفاده کنید )
