در صورت داشتن سوال يا بروز مشکل در سايت با ما تماس بگيريد 09304293050

اسلايد شو

جستجو

تبليغات

محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما

موضوعات

کتابهای زبان انگلیسی
آموزش زبان انگلیسی
زبان آلمانی
آموزش آی تی
ترفند
دانلود نرم افزار
موبایل
بازی
فناوری - IT
فیلمهای آموزشی
انیمیشن-کارتون
همراه اول-ایرانسل
کتابخانه مجازی آنلاین
مقاطع تحصیلی
خدمات سایت

قالب وبلاگ

محل تبلیغات شما اینجاست

محل تبليغات شما
کانال مجازي آنلاين را دنبال کنيد : telegram.me/majazionline

آموزش استفاده از فونت فارسی در وب با CSS

یکی از قابلیت های خوب افزوده شده به CSS در نسخه 3، امکان استفاده از فونت هایی است که پیش از این تنها در سیستم عامل کاربران قابل نمایش و استفاده بودند، چرا که در وب به طور معمول تنها فونت های خاصی که در تمام سیستم عامل ها نصب و قابل اجرا هستند، پشتیبانی می شود و بقیه موارد به صورت پیش فرض (به طور مثال با فونت Arial) نمایش داده خواهند شد، از این رو توسعه دهنده گان CSS، به فکر راه حل این مشکل افتادند تا اینکه در نسخه سه خاصیتی با نام font-face@ معرفی شد، البته در ادامه خواهیم دید که استفاده از این خاصیت آنچنان هم به سادگی حالت معمول تعریف یک فونت نیست و به اصطلاح ریزه کاری هایی دارد.
مزایا و معایب استفاده از فونت فارسی در وب

قبل از پرداختن به ادامه آموزش، بد نیست به طور مختصر به مزایا و معایب استفاده از فونت فارسی در وب بپردازیم، همان طور که می دانید فونت های از پیش تعریف شده و استاندارد وب (فونت های امن وب!) برای زبان فارسی محدود به چند نوع (از جمله Tahoma ، Arial و...) است، از این جهت استفاده از سایر فونت ها به دلیل تنوع، زیبایی و کمک به خواناتر شدن مطالب می تواند مفید باشد، اما متاسفانه این کار موجب افزایش حجم کلی صفحه نیز خواهد شد، چرا که اکثر فونت ها معمولا حجمی بیش از 30 کیلوبایت دارند و این در مجموع باعث کندتر شدن سرعت بارگذاری صفحات می شود، البته شاید در نگاه اول این اندازه چندان به چشم نیاید، اما وقتی حجم سایر المان ها، استایل ها و فایل های جاوا اسکریپت احتمالی را به آن اضافه کنیم، در مجموع قالب سایت یا وبلاگ به اصطلاح سنگینی از لحاظ حجم خواهیم داشت، از طرفی مخصوصا در مورد فونت های فارسی و در برخی مرورگرها، ظاهرا برای کاراکترهای خاصی، هنوز مشکلاتی وجود دارد، لذا توصیه می شود از این قابلیت بر اساس نیاز و با سنجش سایر شرایط گفته شده استفاده شود.
آشنایی با خاصیت font-face@ در css3

همان طور که گفتیم، خاصیت font-face@ برای پایان دادن به محدودیت استفاده از فونت های خاص در وب تعریف شده است، اما متاسفانه این خاصیت به طور کامل تنها در برخی مرورگر ها و در نسخه های به روزتر آنها پشتیبانی می شود (البته با روشی که در ادامه خواهیم دید، می توان با ترفندهایی در سایر مرورگرها نیز از آن استفاده کرد)، مرورگرهای فایرفاکس، اپرا، گوگل کروم و سافاری از این خاصیت به صورت پیش فرض پشتیبانی می کنند (از دو نوع فرمت ttf. یا TrueType و otf. یا OpenType)، مرورگر اینترنت اکسپلورر از نسخه 9 به بعد خاصیت font-face@ را پشتیبانی می کند (البته تنها از فونت های با فرمت eot. یا Embedded OpenType) و در نسخه های قدیمی تر باید متوصل به هک های css شویم، ضمن اینکه مرورگرهای جدید از فرمت دیگری با نام woff. یا (Web Open Font Format) نیز استفاده می کنند، لذا در مجموع برای اینکه فونت های فارسی در تمام مرورگرها به یک شکل دیده شوند، باید سه نوع فرمت متفاوت در دسترس مرورگر باشد (شامل فرمت ttf. یا otf.، فرمت eot. و فرمت woff.)؛ البته هر مرورگر تنها از یکی از این فونت ها استفاده و به اصطلاح آن را بارگذاری می کند، ذکر این نکته نیز ضروری است که پیش تر مرورگرهای سیستم عامل iOS که مربوط به شرکت Apple و به طور خاص iPhone است، تنها از فرمتی به نام svg. یا Scalable Vector Graphics استفاده می کردند (از فرمت svg. هم در کارهای گرافیکی و هم ایجاد فونت استفاده می شود) که در نسخه های جدید، این استاندارد شامل فرمت ttf. هم شده است؛ جدول زیر لیست مرورگرها و فونت های پشتیبانی شده توسط آنها را نشان می دهد.

css-font-face-support
نحوه تبدیل فونت های فارسی برای استفاده در وب

همان طور که در بالا ملاحظه کردید، برای نمایش صحیح فونت فارسی در تمام مرورگرها، ناچارایم از چهار فرمت متفاوت استفاده کنیم؛ از آنجایی که در حالت معمول فونت های با پسوند ttf. در دسترس هستند، سایر فرمت ها را باید با تبدیل این فایل بدست آوریم، برای تبدیل، چندین سرویس آنلاین در وب وجود دارد که البته متاسفانه در مورد فونت های فارسی، تنها برخی آن هم از فرمت های خاصی به درستی پشتیبانی می کنند، از جمله موارد زیر که فایل های فونت را به فرمت های متفاوت تبدیل می کنند.
سرویس آنلاین برای تبدیل فرمت، سازگار با فونت های فارسی (به جزء فرمت eot.):


www.onlinefontconverter.com

سرویس آنلاین برای تبدیل فرمت، سازگار با فونت های فارسی (تنها فرمت eot.):

www.font2web.com

سرویس آنلاین برای تبدیل فرمت، سازگار با فونت های انگلیسی :

www.fontsquirrel.com/fontface/generator

کافی است فایل با فرمت ttf. را در این سرویس ها آپلود کنید تا در کم ترین زمان، فایل های مورد نیاز برای استفاده در وب را دریافت نمائید، توجه داشته باشید که سرویس های زیادی به صورت آنلاین و رایگان در وب این کار را انجام می دهند که تنها برخی از آنها قادر به پشتیبانی از فونت های فارسی (و معمولا برخی فرمت ها) هستند، برای اطمینان، حتما پس از تبدیل فرمت آنها را با آزمون و خطا تست کنید.
نکته: برای کار با این سایت ها، از برنامه های جانبی مانند Download Manager استفاده نکنید.

نحوه استفاده از font-face@ برای نمایش فونت فارسی


اکنون که با جزئیات کار با خاصیت font-face@ در css3 آشنا شدیم، نوبت به مرحله کدنویسی و تعریف این خاصیت در استایل css است، بدین منظور کافی است در ابتدای فایل css خود (یا درون تگ style در حالت استایل 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 اضافه کنید:

<style type="text/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;
}
.post-titr{
    font-family:BYekan, Tahoma, Geneva, sans-serif;
}
</style>

توضیح:
- ابتدا برای فونت خود یک نام تعیین می کنیم (به صورت دلخواه) تا در استایل css خود از آن استفاده کنیم.
- سپس آدرس url فایل فونت خود را با فرمت eot. برای مرورگر اینترنت اکسپلورر 9 و مابعد مشخص می کنیم.
- در قسمت بعد، برای رفع مشکلات مرورگر اینترنت اکسپلورر 8 و ماقبل در این خصوص، از شیوه هک (با افزودن علامت های #?) استفاده می کنیم.
- عبارت مربوط به  local برای این است که اگر فونت مورد نظر در سیستم کاربر نصب بود، از همان فایل استفاده شود و محتوای اضافه از سرور دریافت نشود، دقت کنید که در این قسمت باید مشخصه شناسایی فونت درج شود که در بیشتر مرورگرها همان نام فایل است ولی در مرورگر سافاری، عنوان فونت باید درج شود (در بیشتر موارد نام فایل و عنوان فونت اندکی با هم تفاوت دارند).
- همان طور که در جدول بالا ملاحظه کردید، فایل ttf. در اکثر مرورگرها پشتیبانی می شود، لذا آن را نیز به استایل خود ضمیمه می کنیم (هر مرورگر بسته به سازگاری، به ترتیب، تنها از یکی از آدرس های src استفاده می کند).
- در قسمت آخر نیز، فایل svg را برای سازگاری با نسخه های قدیمی سیستم عامل iSO ضمیمه می کنیم (این کار با توجه به حل مشکل پشتیبانی از فرمت ttf. در نسخه های جدید، ضروری نیست). 


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | استفاده از فونت فارسی در وب</title>
<!-- http://estarn.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
گردآوري و تنظيم: www.majazionline.ir
کانال مجازي آنلاين را دنبال کنيد : telegram.me/majazionline

اين مطلب را با دوستان خود به اشتراک بگذاريد
415 پنجشنبه 28 شهريور 1392 majazionline نظرات () موضوع(آموزش اینترنت)

مطالب مرتبط

آموزش پیدا کردن موقعیت مکانی و مشخصات یک ip
آموزش ذخیره صفحات وب با فرمت پی دی افpdf
آموزش تبدیل شبکه باسیم به شبکه بی‌سیم وای فای
آموزش استفاده از اینترنت سیمکارت تلفن همراه روی رایانه
آموزش تصویری کاهش حجم مصرفی اینترنت شما
آموزش چه کسی از اینترنت wifi من استفاده میکند؟
آموزش سرعت وب گردی خود را 20 درصد افزایش دهید
آموزش افزایش 20 تا 30 درصدی سرعت اینترنت
آموزش چگونه مصرف دیتا و اینترنت را در یک تلفن اندرویدی کاهش دهیم؟
آموزش مشکل تایید اعتبار اینترنت وایرلس تبلت
آموزش سرعت وب گردی خود را 20 درصد افزایش دهید
آموزش چگونه تبلت خود را به اینترنت متصل کنیم
آموزش از سیر تا پیاز ثبت دامنه وب سایت
آموزش کاهش مصرف اینترنت برای اندرویدی ها
آموزش چگونه از شبکه وایرلس حفاظت کنیم؟
آموزش 55 نکته مهم و توصیه عمومی به کاربران کامپیوتر و اینترنت
آموزش شبکه کردن چند کامپیوتر با مودم وایرلس
آموزش روش هایی برای حذف اطلاعات شخصی از اینترنت
آموزش بهترین راه برای ارسال فایل‌های حجیم در اینترنت
آموزش اینترنت اشتراکی با مدیریت کاربران
آموزش تشخیص به روز بودن آدرس های اینترنتی
آموزش روش هایی برای افزایش سرعت اینترنت هنگام دانلود
آموزش اتصال به اینترنت وایرلس کامپیوتر یا لپ تاپ
آموزش کنترل کردن کامپیوتر با گوشی بدون اینترنت
آموزش استفاده از اینترنت کامپیوتر بوسیله USB در گوشی |Reverse Tethering
آموزش انتقال سریع فایل ها بوسیله wifi به سایر گوشی ها | Fast File Share
آموزش چگونه سایت خود را روی اینترنت قرار دهید؟
آموزش روش های مسدود سازی وبسایت های خطرناک
آموزش افزایش کیفیت و محدوده شبکه بی‌سیم
آموزش تست سرعت بارگزاری سایت
آشنایی با استاندارد های رمز گذاری در شبکه های بی سیم
آموزش حل مشکل فونت فارسی در صفحات وب
آموزش قطع اتوماتیک اینترنت در یک زمان معین، بدون نیاز به نرم افزار جانبی
آموزش روش جلوگیری از Download در اینترنت
استفاده از اینترنت به صورت Offline
آموزش چگونه سریع‌ترین ISP را بیابیم؟
آموزش چگونه در زمان وبگردی پهنای باند کمتری را مصرف کنیم؟
آموزش:سرعت سايت محبوب خود را چك كنيد
آموزش اينترنت چگونه كار مي كند؟
آموزش تنظیمات اینترنت برای برنامه های مترو در ویندوز ۸
آموزش ارسال فایلها بدون استفاده از اینترنت
آموزش راهنمای اتصال به اینترنت ADSL‌ در اوبونتو
آموزش چگونه در ویندوز 8 یک اتصال وای‌فای با قابلیت سنجش ترافیک مصرفی بسازیم؟
آموزش: اگر با اتصال به اینترنت خود مشکل دارید، این مقاله را بخوانید!
آموزش وصل شدن به اینترنت موبایل از طریق بلوتوث در ویندوز 7
آموزش Log off کردن بدون قطع اتصال اینترنت
آموزش وارد شدن به یک وب‌سایت با چند حساب کاربری به صورت همزمان
آموزش تفاوت های وایرلس و وای-فای چیست؟؟؟
آموزش بهترین راههای اتصال به اینترنت؟
آموزش نحوه انتقال اینترنت لپ تاپ به تلفن هوشمند یا تبلت

صفحات سايت

تعداد صفحات : [Blog_Page_Count]
[Blog_Page]

آخرين مطالب ارسالي

-براي پاسخ سريع لطفا با شماره 09304293050 تماس بگيريد


نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
قوانين بخش نظرات
1 - نظرات اسپم و تبليغاتي تاييد نخواهد شد.
2 - فقط نظراتي که جنبه عمومي داشته باشند تاييد و منتشر مي شوند.
3 - نظرات فينگليش تاييد نخواهند شد.
4 - هرگونه درخواست و يا حل مشکلات فقط در انجمن امکان پذير است.
5 - لطفا انتقادات و پيشنهادات و همچنين درخواست هاي خود را از بخش هاي تماس با ما و درخواستي ها ارسال نماييد.

تبليغات

محل تبليغات شما

اطلاعات کاربري

نام کاربری :
رمز عبور :

مطالب پربازديد

محل تبليغات شما
محل تبليغات شما
محل تبليغات شما
محل تبليغات شما
محل تبليغات شما
محل تبليغات شما

مجوزهاي سايت

logo-samandehi

آمار سايت

کل مطالب : 7340
کل نظرات : 1205
افراد آنلاين : 44
تعداد اعضا : 7403
بازديد کل سايت : 14,626,943

چت باکس

[My_Chat_Box]