article

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

css-farsi-font-face

یکی از قابلیت های خوب افزوده شده به 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>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
@font-face {
    font-family:'BYekan';/*تعریف یک نام برای فونت*/
    src:url('font/BYekan.eot');/*اکسپلورر 9 به بعد*/
    src:local('bYekan'),/*بررسی نصب بودن فونت در سیستم کاربر*/
        local('b Yekan'),/*برای برخی از مرورگرها مانند سافاری*/
        url('font/BYekan.eot?#iefix') format('embedded-opentype'),/*هک برای اکسپلورر 8 و ماقبل*/
        url('font/BYekan.woff') format('woff'),/*مرورگر های جدید*/
        url('font/BYekan.ttf') format('truetype'),/*تمام مرورگرها به جزء اکسپلورر*/
        url('font/BYekan.svg#BYekan') format('svg');/*نسخه های قدیمی سیستم عامل iOS*/
    font-style:normal;
    font-weight:normal;
}
.post-titr p{
    font-family:BYekan, Tahoma, Geneva, sans-serif;
    display:block;
    font-size:16px;    
}
</style>
</head>
<body>
<div class="post-titr">
<p>
این یک متن فارسی با استفاده از خاصیت font-face در css3 است!
</p>
</div>
<hr />
با افزودن src و local این امکان وجود دارد که ابتدا فونت مورد نظر در سیستم کاربر جستجو گردد و در صورت عدم نصب، فونت از سرور بارگذاری شود.
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
» مخفی کردن عناصر وب با CSS
» ساخت منوی کشویی با تگ ul li و CSS
» تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
» تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
» حذف اسکرول افقی (Horizontal Scroll) با CSS
commentنظرات (۵۱ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: mohsen
۱۴:۵۹ ۱۳۹۱/۰۶/۰۸
salam mer30 az amozeshhatoon ostad
پاسخ: 
سلام
خواهش می کنیم، لطفا فارسی تایپ کنید.
نویسنده: پویا
۱۳:۰۸ ۱۳۹۱/۰۶/۱۲
خوب من الان اینا رو از قبل میدونستم ولی گیرم سر اینه که منی که وبلاگ دارم و هاست ندارم، کجا فونتامو آپلود کنم؟
پاسخ: 
سرویس های ایرانی زیادی برای میزبانی رایگان فایل ها وجود دارد، به طور مثال پرشین گیگ خدمات خوبی در این زمینه ارائه می دهد.
نویسنده: پگاه
۰۸:۵۴ ۱۳۹۱/۰۶/۱۳
با تشکر از توضیحاتتون سوالی از حضورتون داشتم
آیا درحال حاضر میشه از html5 و css3 در وب سایتمون استفاده کنیم؟
و آیا اکثر سیستمهای کاربرانی که سایتمونو می بینن در حال حاضر توانایی ساپرت html5 و css3 رو دارن؟
با تشکر منتظر پاسختون هستم
پاسخ: 
در مورد اینکه می شود از HTML5 و CSS3 استفاده کرد، پاسخ به طور کلی مثبت است، اما دقت کنید که HTML5 مقوله ای جدا از CSS3 است، HTML5 نسخه جدیدی از استاندارد وب است (که پروژه آن در تاریخ نگارش این یادداشت هنوز تکمیل نشده است)، بدین معنی که در کدنویسی های خود باید از این استاندارد پیروی کنید، اما CSS3 بر روی جلوه های ظاهری اثر می گذارد و اهمیت آن کمتر است؛ می توانید از CSS3 بدون استفاده از HTML5 نیز استفاده کنید.
نکته دوم اینکه مهم این است از چه قابلیت هایی قصد استفاده داشته باشید، HTML5 به خودی خود تغییر خاصی ایجاد نمی کند، بلکه این تگ های اختصاصی و قابلیت های ویژه آن هستند که ضرورت استفاده را مشخص می کنند، از لحاظ سئو نیز استفاده از HTML5 به تنهایی فرقی با دیگر نسخه های HTML نمی کند.
در مورد پشتیبانی، این بستگی به مرورگر (نه سیستم عامل) کاربران دارد، به جزء نسخه 8 و ماقبل اینترنت اکسپلورر، سایر مرورگرها (در نسخه های به روز تر) از قابلیت های HTML5 کم و بیش (نه به طور کامل) پشتیبانی می کنند، و در مورد CSS3 نیز تقریبا به همین صورت؛ لذا چالش اصلی در این بین اینترنت اکسپلورر خواهد بود.
نتیجه اینکه آینده وب به سمت HTML5 و CSS3 در حرکت است، اما واقعیت فعلی باعث می شود که اگر هم از HTML5 استفاده شود، در حد کدنویسی پایه کار باشد و کمتر متکی بر قابلیت های آن؛ در مورد CSS3 وضع کمی بهتر است، چون ویژگی های ظاهری از اهمیت کمتری برخوردارند و فرم کلی کار بدون آن نیز حفظ می شود.
نویسنده: پویا
۱۱:۴۱ ۱۳۹۱/۰۷/۰۶
سلام و ممنون از جوابتون. من از پرشین گیگ استفاده کردم اما فونت ها فراخوانی نمیشن. یعنی آپلود میکنه اما ساپورت نه!
هر چی هم گشتم سایتی برای این کار پیدا نکردم!
پاسخ: 
سلام
بله در مورد وبلاگ ها متاسفانه این مشکل وجود دارد، فونت ها برای استفاده نیاز به پردازش دارند و تا آنجایی که ما اطلاع داریم سرویس های آپلود رایگان این امکان را در اختیار کاربران قرار نمی دهند، شاید بهترین راه حل مشکل این باشد که سرویس های وبلاگی این فونت ها را به همراه خدمات خود ارائه کنند.
نویسنده: پویا
۲۲:۰۱ ۱۳۹۱/۰۷/۰۶
ممنون از شما و همینطور جوابگوییتون.
در این مورد میشه از هاست های رایگان استفاده کرد ، اما اینکه به هاست های رایگان اعتمادی نیست از یه طرف ، از طرف دیگه نمیدونم چه صیغه ایه که در مرورگر من اجازه ی ثبت نام در هیچ هاست رایگانی رو نمیده!
پاسخ: 
خواهش می کنیم، البته همان طور که اشاره کردید برخی هاست های رایگان متاسفانه کارنامه خوبی در این زمینه ندارند، اما آپلود فایل های فونت مسئله مهمی نیست و نهایتا اینکه در صورت بروز مشکل فونت ها را در هاست دیگری آپلود می کنید، در رابطه با مشکل ثبت نام، اگر ایراد از سایت مربوطه نباشد، باید ببینید در مرورگرتان چه امکانی غیر فعال شده است، به طور مثال جاوا اسکریپت، یا قابلیت پذیرش کوکی ها و... در کل اگر مشکل از مرورگر باشد باید با یک مرورگر دیگر این مورد برطرف شود.
نویسنده: ساناز
۲۰:۰۳ ۱۳۹۱/۰۷/۲۴
با سلام و خسته نباشید بابت تمامی مطالب بسیار عالیتو ن
یه سوال داشتم و باز هم زحمت
من تمام راههایی رو که در اینترنت برای نشون دادن فونت مورد نظر در سیستم هایی که اون فونت رو ندارن تست کردم .. ولی هیچکدوم جواب نداد
میخواستم بدونم راهی هست که وقتی کسی وارد سایت یا وبلاگم میشه فونت ها روی سیستمش نصب بشه به طور خود کار ..؟
پاسخ: 
سلام
خیر، به جزء استفاده از خاصیت font-face@ در css راه دیگری وجود ندارد، در واقع به لحاظ امنیتی مرورگرها و سیستم عامل اجازه دسترسی از طریق وب به محیط ویندوز را نمی دهند لذا نمی توانیم به طور خودکار برنامه ای بر روی سیستم کاربر نصب کنیم، در مورد اینکه راههایی که امتحان کردید موثر نبوده، حتما دلیلی وجود داشته است، یا روش ها را اشتباه انجام داده اید یا اینکه اگر در وبلاگ این کار را کرده اید، به یاد داشته باشید که سرویس های آپلود رایگان قابلیت پردازش فونت ها را ندارند و تنها در هاست شخصی می توانید این کار را انجام دهید.
نویسنده: ساناز
۲۲:۴۹ ۱۳۹۱/۰۷/۲۴
سلام
خیلی ممنون
فقط یه سوال کوچیک دیگه داشتم
میخوام بدونم که حالا میشه با اجازه این کارو انجام داد ؟
مثلا برای فرد بیننده پیغامی بیاد .. و اگر اون قبول کرد فونت ها در مسیر خودشون نصب بشن یا خیر ...
با تشکر
پاسخ: 
سلام
در وب محدودیت هایی برای نصب پلاگین ها، فونت ها و ... داریم، لذا کاری که مد نظر شما است را تا جایی که می دانیم نمی توان انجام داد چون مرورگرها اجازه اجرای چنین چیزی را نمی دهند، تنها راه این است که فونت ها را به صورت یک فایل اجرایی درآورده و از کاربر بخواهید که آن را دانلود و در سیستم نصب کند.
نویسنده: محمد
۱۱:۱۰ ۱۳۹۱/۰۸/۰۱
با سلام و سپاس از زحماتتون
ببخشید این کارا رو می تونیم قبل از آپلود کردن روی سیستم خودم تست کنم و نتیجه کارو ببینم چون من روی سیستمم انجام دادم ولی نشد می خواستم بدونم من اشتباه انجام میدم یا اصلا نمیشه؟
پاسخ: 
سلام
فرقی ندارد که روی لوکال اجرا کنید یا به صورت آنلاین، مهم این است که فرمت ها به درستی تبدیل شده باشند و آدرس ها در دو قسمت src:url و src:local به طور صحیح تعریف شوند، دقت کنید سایت هایی که فونت های زبان فارسی را پشتیبانی کنند اندک هستند و معمولا هر کدام تنها قابلیت تبدیل یک فرمت خاص را دارند.
نویسنده: ایمان بای
۱۸:۳۹ ۱۳۹۱/۰۸/۱۳
سلام آقا تموم آموزشهاتون فوق العاده است. خداییش حرف نداره یعنی مرد که میگن شمائین فقط اگه وقت کردین و حسش بود آموزش ASP.NET رو هم بگین بد نیست. مرسی
پاسخ: 
سلام
ممنون از نظر لطف شما، البته مبحث ASP.NET یک دنیای متفاوت است و با توجه به اینکه ما در آموزش ها بر روی وب متن باز تاکید داریم، فعلا از پرداختن به آن معذوریم.
نویسنده: رضا سعیدی
۱۱:۰۲ ۱۳۹۱/۰۸/۱۶
سلام
ممنون استفاده کردم.
نویسنده: احسان
۲۱:۵۶ ۱۳۹۱/۰۹/۲۷
سلام من همه کارا رو درست انجام میدم رو سیستم هم فونت ها میاد ولی وقتی اپ دیگه کار نمی کنن همه چیز درست اپ میشه مسیر ها درسته لطفا کمک کنید
پاسخ: 
سلام
ظاهرا فایل های خود را در سرویس های رایگان آپلود می کنید؟ برای اجرای فایل های فونت نیاز به یک هاست خریداری شده دارید، در حال حاضر سرویس های رایگان از فرمت های فونت پشتیبانی نمی کنند (فونت ها برای نمایش نیاز به اجرا دارند و سرویس های رایگان این امکان را ندارند).
نویسنده: بهروز
۱۵:۳۳ ۱۳۹۱/۰۹/۲۸
سلام ،
مطلب خیلی مفیدی بود ، چند روز پیش توی وبگردی هام با سایت آوب فونت آشنا شدم که یکی از پروژه های شرکت فناوری اطلاعات آوب بود. می تونم بگم از بین سایت های فارسی فونت این یکی از بهترین ها بود.
آدرسش: http://awebfont.ir
از امکاناتش میشه به :
1. پیش نمایش فونت
2. دانلود فونت با دو فرمت TTF و OTF
3.نمایش شناسنامه ی فونت ( مشخصات کامل فونت )
4.نقشه ی حروف
5. تست آنلاین و کم نظیر فونت
6. نسخه ی تحت وب ،
چیزی که علاوه بر موارد بالا این سایت رو با دیگر سایت های فونت API فارسی زبان متمایز می کنه قسمت تحت وب این سایت بود .
حتما شما هم می دونید که هر مرورگر یک فرمت از بین فرمت های رایج وب مثل WOFF Local EOT TTF SVG OTF رو ساپورت می کنه. با استفاده از کد استایل اتوماتیک این سایت ، بصورت اتوماتیک بر اساس مرورگر کار بر فرمتی که مرورگر کاربر پشتیبانی میکنه رو تشخیص میده و بر اساس اون فقط یک فرمت رو به مرورگر میده تا لود بکنه. همین باعث افزایش سرعت لود سایت و کاهش ترافیک سرور میشه.
اگر دوست داشتید این سایت هم معرفی کنید ;)
پاسخ: 
سلام
نظرات تبلیغاتی منتشر نمی شوند، ولی به خاطر مفید و مرتبط بودن سایت معرفی شده، نظر شما منتشر شد :-)
نویسنده: محمود
۱۴:۲۳ ۱۳۹۱/۱۲/۱۳
آقا من تا حالا وبسایت طراحی میکردم با فونتها مشکل نداشتم
اما دارم یه قالب وبلاگ طراحی میکنم.
اما به جز کروم بقیه مرورگرها آدرس فونتهایی که در هاست من هستش رو دنبال نمیکنن و فقط فونتهایی که در هاست همون صفحه است رو میخونن. یعنی با
@font-face {
font-family: 'SDAVAT';
src: url('http://site/weblog/fonts/SDAVAT.eot?#') format('eot'),
url('http://site/weblog/fonts/SDAVAT.woff') format('woff'),
url('http://site/weblog/fonts/SDAVAT.ttf') format('truetype');
}
نشد که فونت رو توی وبلاگ نمایش بدم. اما وقتی این رو در یک صفحه تو همون هاست آزمایش میکنم. درسته
ممنون میشم جواب رو ایمیل کنید!
پاسخ: 
سلام
ظاهرا این مشکل تنها با تنظیم دستور هدر زیر به صورت '*' در سرور میزبان فایل قابل حل است:
Access-Control-Allow-Origin
برای این منظور در دایرکتوری که فایل ها (فونت ها) را آپلود کرده اید، داخل یک فایل htaccess. دستورات زیر را قرار دهید:
<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
نویسنده: حسین دهنوی
۱۸:۱۸ ۱۳۹۲/۰۲/۱۷
مرسی از آموزش مفیدتون
به عنوان یک پیشنهاد و راه حل ساده برای استفاده از فونت فارسی در وب، سایت ifont.ir مرجع خوب و کامل همچنین استفاده سریع با آموزش کامل هست
پاسخ: 
خیلی ممنون از معرفی این سایت مفید.
نویسنده: حسین دهنوی
۱۸:۲۰ ۱۳۹۲/۰۲/۱۷
راستی یادم رفت پایین ترین نسخه های مرورگر ها هم قابل پشتیبانی
دیگه نگران نمایش فونت ها نباشید :)
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





6 × 6
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form محمد رستمی
در:
سلام اگه میشه لیست توابع و کاربردشونو توی یه فایل pdf بزارین
۱۳۹۹/۰۹/۰۵

form شهریار صادقی
در:
من سه تا صفحه در php storm درست کردم یکی برای html یکی برای جاوا اسکریپت و جی کوِئری و یکی هم برای css اول...
۱۳۹۹/۰۹/۰۱

form دوست خوب
در:
اگر بخواهیم برای رفتن به مرورگر و باز کردن یک صفحه لینک دهیم؟
۱۳۹۹/۰۹/۰۱

form مجتهدزاده خیاوی
در:
سلام و خسته نباشید من جدولی دارم که تعداد ستون های اون نسبتا زیاده. توی نمایشگر های دسکتاپ مشکلی ندارم اما تو گوشی و...
۱۳۹۹/۰۸/۲۹

form Alireza
در:
خیلی ممنون از پاسخگویی سریع! بله خوشبختانه سرور هاست دانلود LiteSpeed هست و از جدیدترین PHP هم پشتیبانی میکنه. تو قسمت path هم دایرکتوری...
۱۳۹۹/۰۸/۲۹

form Alireza
در:
عرض سلام و خسته نباشید از مطالب استفاده کردم و نظرات هم خوندم واقعا مفید بودن. یکی دو نفر مشکلی شبیه بنده داشتن. من...
۱۳۹۹/۰۸/۲۹

form امیرحسین
در:
سلام استاد عزیز وقت بخیر من یه سوال در مورد function use داشتم اگه ممکنه با مثالی کاربردی توضیح بدید که کارش چیه :...
۱۳۹۹/۰۸/۲۷

form Amin Eskandari
در:
سلام عالی بود ممنون
۱۳۹۹/۰۸/۲۷

form فاطمه
در:
چگونه در حلقه ها اعداد را جمع کنیم و در خروجی مجموع انان را نشان دهد مثلا جواب
۱۳۹۹/۰۸/۲۶

form میکاییل
در:
درسته مشکلی نیست تو ارسال اطلاعات. تنها مشکلم اینه که هدر عمل نمیکنه و ریدایرکت انجام نمیشه و نمیره سمت صفحه پرداخت. حالا نمیدونم به...
۱۳۹۹/۰۸/۲۵

form میکاییل
در:
سلام من تو قسمتی از صفحه پرداخت انلاین دارم همه چی درسته و اطلاعات بصورت ایجکسی ارسال میشه و سمت سرور نوشتم که هدر...
۱۳۹۹/۰۸/۲۵

form mohsen
در:
با عرض سلام و خسته نباشید خدمت استاد ببخشید من یه فرمی دارم که از طریق ایجکس ثبت میشه داخل دیتا و بعد میره به...
۱۳۹۹/۰۸/۲۳

form مجید
در:
سلام وقت بخیر . ببخشید نمیشه دیتابیس توی کدنویسی html ایجاد کنیم افرادی هستن توی محل کارش اینترنت ندارن . اینو باید چکارکنم
۱۳۹۹/۰۸/۲۳

form حسینی سیانکی
در:
سلام مطلب خیلی مفید و کاملی بود. خسته نباشید
۱۳۹۹/۰۸/۲۰

form ar
در:
سلام ممنون از سایت خوبتون ببخشید من تازه دارم زبان برنامه نویسی جاوااسکریپت رو یاد میگیرم و لپتاپم لپتاپ نسبتا ضعیفی هست من...
۱۳۹۹/۰۸/۲۰
form saba
در:
سلام من این کد رو در قسمت کد های اختصاصی کاربر وارد کردم اما هیچ تغییری ایجاد نشد ممکنه راهنمایی کنید؟
۱۳۹۹/۰۸/۱۹
form مینا
در:
سلام. من میخوام از regex توی ماشین حساب استفاده کنم ممنون میشم منو راهنمایی کنین
۱۳۹۹/۰۸/۱۹
form intal
در:
سلام خسته نباشید من واقعا از وبگو ممنونم که این آموزش های ارزشمند رو در اختیار کاربران قرار میده راستش من هرکاری می کنم پوزیشن...
۱۳۹۹/۰۸/۱۷
form بهروز
در:
مهندس جان خیلی عالی بود دستت درد نکنه درست شد.
۱۳۹۹/۰۸/۱۷
form اصغر
در:
خوندمش خیلی ممنون مفید بود
۱۳۹۹/۰۸/۱۵
form بهروز
در:
ممنون، خیلی لطف کردید، چشم امتحان میکنم خبر میدم فقط یه موری رو یادم رفت عرض کنم اینکه مثلا لینک exm.ir/m/yyyy به...
۱۳۹۹/۰۸/۱۴
form بهروز
در:
ممنون از پاسخگویی سریعتان در سوال فوق yyyy متغیر هست یعنی هرسری یه عددی کلیک میشه مثلا exm.ir/1234 حالا میخوام ریدایرکت بشه به آدرس...
۱۳۹۹/۰۸/۱۴
form بهروز
در:
سلام اگه بخوام ادرس 1 رو به ادرس دو ریدایرکت کنم چطور انجام دهم:
۱۳۹۹/۰۸/۱۴
form Mori
در:
سلام. میخواستم بدونم که چگونه در html میشه چند لیست عمودی رو کنار هم قرار داد. یعنی در واقع لیست ها زیر هم نباشند. ...
۱۳۹۹/۰۸/۱۰
form مبین
در:
با سلام من می خواستم دستوری در دیتابیس بنویسم که بر اساس قد افراد نتایج را مرتب و چاپ کند و اگه قد برار بود...
۱۳۹۹/۰۸/۰۹
form عباس علیمردانی
در:
سلام. من یک سوال یا بهتر بگم خواهش داشتم ایا شما میتوانید وبلاگ رو فیلتر کنید؟ یعنی با حکم قضایی فیلتر بشه. وبلاگ برایه...
۱۳۹۹/۰۸/۰۹
form ابوالفضل
در:
سلام استاد اومدم امروز بعد از سالها سوالاتی که از شما استاد بزرگوارم میپرسیدم رو زیر این پست مرور می کردم واقعا چقدر مبتدی...
۱۳۹۹/۰۸/۰۹
form mahtab
در:
سلام وقتتون بخیر ببخشید من میخوام یه آهنگی رو بزارم وبم کدش تو اینترنت زدم اما نیاورد بی زحمت میشه راهنمایی کنین چجوری...
۱۳۹۹/۰۸/۰۸
form Mori
در:
بهترین سایت برنامه نویسی در ایران هستید
۱۳۹۹/۰۸/۰۷
form Mori
در:
سلام. چگونه باید در لیست برای هر کدام از اعضا به صورت جداگانه لینک بگذاریم؟؟
۱۳۹۹/۰۸/۰۷
form جیهوپ
در:
سلام استاد عزیز من میخواستم صفحه وبی ایجاد کنم مثل این صفحه وبی ایجاد کنید که مشخصات شما را در 3 پاراگراف با ویژگی...
۱۳۹۹/۰۸/۰۶
  در انتظار بررسی: ۲
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.