پکیج فونت های مطرح فارسی برای وبسایت ( کیفیت بسیار بالا و اصلاح شده ) + آموزش
پیشنهاد : دانلود پکیج کامل 1700 فونت های فارسی غیر وب
یکی از مشکلاتی که طراحان سایت با آن روبرو بودند , عدم توانایی انتخاب فونت دلخواه در سالیان پیش در محیط وب بود . طراحان فقط میتوانستند از 3 فونت Tahoma , Arial و Mono Type استفاده کنند .
خوشبختانه چند سالی میشه که با روی کار اومدن Css3 این مشکل به طور کلی رفع شده و طراحان وب به راحتی میتوانند از هر فونتی که دوست دارند در دیزاین خود به کار برده و این فونت ها قابل نمایش برای تمامی مرورگر ها و Device ها می باشند .
اما مشکل بعدی برای این کار , تبدیل فونت ها از فرمت TTF به فرمت های SVG , WOFF , EOT ( برای نمایش در تمامی مرورگرها ) میباشد . وقتی فونت TTF به این فرمت ها تبدیل میشود , فونت های کیفیت بالا به فونت هایی با کیفیت پایین و تقریبا غیر خوانا تبدیل میشود .
برای این ساعت از سایت اسکریپت دات کام , یک پکیج 40 تایی از فونت های تبدیل شده ( با بالاترین کیفیت ) را در اختیار شما عزیزان قرار میدهم که امیدوارم مورد پسند شما قرار گیرد .
این پکیج برای اولین بار با بالاترین کیفیت فونت و کاملا اصلاح شده , به صورت رایگان از این سایت منتشر میشود .
آموزش قرار دادن فونت ها در وب سایت :
ابتدا فونت ها رو در لینک انتهای همین پست دانلود نمایید .
سپس با توجه به نوع فونت دلخواه خود , آدرس های مربوطه را در کد زیر جایگزین نمایید و سپس کل کد را در قسمت Css سایت خود قرار دهید .
توجه : در قسمت font-family اسمی برای فونت خود انتخاب نمایید . طبیعتا بهتر است به همان اسم اصلی فونت باشد . مثلا Nasim .
@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 میباشد :
@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 ) استفاده نمایند :
h1{
font-family:Nasim;
}
البته بهتر است بعد از فونت جدید , فونت پیش فرض tahoma را هم بنویسیم تا اگر به هر دلیلی فونت جدید اجرا نشد , از فونت tahoma استفاده شود .
یعنی به صورت زیر :
h1{
font-family:Nasim, Tahoma;
}
نکته : اگر بخواهیم تمام سایت به طور کلی دارای فونت نسیم باشند , باید به تگ body , این Attribute و Value را بدهیم . یعنی :
body{
font-family:Nasim, Tahoma;
}
نکته بسیار مهم : در هنگام نوشتن نام فونت ها به حروف بزرگ و کوچک دقت فرمایید . ابتدای هر فونت با حرف بزرگ میباشد , پس باید در css هم به همان صورت نوشت . در صورت عدم انجام این کار , فونت در وبسایت کار نخواهد کرد .
پخش اختصاصی
گرداوری : وحید مجیدی
عالی بود ,خیلی لذت بردم !
سلام دوست عزیز. بوت استرپ اصلا زبان برنامه نویسی نیست. بوت استرپ یک تمپلت یا قالب کامل و ریسپانسیو وب است که پکیجی است از کدهای آماده html5 و css3 و javascript که بسته به سلیقه شما میتواند به هر ظاهر و نمایی شخصی سازی شود. این وب تمپلت میتواند هم برای ساخت وب سایتهای ریسپانسبو و هم برای ساخت اپلیکیشنهای موبایلی با هر سیستم عاملی از اندروید گرفته تا آی او اس و ویندوزفون مورد استفاده قرار گیرد. بوت استرپ ابتدا توسط طراحان توئیتر و برای استفاده همین شبکه اجتماعی طراحی شد اما بعد با توجه به دارا بودن تمامی المانهای مورد نیاز طراحان از منوهای گوناگون گرفته تا لیست ویوهای متنوع و حتی منوهای آبشاری و …. مورد توجه طراحان وب قرار گرفته و تبدیل به خمیر مایه بسیاری از وب سایتها شد. اکنون بوت استرپ تبدیل به رقیب بسیار قدرتمندی برای سایر پلتفرمهای مشابه نظیر جی کوئری موبایل گردیده است. البته جی کوئری موبایل ظاهر چشم نوازتر و جلوه های بصری بیشتری دارد.
و اما سؤال اصلی شما:
زبان php یک زبان تحت وب سمت سرور می باشد و از این لحاظ با زبان جاوااسکریپت که یک زبان تحت وب سمت کلاینت میباشد تفاوت بسیار دارد.
از پی اچ پی برای نوشتن برنامه هایی استفاده میشود که در سمت سرویس دهنده اجرا میشوند مثلا برنامه ای که سرورهای گوگل را کنترل میکنند اما از جاوااسکریپت برای نوشتن کدهایی استفاده میگردد که بر روی کامپیوتر شما و هنگام مرور وب مرورگر را کنترل میکنند. پس می بینید که تفاوت فاحشی دارند. مگر شما میخواهید برای سرورها برنامه بنویسید؟
اگر قصدتان ساخت وب سایتهای زیبای ریسپانسیو یا اپ های موبایلی زیباست پیشنهاد می کنم از جی کوئری موبایل استفاده کنید. کافیست در اینترنت سرچ کنید:
Mobile jquery
سلام خسته نباشید ممکنه بنده رو راهنمایی کنید
css,html رو کامل میدونم و با بوت استرپ در حدی که بتونم سایتی که براساسcss,html پیاده سازی شده رو ریسپانسیو کنم ، آشنایی دارم
و همینطور تبدیل این سایت ها به ووردپرس. و در حال فراگیر چاوا اسکریپت و جی کوئری هستم
الان من قصد دارم دوره های php فرا بگیرم ولی نمیدونم چه زبان های دیگه ای پیش نیاز هست تا بعدش به سمتphp برم؟
چون در بعضی سایت ها گفته شده باید بوت استرپ رو کامل آشنایی داشته باشیم ولی من وقتی درباره این زبان مطالعه کردم خودش یک زبان کامل برای طراحی سایت هست و من کاملا گمراه شدم که….
سلام دوست عزیزم
حداقل زبان هایی که باید بدونید html – css – js – php و sql هست
jquery بسیار مفید و کاربردی هست که کتابخانه ای از جاوا اسکریپت میباشد . کار را بسیییییییار راحت میکند اما شما اگر جاوا اسکریپت را 100% بلد باشید دیگر نیازی به jquery ندارید
سلام
فون این سایت چیه ایران سنس
shop.2sweb.ir
یکان هست دوست عزیز
نه یکان نیست!
font-family: ‘IRANSans’,tahoma;
سلام
من یه جایی خوندم که:
برای اسفاده از فونت در محیط وب، منظورم در وب سایت ها است، سه روش وجود داره:
یکی آپلود و اتصال فونت به وب سایت که مطالب وب سایت را برای همه بینندگان با اون فونت نمایش میده
.
دوم نوعی اتصال فونت به وب سایت هست که فقط در صورت موجود بودن فونت بر روی کامپیوتر بینندگان مطالب وب سایت با اون فونت به نمایش در میاد.
.
روش سوم را هم فراموش کردم.
خب الان بهم بگید این صحبت ها درسته؟
اگه درسته روش وارد کردن فونت ها را (در هر سه روش) توضیح بدید.
همه جا خاصیت font-face استفاده میشه؟
ممنون میشم پاسخ بدید.
سلام دوست عزیزم
در روش اول و دوم فقط میتوان از دو فونت tahoma و arial استفاده نمود . چون این دو فونت که قابلیت ساپورت زبان فارسی را دارند , در تمامی ویندوز های قدیمی و جدید موجود می باشد
اما اگر میخواهید از فونت هایی مانند yekan , titr , homa , vahid و … استفاده نمایید , میبایست حتما با استفاده از @font-face آن را به مرورگر شناخت .
در اصل این متود باعث میشود تا قونت مورد نظر بر روی مروگر کاربر دانلود و سپس اجرا شود
ممنونم بابت آموزش بخش فونت ها
عالی بود
سلام و وقت بخیر
من به یه فونت فارسی نیاز دارم که از اعداد فارسی پشتیبانی نکنه و اعداد رو انگلیسی نمایش بده
امکانش هست فونتی رو معرفی کنید؟
ممنونم
پلاگینی جی کوئری در این باره وجود داره . میتونید از اون استفاده کنید
سلام.
ممنونم.
سلام: سایت بسیار پرمحتوایی دارید ، بنده برای طراحی بنر احتیاج به فونت دارم ، لطفاً در صورت امکان فونت های مناسب طراحی بنر و اسلاید و… را هم بگذارید.
سپاسگذارم
سلام دوست عزیزم
من متوجه منظورتون نشدم .
اگر منظورتون فونت های ویندوزی هست , بالای همین مطلب لینکش رو گذاشتم
1700 فونت فارسی غیر وب
ممنون
مشکلم حل شد
ممنون
دستت درد نکنه، کاش svg هم میذاشتی ولی
بعضی فونت ها در سایت ظاهرشون بد شکل میشه برای اصلاح اونها چکار باید کرد؟
بعضی از فونت ها به دلیل نازک بودنشان در مانیتور هایی که دارای تراکم پیکسلی پایین هستند , زیاد جالب به نظر نمیرسن
طبیعی هست دوست عزیزم
سعی کنید برای سایز های بزرگ از این فونت ها استفاده کنید
مثلا بالای 15 پیکسل
font-size:15px
بسیار مفید بود. بسیار بسیار ممنون :)
سلام و ممنون بابت این پست مفید
من یه سوال تخصصی در مورد این فونتا داشتم که واقعا درگیر کرده منو.
وقتی میخوام یه قالبی برای یک وبلاگ درست کنم ، آدرس فونت رو در داخل فایل سی اس اس چطوری بدم . توضیح اینکه : فونت ها در سایت x آپلود شدند ، حال انکه من میخوام از این فونت ها در استایل یک قالب وبلاگ استفاده کنم . اما به شکل زیر جواب نمیده و فونت ها رو نمیخونه .
@font-face {
font-family: ‘Nasim’;
src: url(‘http://x.com/font/Nasim.eot?#’) format(‘eot’),
url(‘http://x.com/font/Nasim.woff’) format(‘woff’),
url(‘http://x.com/font/Nasim.ttf’) format(‘truetype’);
font-style:normal;
font-weight:normal;
}
=====================
در چنین مواردی چطوری باید آدرس داد تا فونت ها رو از سرور یک سایت دیگرم بخونه . چون وبلاگ که هاست نداره که من بخوام روش پوشه فونت آپلود کنم .
ممنون
الان روشی که انتخاب کردین درسته دوستم . دمو بدین ببینم
فونت تاهما برای وب رو از کجا میشه دانلود کرد؟
لازم به دانلود نیست . روی تمامی سیستم عامل ها به صورت پیش فرض نصب هست . فقط کافیه بنویسید font-family:tahoma
ممنون خوب بود
ولی متاسفانه تنوع فونت های فارسی کم
فونت کودک خیلی پرز و سوراخ داره الان اصلاح شده بهترش تو وب هست
ببخشید آقای مجیدی فونت liner و یک فونت دیگر رو تست کردم خیلی خوب بهینه شده برای وب ولی اعدا فارسی هستند راهی نیست اعدا انگلیسی کنیم
نه دوست عزیزم . تمامی اعدادش فارسی هستن
اصلا دلیلی نداره که لینک فونت رو fetch کنی توی گوگل !!
با من هستین ؟
آقای مجیدی من مشکل با فایل .woff دارم نمیدونم چرا تو هر سایتی که ازش استفاده میکنم جواب نمیده و به عنوان broken link شناسایی میشه. منظورم فونت شما نیست کلا همیشه همین مشکل رو دارم و هنوز براش جوابی پیدا نکردم و اینکه من .net کار میکنم. به نظر شما میتونه دلیلش کیفیت فونت باشه؟
ممنون
من منظورتونو متوجه نشدم . یعنی برای دانلود میزارید ؟
اگر منظورتون برای فونت سایت هست , به خاطر اینه که بعضی از مرورگر های woff رو ساپورت نمیکنن
منظورم سایت هایی که برای مشتری طراحی میکنم و به عنوان فونت نوشته توی سایت استفاده میکنم.
تو هر مرورگری اصلا فرقی نداره جواب نمیده و اینکه وبمستر گوگل و میکروسافت و نرم افزار Acunetix این پسوند رو به عنوان لینک شکسته یا همون broken link شناسایی میکنن در صورتی که کنار اون من همیشه 2 نوع فونت دیگه هم قرار میدم مثل ttf و eot و اینا به خوبی شناسایی میشن
موندم چرا جواب نمیده
دوست عزیزم واقعیتش اصلا متوجه حرفتون نمیشم . شما کدش رو توی css وارد میکنید با @font-face
پس هیچ ربطی به لینک شکسته نداره . چون لینک شکسته برای html هست
به هر حال شما باز هم فایلتون که با پسوند woff هست رو چک کنید شاید آدرس رو اشتباه وارد کردید .
در ضمن میتونید از پستی که من در سایت گذاشتم برای آموزش اضافه کردن فونت استفاده نمایید .
با تشکر
@font-face {
font-family: ‘BYekan’;
src: url(‘/Style/Font/BYekan.eot?#’) format(‘eot’), /* IE6�8 */
url(‘/Style/Font/BYekan.woff’) format(‘woff’), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url(‘/Style/Font/BYekan.ttf’) format(‘truetype’); /* Saf3�5, Chrome4+, FF3.5, Opera 10+ */
}
@font-face {
font-family: ‘BKoodakBold’;
src: url(‘/Style/Font/BKoodakBold.eot?#’) format(‘eot’), /* IE6�8 */
url(‘/Style/Font/BKoodakBold.woff’) format(‘woff’), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url(‘/Style/Font/BKoodakBold.ttf’) format(‘truetype’); /* Saf3�5, Chrome4+, FF3.5, Opera 10+ */
}
من ان کد رو همیشه و توی همه پروژه هام استفاده میکنم. اگه دقت کنید متوجه میشید که 3 پسوند استفاده میکنم. eot , woff, ttf
توی یه سری نرم افزار ها و یا وبستر ها میشه تمام آدرس های تولید شده رو شناسایی کرد که ببینیم آیا درست هستند یا نه و اگه جایی مشکل داشته باشه بهمون میگه. مثلا وبمستر گوگل تو قسمت fetch as google آدرس ها رو که فچ میکنم آدرسی که این فونت woff وجود داره رو not found میزنه در صورتی که دقیقا وجود داره
http://www.darbarg.com/Style/Font/BYekan.woff Font Not found
حالا این آدرس رو بزن
http://www.darbarg.com/Style/Font/BYekan.ttf
دقیقا آدرس دهی جفتشون یک جور هست و کتار همدیگه آپلود شدن. اما نمیدونم چرا فونت با پسوند woff شناسایی نمیشه
امکان داره از سرور این پسوند جلوش گرفته شده . یه تست روی جای دیگه بکنید
با سلام و احترام
آقای مجیدی من هرکاری میکنم فونت سایتم عوض نمیشه
اکثر قالب هایی که به صورت HTML5 هست فایل css جداگانه برای فونت دارند
لطفا طریقه عوض کردن فونت اینگونه سایت هارو هم بگید
یه نمونه ازین قالب هارو گذاشتم واسه دانلود
ممنون بابت وقتتون
http://chat.chatcenter.ir/j/HTML.zip
دوست عزیز همینطوریه و فقط کافیه آدرس فایل رو در کدنویسی عوض کنید . کمی تو نت سرچ کنید و نحوه ی آدرس دهی html دو یاد بگیرید حله
با سلام و احترام
ممنون استاد
عالی بود
وظیفس دوستان گلم …
سلام
واقعا قابل تقدیر بود
ممنون
سلام
خیلی ممنون.
عالی بود با سپاس