یکی از مشکلاتی که طراحان سایت با آن روبرو بودند , عدم توانایی انتخاب فونت دلخواه در سالیان پیش در محیط وب بود . طراحان فقط میتوانستند از 3 فونت Tahoma , Arial و Mono Type استفاده کنند .
خوشبختانه چند سالی میشه که با روی کار اومدن Css3 این مشکل به طور کلی رفع شده و طراحان وب به راحتی میتوانند از هر فونتی که دوست دارند در دیزاین خود به کار برده و این فونت ها قابل نمایش برای تمامی مرورگر ها و Device ها می باشند .
اما مشکل بعدی برای این کار , تبدیل فونت ها از فرمت TTF به فرمت های SVG , WOFF , EOT ( برای نمایش در تمامی مرورگرها ) میباشد . وقتی فونت TTF به این فرمت ها تبدیل میشود , فونت های کیفیت بالا به فونت هایی با کیفیت پایین و تقریبا غیر خوانا تبدیل میشود .
یک پکیج 40 تایی از فونت های تبدیل شده ( با بالاترین کیفیت ) را در اختیار شما عزیزان قرار میدهم که امیدوارم مورد پسند شما قرار گیرد .
این پکیج برای اولین بار با بالاترین کیفیت فونت و کاملا اصلاح شده , به صورت رایگان از این سایت منتشر میشود .
آموزش قرار دادن فونت ها در وب سایت :
ابتدا فونت ها رو در لینک انتهای همین پست دانلود نمایید .
سپس با توجه به نوع فونت دلخواه خود , آدرس های مربوطه را در کد زیر جایگزین نمایید و سپس کل کد را در قسمت Css سایت خود قرار دهید .
توجه : در قسمت font-family اسمی برای فونت خود انتخاب نمایید . طبیعتا بهتر است به همان اسم اصلی فونت باشد . مثلا Nasim .
| 2 3 4 5 6 7 8 9 10 11 12 13 | @font–face { font–family: ‘نام انگلیسی دلخواه برای فونت’; src: url(‘eot آدرس فونت با پسوند’) format(‘eot’), url(‘woff آدرس فونت با پسوند’) format(‘woff’), url(‘ttf آدرس فونت با پسوند’) format(‘truetype’); font–style:normal; font–weight:normal; } |
به عنوان نمونه برای فونت نسیم با توجه به این نکته که 3 پسوند فونت نسیم در پوشه font میباشد :
| 2 3 4 5 6 7 8 9 10 11 12 13 | @font–face { font–family: ‘Nasim’; src: url(‘fonts/Nasim.eot?#’) format(‘eot’), url(‘fonts/Nasim.woff’) format(‘woff’), url(‘fonts/Nasim.ttf’) format(‘truetype’); font–style:normal; font–weight:normal; } |
حال کافیست در css , هر قسمتی که میخواهیم فونت ما به فونت جدید تغییر پیدا کند , به آن قسمت اتربیوت font-family داده و مقدار ( value ) آن را اسم دلخواهی که قبلا به فونت داده ایم میگذاریم.
به عنوان نمونه میخواهیم تمامی H1 ها از این فونت جدید ( مثلا Nasim ) استفاده نمایند :
| 2 3 4 5 6 7 8 | h1{ font–family:Nasim; } |
البته بهتر است بعد از فونت جدید , فونت پیش فرض tahoma را هم بنویسیم تا اگر به هر دلیلی فونت جدید اجرا نشد , از فونت tahoma استفاده شود .
یعنی به صورت زیر :
| 2 3 4 5 6 7 8 | h1{ font–family:Nasim, Tahoma; } |
نکته : اگر بخواهیم تمام سایت به طور کلی دارای فونت نسیم باشند , باید به تگ body , این Attribute و Value را بدهیم . یعنی :
| 2 3 4 5 6 7 8 | body{ font–family:Nasim, Tahoma; } |
نکته بسیار مهم : در هنگام نوشتن نام فونت ها به حروف بزرگ و کوچک دقت فرمایید . ابتدای هر فونت با حرف بزرگ میباشد , پس باید در css هم به همان صورت نوشت . در صورت عدم انجام این کار , فونت در وبسایت کار نخواهد کرد .
افزونه المنت کیت چیست؟ در واقع افزودنی المنت کیت یکی از قدرتمندترین و کامل‌ترین افزودنی‌های…
افزونه سئو ویدئو وردپرس یک افزونه از شرکت یواست است که برای سئو ویدئو کاربرد…
افزونه کیف پول در ایزی دیجیتال دانلود در واقع یک افزونه هست که به سایت…
افزونه اکتسرا المنت برای المنتور ساخته شده است و امکانات بیشتری به المنتور اضافه میکند المنتور…
افزونه المنت پک چیست؟ افزونه المنت پک یک افزودنی برای صفحه ساز المنتور پرو می…
با افزونه گرویتی فرم برای وردپرس فرم های آنلاین قدرتمند جذاب با سرعت و به…
View Comments
عالیه بسیار جالب و مفیده
خیلی خوب بود ممنون
موفق و پایدار باشید.
تشکر از شما بابت سایت خوبتون
خیلی دنبال پک فونت بودم
ممنون
عالی بود ممنون
مرسی از سایت فوق العادتون
salam
عالی بود ممنون
با عرض سلام و خسته نباشید
خیلی اتفاقی با این پست شما برخورد کردم و برام مفید بود ..خواستم یه تشکری کرده باشم از زحمتتون..منم یه وبی دارم ..اگه وقت کردید بهم سر بزنید ..خوشحال میشم
http://www.iran-green-tea.ir