تبلیغات
آمار
  • کاربران حاضر: 5
  • بازدید امروز: 3484
  • بازدیدکننده امروز: 1780
  • بازدید دیروز: 4485
  • بازدید کننده دیروز: 2275
  • بازدید هفته: 28989
  • بازدید ماه: 34571
  • بازدید سال: 143927
  • کل بازدیدها: 143927
  • کل بازدیدکننده‌گان: 38764
  • ورودی موتور جستجو: 1
  • کل نوشته‌ها: 95
  • کل کاربرها: 22
آموزش کامل تغییر فونت در وبلاگ و سایت
fonts 300x200 آموزش کامل تغییر فونت در وبلاگ و سایت

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

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

وب فونت چیست؟

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

نقل شده از awebfont:

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

API چیست؟

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

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

 

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

 

از کدام فرمت بیشتر پشتیبانی می کنند؟ فرمت های قابل استفاده در وب فونت عبارت اند از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 آموزش کامل تغییر فونت در وبلاگ و سایت

 

تاریخ ارسال مطلب : بهمن ۴م, ۱۳۹۲          دسته بندی : افزونه وردپرسترفندخدماتی