تبلیغات
دنیای فناوری - l-lelp
آموزش کامل تغییر فونت وبلاگ و وبسایت

اگر وبلاگ یا سایت دارید و می خواهید فونت آن را تغییر دهید و مطالب سایت و وبلاگ خود را با فونت دیگری نمایش دهید این

آموزش برای شما ساخته شده. در این آموزش ابتدا به توضیح کامل در مورد اصطلاحات می پردازم و بعد هم روش تغییر فونت را

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


در گذشته همیشه یک مشکل هنگام مشاهده ی یک


سایت وجود داشت و آن هم موجود نبودن فونت مورد استفاده ی سایتی که باز می کنید در کامیپوترتان بود یعنی شما یک سایت را


باز می کردید و فونت آن مثلا Tahoma بود در حالی که آن سایت فونت دیگری را برای سایتش انتخاب کرده بود و فونت


Tahomaرا برای زمانی که فونت مورد نظرش در کامیپوترش شما موجود نباشد انتخاب کرده بود. اما این مشکل به کم CSS3


تقریبا حل شده! اما چرا تقریبا؟ چون هنوز بعضی از مرورگرها از CSS3 پشتیبانی نمی کنند (در اینجا می توانید ببینید کدام


مرورگرها پشتیبانی می کنند و کدام نه). CSS یک زبان برنامه نویسی است و CSS3 نسخه ی (ورژن) سوم آن است. البته قبل


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


بود و البته استاندارد هم نبود. اما حال که CSS3 آمده یک راه خیلی ساده وجود که استفاده از وب فونت است که در اینجا این


مورد را کاملا آموزش می دهم.


وب فونت چیست؟

web safe fonts آموزش کامل تغییر فونت وبلاگ و وبسایت


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


و حتی اگر کامپیوتر بازدید کننده فونت مورد نظر را نداشت باز هم متن به درستی و با فونت مورد نظر نمایش داده شود! اما


چطور؟ وقتی شما از وب فونت استفاده می کنید و یک فرد سایت شما را باز می کند مرورگر آن کاربر متوجه می شود که فونت


مورد نظر در کامپیوتر وجود ندارد پس آن را از اینترنت دانلود می کند و بعد محتوای آن سایت را با فونت دانلود شده نشان می


دهد! پس دیگر با مشکل بی فونتی مواجه نمی شویم icon smile آموزش کامل تغییر فونت وبلاگ و وبسایت البته این مورد یه مشکل داره که در بالا هم به آن اشاره کردم. تعداد بسیار


کمی از مرورگرها از CSS3 پشتیبانی نمی کنند که امروزه تقریبا همه از آخرین نسخه ی مرورگرها استفاده می کنند و آخرین


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


مرورگرهایی که از آن پشتیبانی نمی کنند وجود دارد! که این راه حل توسط را awebfont توضیح داده.


نقل شده از awebfont:


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


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


های زیر می توانید آنها را از سایت های رسمیشان دریافت و بر روی وب سایت خود قرار دهید، تا تمامی دستورات CSS3 برای


این نوع بازدید کنندگان قابل نمایش باشد.


کتابخانه Modernizr قابل دریافت از آدرس  http://modernizr.com

کتابخانه Selectivizr قابل دریافت از آدرس  http://selectivizr.com


چطور از وب فونت استفاده کنیم؟


دو راه وجود دارد یکی استفاده از Api ها و یکی استفاده از fontface@


API چیست؟

API آموزش کامل تغییر فونت وبلاگ و وبسایت


وقتی که سایت گویا آی تی API را به خوبی توضیح داده چرا بنده باید دوباره توضیح بدهم؟ پس این مطلب را بخوانید تا متوجه


شوید API چیست. البته حتی اگر معنی Api را هم ندانید مهم نیست همین جوری برای اطلاعات عمومی گفتم بخوانید icon smile آموزش کامل تغییر فونت وبلاگ و وبسایت اما به هر


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



در این روش شما از یک سایت ارائه دهنده ی Api فونت کمک می گیرید در واقع شما وارد سایت می شود فونت مورد نظر


خودتان را پیدا می کنید و بعد Api آن را دریافت می کنید و در سایت خود قرار می دهید به این صورت لینک دریافت فونت مورد


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


است. سایت هایی که Api فونت های فارسی را در اختیار کاربران قرار می دهند کم نیستند اما دو مورد از معروف ترین آن


ها font-api و awebfont می باشند البته awebfont یک سایت همه کاره می باشد و در هر زمینه ای که مربوط به فونت


باشد خدمت می کند و فقط یکی از امکانات آن قرار دادن Api های فونت فارسی می باشد. اما font-api فقط Api های فونت


فارسی را ارائه می دهد. پس به این سایت ها بروید فونت مورد نظر خود را انتخاب کنید بعد باید فرمت فونت خود را انتخاب کنید و


بعد مراحلی که کمی پایین تر توضیح داده ام را پیش بروید.


از چه فرمتی برای وب فونت ها باید استفاده کنیم؟

fondst آموزش کامل تغییر فونت وبلاگ و وبسایت


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


از کدام فرمت بیشتر پشتیبانی می کنند؟ فرمت های قابل استفاده در وب فونت عبارت اند از EOT،SVG،WOFF،TTF،OTF (با


کلیک روی هر کدام از این فرمت ها می توانید میزان پشتیبانی شدن آن ها توسط مرورگرها را ببینید). فرمت های TTF و OTF


مانند هم عمل می کنند تقریبا در تمام مرورگرها به جز اینترنت اکسپلورر پشتیبانی می شوند و تنها مشکل آن ها همین مرورگر


اینترنت اکسپلورر می باشد برای حل این مشکل می توان از فرمت EOT نیز استفاده کرد یعنی هم فرمت TTF و هم فرمت EOT


را همزمان فعال کنیم البته پیشنهاد می کنم ازفرمت WOFF هم استفاده کنید چرا که فرمت WOFF یک فرمت کم حجم می باشد و


با استفاده از آن مرورگرها سریع تر فونت را دریافت می کنند و اینکار باعث می شود سایت شما سریع تر باز شود. فرمت WOFF


اگرچه مدت زیادی نیست که ساخته شده اما به دلیل مزایایی که دارد تقریبا تمام مرورگرها حتی نسخه ی ۹ و ۱۰ اینترنت اکسپلورر


از آن پشتیبانی می کنند پس با انتخاب فرمت های WOFF و TTF و EOT تمام مرورگرها از فونت شما پشتیبانی می کنند همچنین


می توانید از فرمت SVG نیز استفاده کنید چون این فرمت تقریبا در تمام مرورگرها پشتیبانی می شود و مرورگرهایی که از هیچ


کدام از فرمت های WOFF و TTF و EOT پشتیبانی نمی کنند می توانند با فرمت SVG مطالب را نمایش دهند. این نکته را هم


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


و این باعث کند شدن سایت شما بشود چرا که مرورگرها فقط فونتی که بهتر پشتیبانی می کنند را دانلود می کنند پس حتی اگر


خواستید تمام فونت ها را انتخاب کنید! در ادامه به توضیح دو روش استفاده از وب فونت پرداخته ام:



چطور از سایت های font-api و awebfont برای تغییر فونت سایت و وبلاگ استفاده کنیم؟


وقتی فونت مورد نظر را انتخاب کردید از بالا آخرین تب یعنی تب «نسخه ی تحت وب» را انتخاب کنید و بعد گزینه ی «دریافت


کد استایل به صورت دستی» را انتخاب کنید. بعد چند گزینه نمایش داده می شود که باید گزینه های TTF-EOT-WOFF را تیک


بزنید با توجه به اطلاعاتی که در بالا دادم این فونت ها از مناسب هستند البته می توانید SVG را هم تیک بزنید تا کاملا مطمئن


باشید که فونت شما در تمام گوشی ها با هر نوع مرورگری نیز پشتیبانی شود (البته مرورگر باید از CSS3 پشتیبانی کند) گزینه ی


Localهم باعث می شود که مرورگر ابتدا چک کند تا ببیند کاربر فونت مورد نظر را در کامیپوتر دارد یا خیر که این گزینه هم


دلخواه است. کمی پایین تر دو کد نمایش داده می شود من کد اول را «کد یک» و کد دوم را «کد دو» می نامم تا بعدا از آن ها با


همین نام ها استفاده کنم.

fenjon00501 آموزش کامل تغییر فونت وبلاگ و وبسایت

در سایت font-api


وقتی فونت مورد نظر را انتخاب کردید دو کد نمایش داده می شود من کد اول را «کد یک» و کد دوم را «کد دو» می نامم تا بعدا


از آن ها با همین نام ها استفاده کنم.

fenjon00503 آموزش کامل تغییر فونت وبلاگ و وبسایت


دقت کنید که اگر چه نحوه ی استفاده از font-api ساده تر است اما پیشنهاد می کنم از awebfont یک فونت را انتخاب کنید


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


حالا باید به وبلاگ یا وبسایت خود بروید و دنبال قسمتی به نام ویرایش ساختار قالب یا ویرایش قالب بگردید و در آن دنبال


<head/> بگردید. برای اینکار می توانید از Ctrl+F استفاده کنید و در کادر باز شده این عبارت را تایپ کنید.

fenjon00492 آموزش کامل تغییر فونت وبلاگ و وبسایت


بعد باید کد یک را قبل از این عبارت قرار دهید و کد دو را ابتدا در عبارت زیر قرار دهید و بعد آن را بعد از کد یک قرار دهید.

<style>
}*
;font-family:’B Vahid’,Sans-Serif
;font-size:14px
{
<style/>

fenjon00502 آموزش کامل تغییر فونت وبلاگ و وبسایت



منبع:fenjon


برچسب ها : تغییر فونت , فونت ,

نظرات () نویسنده: ɑʍɪɴ 1392/01/16 - 21:43

آخرین مطالب

» چطور با یافتن پیوست‌ های سنگین و حذف ایمیل‌ های قدیمی فضای خالی جیمیل را افزایش دهیم ( 1392/03/22 )
» تبدیل یک فیلم به تصویر متحرک با فرمت Gif در فتوشاپ ( 1392/03/2 )
» برترین موتورهای جستجوی عکس برای یافتن تصاویر مورد نظر شما ( 1392/02/20 )
» ساخت دو Folder هم نام در یک مکان ( 1392/02/17 )
» ۱۸ نکته و ترفند ناشناخته در فیس بوک ( 1392/02/10 )
» از اولین ویندوز تا ویندوز ۸: محیط ویندوزها را با هم مقایسه کنید! ( 1392/02/7 )
» 8 میلیاردر دنیای فناوری ( 1392/01/31 )
» حذف تبلیغات اینترنتی ( 1392/01/29 )
» افزایش سرعت مرورگر فایرفاکس | firefox ( 1392/01/29 )
» چگونه قابلیت Wi-Fi Hotspot را در ویندوز 8 فعال کنیم؟ نحوه انتقال اینترنت لپ تاپ به تلفن هوشمند یا تبلت ( 1392/01/26 )
» آموزش آنلاین بازی کردن Age of Empires 3 ( 1392/01/19 )
» روش هایی آسان برای بازیابی فایل های حذف شده ( 1392/01/16 )
» آموزش کامل تغییر فونت وبلاگ و وبسایت ( 1392/01/16 )
» قرار دادن تصویر در پشت صفحه ی جستوجوی گوگل (فقط کروم) ( 1392/01/16 )
» All in one چیست و چه مزیت‌ هایی دارد ؟ ( 1392/01/16 )
 
ADS

آمار وبلاگ

کل بازدید ها :
بازدید امروز :
بازدید دیروز :
بازدید این ماه :
بازدید ماه قبل :
تعداد نویسندگان :
تعداد کل مطالب :
آخرین بروز رسانی :

درباره ما

Related Posts Plugin for WordPress, Blogger...