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

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

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

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

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

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

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

حتما تا بحال سایت هایی که در طراحی صفحات خود از یکسری فونت های خاص استفاده کردند دیدید. چون برای طراحی سایت مجاز به استفاده از هر فونتی نیستیم و این محدودیت برای فونت های فارسی نیز وجود دارد، لذا بیشتر طراحان از فونت های 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 نباشه بازم صفحات با فونت گذاشته شده نشون میده؟

بله وجود داره.
بستگی به مرورگرها داره. توی آموزش اشاره شده به این موضوع.

sghl جمعه 8 شهریور 1392 ساعت 19:58

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

خیر، شما خودتون باید فونت هاتون رو در سروری مثل پرشین گیگ یا گیگفا و ... آپلود کنید و آدرسش رو در کد قالبتون قرار بدید.

م.آزاد جمعه 8 شهریور 1392 ساعت 20:02 http://it-aranbidgol.blogsky.com/

سلام
در تکمیل حرف های شما:
بهترین سایت تبدیل فونت به فرمت های ذکر شده
http://www.fontsquirrel.com/tools/webfont-generator

ممنون از شما.

علیرضا جمعه 8 شهریور 1392 ساعت 21:07

سلام بازم من

این قالب هایی که اول صفحه گذاشتید همه به روز شده با آخرین امکانات بلاگ اسکای هستن؟

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

محمد حسین جمعه 8 شهریور 1392 ساعت 22:26 http://mhmk.ir

از این سایت هم میتونن استفاده کنند

http://www.font-api.ir

از شما هم ممنونم آقا محمد حسین

محمد حسین جمعه 8 شهریور 1392 ساعت 23:02 http://mhmk.ir

یک درخواست دارم :
نمایش نظرات در ادامه مطلب رو بروز کنید تا از اسمایلی های جدید استفاده کنیم.

به دلیل اینکه اسکریپت های بخش های نظردهی و چند بخش دیگه در حال تغییر و بروزرسانی هستند فعلا تا قطعی شدن تغییرات، این بخش ها بصورت قبل باقی خواهند ماند. بزودی آخرین تغییرات انجام شده در سایت اطلاع رسانی می شوند.

omid یکشنبه 10 شهریور 1392 ساعت 12:21

سلام.یه قالب بود که گفته بودید در حال ترجمش به بلاگ اسکای هستید آیا آماده شده؟
اینم اون قالب که میگم:
http://tem.parstools.com/obiznese/prev.htm

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

xX~Xx یکشنبه 10 شهریور 1392 ساعت 12:36

سلام . دوست عزیز قرار بود یک نمونه کد css برای موضوعات و زیر مجموعه ها برای ما بزارین . منتظریم . اگر امکانش هست یه کن رودتر . باتشکر . بدرود

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

omid یکشنبه 10 شهریور 1392 ساعت 14:15

مرسیییییییییییی.منتظرم که ببینم

محمدرضا چهارشنبه 27 آذر 1392 ساعت 15:50 http://itplus.blogsky.com/

سلام

فونت عنوان وبلاگ رو چجوری میشه تغیر داد ؟

در کد قالب #blog-title یا شبیه اش رو پیدا کنید و نوع فونت رو تغییر بدید. اگر از فونت فارسی میخواید استفاده کنید آموزشش در سایت هست. میتونید مطالعه بفرمائید.

برای نمایش آواتار خود در این وبلاگ در سایت Gravatar.com ثبت نام کنید. (راهنما)
ایمیل شما بعد از ثبت نمایش داده نخواهد شد