(*blog_title*)

(*blog_short_description*)

همیار بلاگ اسکای

طراحی و ترجمه قالب های بلاگ اسکای

جستجو
تقویم
مهر 1394
شیدسچپج
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30
نویسندگان
پیوندها
آمار
تعداد بازدیدکنندگان :
326952
جدیدترین یادداشت‌ها
نظرسنجی
از نظر شما بهترین سیستم وبلاگدهی ایرانی کدام است؟

استفاده از فونت فارسی در وب

حتما تا بحال سایت هایی که در طراحی صفحات خود از یکسری فونت های خاص استفاده کردند دیدید. چون برای طراحی سایت مجاز به استفاده از هر فونتی نیستیم و این محدودیت برای فونت های فارسی نیز وجود دارد، لذا بیشتر طراحان از فونت های Tahoma و Times New Roman در طراحی خود استفاده می کنند. 

ولی با آمدن CSS3 این محدودیت ها برطرف شده و شما قادر به استفاده از هرفونتی خواهید بود. امروز میخواهیم نحوه استفاده از فونت فارسی در طراحی صفحات وب را به شما عزیزان آموزش دهیم.

برای تعریف فونت در CSS باید از دستور @font-face استفاده کنیم.

حال باید ببینیم که دستور @font-face را به چه شکل باید استفاده کرد. برای استفاده از این دستور تنها کافیست این عبارت را در بالای کدهای CSS خود قرار دهید:

@font-face {

    font-family:'BYekan';/*تعریف یک نام برای فونت*/

    src:url('BYekan.eot');/*اکسپلورر 9 به بعد*/

    src:local('bYekan'),/*بررسی نصب بودن فونت در سیستم کاربر*/

        local('b Yekan'),/*برای برخی از مرورگرها مانند سافاری*/

        url('BYekan.eot?#iefix') format('embedded-opentype'),/*هک برای اکسپلورر 8 و ماقبل*/

        url('BYekan.woff') format('woff'),/*مرورگر های جدید*/

        url('BYekan.ttf') format('truetype'),/*تمام مرورگرها به جزء اکسپلورر*/

        url('BYekan.svg#BYekan') format('svg');/*نسخه های قدیمی سیستم عامل iOS*/

    font-style:normal;

    font-weight:normal;

}


- font-family : نامی دلخواه است که برای فونت خود انتخاب میکنید. دقت کنید که برای نمایش فونت خود باید این نام را در استایل بکار ببرید.

- url : در این بخش آدرس فونت در سرور برای استفاده در صفحه قرار میگیرد. برای اینکار میتونید فونت های خودتون رو در یک سرور رایگان آپلود کنید.

- local : برای اینکه اگر فونت مورد نظر در سیستم کاربر نصب بود، از همان فایل استفاده شود و محتوای اضافه از سرور دریافت نشود، دقت کنید که در این قسمت باید مشخصه شناسایی فونت درج شود که در بیشتر مرورگرها همان نام فایل است ولی در مرورگر سافاری، عنوان فونت باید درج شود (در بیشتر موارد نام فایل و عنوان فونت اندکی با هم تفاوت دارند).

- چون فایل ttf. در اکثر مرورگرها پشتیبانی می شود، لذا آن را نیز به استایل خود ضمیمه می کنیم (هر مرورگر بسته به سازگاری، به ترتیب، تنها از یکی از آدرس های src استفاده می کند).

- فایل svg نیز برای سازگاری با نسخه های قدیمی سیستم عامل iSO ضمیمه شده است (این کار با توجه به حل مشکل پشتیبانی از فرمت ttf. در نسخه های جدید، ضروری نیست).

- برای استفاده از چندین فونت در طراحی صفحات وبسایت می بایست به ازای هر فونت، دستور font-face@ را به کار ببریم.

- مرورگر های Opera,Firefox,Chrome,Safari از هر دو نوع فونت ( TrueTypeFont ( ttf و ( OpenTypeFont ( otf پشتیبانی می کنند. ولی IE فقط از نوع (Embedded OpenType (eot پشتیبانی می کند.


نحوه استفاده از فونت تعریف شده در CSS :

برای اینکه بتوانیم فونتی را که در استایل تعریف کردیم روی عناصر صفحه اعمال کنیم باید به روش زیر عمل کرد:

body{font-family:BYekan,tahoma;}

حالا تمام نوشته های شما با این فونت نمایش داده می شوند. برای هر بخش از متن ها و نوشته هاتون می تونید این فونت رو استفاده کنید. مثلا عنوان سایت، عنوان مطالب و... .

منبع : همیار بلاگ اسکای

نظرات (10)

  • جمعه 8 شهریور 1392 ساعت 17:59
  • علیرضا
  • سلام

    داخل قالب های شما هم این قسمت وجود داره درسته؟یعنی اگه اون سیستم مجهز به فونت B Yekan نباشه بازم صفحات با فونت گذاشته شده نشون میده؟
    امتیاز: 0 0
    پاسخ:
    بله وجود داره.
    بستگی به مرورگرها داره. توی آموزش اشاره شده به این موضوع.
  • جمعه 8 شهریور 1392 ساعت 19:58
  • sghl
  • سوال من از شما اینه که آیا در سرور جدید بلاگ اسکای این فونتهای فارسی وجود داره؟
    امتیاز: 0 0
    پاسخ:
    خیر، شما خودتون باید فونت هاتون رو در سروری مثل پرشین گیگ یا گیگفا و ... آپلود کنید و آدرسش رو در کد قالبتون قرار بدید.
  • جمعه 8 شهریور 1392 ساعت 20:02
  • م.آزاد
  • سلام
    در تکمیل حرف های شما:
    بهترین سایت تبدیل فونت به فرمت های ذکر شده
    http://www.fontsquirrel.com/tools/webfont-generator
    امتیاز: 0 0
    پاسخ:
    ممنون از شما.
  • جمعه 8 شهریور 1392 ساعت 21:07
  • علیرضا
  • سلام بازم من

    این قالب هایی که اول صفحه گذاشتید همه به روز شده با آخرین امکانات بلاگ اسکای هستن؟
    امتیاز: 0 0
    پاسخ:
    سلام علیرضا جان
    نه همشون، ولی اکثرشون بروز شده هستند. فقط طبق نکته ای که در اطلاعیه عرض کردم فعلا بعضی بخش ها نمیشه که فعال بشه. ولی سایر بخش ها بروزرسانی شده اند.
  • جمعه 8 شهریور 1392 ساعت 22:26
  • محمد حسین
  • از این سایت هم میتونن استفاده کنند

    http://www.font-api.ir
    امتیاز: 0 0
    پاسخ:
    از شما هم ممنونم آقا محمد حسین
  • جمعه 8 شهریور 1392 ساعت 23:02
  • محمد حسین
  • یک درخواست دارم :
    نمایش نظرات در ادامه مطلب رو بروز کنید تا از اسمایلی های جدید استفاده کنیم.
    امتیاز: 0 0
    پاسخ:
    به دلیل اینکه اسکریپت های بخش های نظردهی و چند بخش دیگه در حال تغییر و بروزرسانی هستند فعلا تا قطعی شدن تغییرات، این بخش ها بصورت قبل باقی خواهند ماند. بزودی آخرین تغییرات انجام شده در سایت اطلاع رسانی می شوند.
  • یکشنبه 10 شهریور 1392 ساعت 12:21
  • omid
  • سلام.یه قالب بود که گفته بودید در حال ترجمش به بلاگ اسکای هستید آیا آماده شده؟
    اینم اون قالب که میگم:
    http://tem.parstools.com/obiznese/prev.htm
    امتیاز: 1 0
    پاسخ:
    امیدجان ترجمش تموم شده فقط یکم باید بهینه سازی بشه.
    ببخشید دیر میشه، آخه سرم شلوغه.
  • یکشنبه 10 شهریور 1392 ساعت 12:36
  • xX~Xx
  • سلام . دوست عزیز قرار بود یک نمونه کد css برای موضوعات و زیر مجموعه ها برای ما بزارین . منتظریم . اگر امکانش هست یه کن رودتر . باتشکر . بدرود
    امتیاز: 1 0
    پاسخ:
    دوست عزیز، کد css نمایش دسته ها و زیردسته ها بصورت لیست آماده شده و نمونه اش رو در قالب گل که بروزرسانی شده می تونید مشاهده کنید.
    کدرو هم بصورت جداگانه در سایت قرار میدم.
  • یکشنبه 10 شهریور 1392 ساعت 14:15
  • omid
  • مرسیییییییییییی.منتظرم که ببینم
    امتیاز: 1 0
  • چهارشنبه 27 آذر 1392 ساعت 15:50
  • محمدرضا
  • سلام

    فونت عنوان وبلاگ رو چجوری میشه تغیر داد ؟
    امتیاز: 1 0
    پاسخ:
    در کد قالب #blog-title یا شبیه اش رو پیدا کنید و نوع فونت رو تغییر بدید. اگر از فونت فارسی میخواید استفاده کنید آموزشش در سایت هست. میتونید مطالعه بفرمائید.
    برای نمایش آواتار خود در این وبلاگ در سایت Gravatar.com ثبت نام کنید. (راهنما)

    نام :
    ایمیل :
    وب/وبلاگ :
    ایمیل شما بعد از ثبت نمایش داده نخواهد شد