یکشنبه ۰۳ مرداد ۱۴۰۰

Sunday, July 25, 2021 GMT +4:30

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

css-farsi-font-face

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

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


قبل از پرداختن به ادامه آموزش بد نیست به طور مختصر به مزایا و معایب استفاده از فونت فارسی در وب بپردازیم، همان طور که می دانیم فونت های از پیش تعریف شده و استاندارد وب  برای زبان فارسی محدود به چند مورد (از جمله Tahoma ، Arial و...) است که در اصطلاح به آنها فونت های امن وب گفته می شود به این معنی که به صورت پیش فرض در تمام سیستم عامل ها نصب شده و در دسترس هستند و می توانیم مطمئن باشیم که نوشته هایمان دقیقا با همان فونت دلخواه در مرورگر کاربران نمایش داده می شود اما متاسفانه تنوع این فونت ها خیلی نیست و تنها محدود به چند مورد می شوند که برخی هم برای زبان فارسی کاربرد آنچنانی ندارند، از این جهت استفاده از سایر فونت ها به دلیل تنوع، زیبایی و کمک به خواناتر شدن مطالب می تواند مفید باشد در کنار این مزایا متاسفانه استفاده از فونت سفارشی اغلب موجب افزایش حجم کلی صفحه نیز خواهد شد، چرا که اکثر فونت ها معمولا حجمی بیش از 30 کیلوبایت دارند و این حجم در مجموع کندتر شدن سرعت فرآیند بارگذاری صفحات وب را در پی خواهد داشت، شاید در نگاه اول این اندازه چندان به چشم نیاید اما وقتی حجم سایر عناصر، فایل های استایل CSS و فایل های دستورات جاوا اسکریپت (JavaScript) احتمالی را به آن اضافه کنیم در نهایت قالب سایت یا وبلاگمان به اصطلاح سنگین خواهد شد که از لحاظ سئو (بهینه سازی صفحات وب برای موتورهای جستجو) یک امتیاز منفی است و تجربه کاربری خوبی نیز نخواهیم داشت، خوشبختانه برای رفع این مشکلات می توانیم فایل های فونت را به صورت preload بارگذاری کنیم، در حال حاضر تنها مشکل در زمینه preload بحث پشتیبانی مرورگرها است که در این خصوص در ادامه خواهیم گفت، علاوه بر این مسئله مخصوصا در مورد فونت های فارسی و در برخی مرورگرها برای کاراکترهای خاص ناسازگاری هایی وجود داشت که خوشبختانه با ارائه فونت های اصلاح شده و استاندارد وب این مسئله نیز تقریبا مرتفع شده است، در مجموع توصیه می شود از قابلیت فونت های فارسی در وب بر اساس نیاز و با اطلاع از شرایط گفته شده استفاده کنیم.

پشتیبانی از قانون font-face در مرورگرهای مختلف


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

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


همان طور که در جدول بالا مشخص است برای نمایش صحیح فونت فارسی در تمام مرورگرها معمولا ناچاریم از چند فرمت متفاوت استفاده کنیم، از آنجایی که در حالت معمول فونت های موجود با پسوند ttf در دسترس هستند سایر فرمت های مناسب وب را باید با تبدیل این فایل بدست آوریم، خوشبختانه در حال حاضر با یک جستجوی ساده فونت های اصلاح شده وب به صورت رایگان یا با پرداخت هزینه قابل دریافت هستند که ما هم چند فونت رایگان مناسب وب را در لینک زیر برای دانلود قرار داده ایم:
دانلود نمونه فونت های فارسی رایگان مناسب وب (اصلاح شده) - حجم: 1.25 مگابایت.
بسته بالا حاوی چند فونت انتخابی شامل:
BHoma، BKoodakBold، BLotus، BMitra، BMorvarid، BNarm، BNazanin، BRoya، BTehran، BTitrBold، BYas، BYekanWeb، BZar ، Shabnam و Vazir-Regular-FD است.
علاوه بر این برای تبدیل فونت چندین سرویس آنلاین در وب وجود دارد که البته متاسفانه در مورد فونت های فارسی تنها برخی آن هم از فرمت های خاص به درستی پشتیبانی می کنند که صرفا برای آشنایی بیشتر این سرویس ها را نیز معرفی می کنیم.
سرویس آنلاین برای تبدیل فرمت، سازگار با فونت های فارسی (به جزء فرمت eot):
www.onlinefontconverter.com
سرویس آنلاین برای تبدیل فرمت، سازگار با فونت های فارسی (تنها فرمت eot):
www.font2web.com
سرویس آنلاین برای تبدیل فرمت، سازگار با فونت های انگلیسی:
www.fontsquirrel.com/fontface/generator
کافی است فایل با فرمت ttf را در این سرویس ها آپلود کنیم تا در کمترین زمان فایل های مورد نیاز برای استفاده در وب را دریافت نمائیم، توجه داشته باشیم که سرویس های زیادی به صورت آنلاین و رایگان در وب کار تبدیل فرمت های فونت را انجام می دهند که تنها برخی از آنها قادر به پشتیبانی از فونت های فارسی (و معمولا برخی فرمت ها) هستند، لذا برای اطمینان توصیه می شود حتما پس از تبدیل فرمت، فونت ها را با آزمون و خطا تست کنیم.
نکته: برای کار با این سایت ها بهتر است از برنامه های جانبی مانند Download Manager استفاده نکنیم.

نحوه استفاده از قانون font-face برای تعریف فونت های فارسی


اولین گام در تعریف فونت های فارسی سفارشی معرفی فونت مورد نظر به مرورگر با قانون font-face است، برای انجام این کار ترجیحا در بالاترین قسمت استایل CSS و قبل از استفاده از فونت در سایر سلکتورها، نام و آدرس فایل ها را به صورت نمونه زیر مشخص می کنیم (این نمونه کد با هدف پشتیبانی حداکثری از مرورگرهای قدیمی در نظر گرفته شده است، برای مرورگرهای جدید و امروزی می توان دستور را به چند فایل woff و woff2 یا صرفا به صورت آنلاین خلاصه کرد):
<style>
@font-face {
    /* تعریف نام فونت */
    font-family: 'BZar';
    /* اکسپلورر 9 به بعد */
    src: url('http://example.com/fonts/BZar.eot');
    /* بررسی نصب بودن فونت در سیستم کاربر */
    src: local('bZar'),
         /* برای برخی از مرورگرها مانند سافاری */
         local('b Zar'),
         /* هک برای اکسپلورر 8 و ماقبل */
         url('http://example.com/fonts/BZar.eot?#iefix') format('embedded-opentype'),
         /* فرمت مناسب مرورگرهای خیلی جدید */
         url('http://example.com/fonts/BZar.woff2') format('woff2'),
         /* فرمت مناسب مرورگرهای تقریبا جدید */
         url('http://example.com/fonts/BZar.woff') format('woff'),
         /* تمام مرورگرها به جزء اکسپلورر */
         url('http://example.com/fonts/BZar.ttf') format('truetype'),
         /* نسخه های قدیمی سیستم عامل iOS */
         url('http://example.com/fonts/BZar.svg#BZar') format('svg');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}
</style>
پس از معرفی فونت سفارشی مورد نظر به مرورگر، در گام دوم باید نام فونت را در هر سلکتوری که مد نظر داریم در ویژگی font-family به عنوان اولویت اول درج کنیم، به طور مثال در سلکتور کلاس فرضی post-titr این کار را برای فونت BZar انجام داده ایم، به این ترتیب متون فارسی داخل تگ هایی که کلاس post-titr داشته باشند با فونت BZar نمایش داده می شوند:
<style>
.post-titr {
    font-family: BZar, Tahoma, Geneva, sans-serif;
}
</style>
<div class="post-titr">نمونه متن فارسی</div>
توضیح:
- ابتدا برای فونت مد نظرمان یک نام تعیین می کنیم (به صورت دلخواه) تا در استایل CSS از آن برای ویژگی font-family استفاده کنیم.
- سپس آدرس URL فایل فونت را با فرمت eot برای مرورگر اینترنت اکسپلورر 9 و مابعد مشخص می کنیم.
نکته: در زمینه استفاده از حالت URL به دلیل وجود سیاست امنیت Same-origin ممکن است محدودیت هایی برای بارگذاری فایل های فونت از سرورهای دیگر (به جزء سرور همان سایت) وجود داشته باشد.
- برای رفع مشکل عدم پشتیبانی از فایل های eot در مرورگر اینترنت اکسپلورر 8 و ماقبل، از شیوه هک (با افزودن علامت های #?) استفاده می کنیم.
- عبارت local با این هدف تعریف شده که اگر فونت مورد نظر در سیستم کاربر نصب بود از همان فایل استفاده شود و محتوای اضافه از سرور بارگذاری نگردد، دقت کنیم در این قسمت باید مشخصه شناسایی فونت درج شود که در بیشتر مرورگرها همان نام فایل است اما در مرورگر سافاری عنوان فونت باید درج شود (در اغلب موارد نام فایل و عنوان فونت اندکی با هم تفاوت دارند).
- همان طور که در جدول بالا ملاحظه شد فایل های woff و woff2 بیشترین پشتیبانی و سازگاری را در بین مرورگرهای جدید دارند، همچنین فایل های ttf در اکثر مرورگرها پشتیبانی می شوند، لذا این فرمت ها را هم به استایل خود ضمیمه می کنیم (هر مرورگر بسته به شرایط دسترسی به فایل فونت و پشتیبانی تنها از یکی از آدرس های قسمت src استفاده و سایر موارد را نادیده می گیرد، لذا در نظر گرفتن اولویت و ترتیب صحیح دستورات می تواند مهم باشد).
- فایل svg را برای سازگاری با نسخه های قدیمی سیستم عامل iSO ضمیمه کرده ایم که این کار با توجه به حل مشکل پشتیبانی از فرمت ttf در مرورگرهای جدید دیگر ضرورت چندانی ندارد.
نکته: دقت کنیم هر فرمت در src url با کاراکتر ویرگول (Comma یا ,) بسته شده و در انتهای قسمت src url کاراکتر ویرگول نقطه (Semicolon یا ;) درج می شود، در صورت عدم رعایت این شیوه نگارشی دستور خطا داشته و عمل نخواهد کرد.
- ویژگی های font-style و font-weight به ترتیب فرم (حالت عادی، کشیده، مایل و...) و ضخامت متن را مشخص می کنند،  همچنین برای بهینه شدن بارگذاری صفحه و نمایش متن ها با فونت پیش فرض تا هنگامی که فایل فونتمان بارگذاری کامل نشده می توانیم ویژگی font-display را با مقدار swap در نظر بگیریم.

مثال و پیش نمایش آنلاین


برای آشنایی بیشتر با نحوه تعریف قانون font-face و استفاده از فونت فارسی در وب با استایل CSS در صفحه وب زیر فونت پرکاربرد BYekan اصلاح شده را بررسی می کنیم (در این نمونه کد از فرمت های woff2 و svg استفاده نشده است):
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تعریف و استفاده از فونت فارسی با قانون font-face در وب</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
    font-size: 12px;
}
@font-face {
    /* تعریف نام فونت */
    font-family: 'BYekan';
    /* اکسپلورر 9 به بعد */
    src: url('font/BYekanWeb.eot');
    /* بارگذاری فایل فونت از سرور */
    src: /* هک برای اکسپلورر 8 و ماقبل */
         url('font/BYekanWeb.eot?#iefix') format('embedded-opentype'),
         /* فرمت مناسب مرورگرهای تقریبا جدید */
         url('font/BYekanWeb.woff') format('woff'),
         /* تمام مرورگرها به جزء اکسپلورر */
         url('font/BYekanWeb.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}
.post-titr p {
    font-family: BYekan, Tahoma, Geneva, sans-serif;
    display: block;
    font-size: 16px;    
}
</style>
</head>
<body>
<div class="post-titr">
<p>
این نمونه متن فارسی، نحوه کاربرد قلم BYekan (اصلاح شده برای صفحات وب) را با استفاده از خاصیت font-face در CSS نسخه 3 نمایش می دهد.
</p>
</div>
<hr>
با افزودن src و local این امکان وجود دارد که ابتدا فونت مورد نظر در سیستم کاربر جستجو و در صورت عدم نصب از سرور بارگذاری شود، البته در این نمونه کد فایل صرفا از سرور بارگذاری می شود.
</body>
</html>
پیش نمایش آنلاین
دسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
» ساخت منوی کشویی با تگ ul li و CSS
» ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
» چسبیدن فوتر قالب به پائین صفحه با CSS
» ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
» تنظیم موقعیت در وسط و حذف حاشیه ها با 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 لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





5 × 5
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form آی تی
در:
ممنون آینده کاری پی اچ پی خوبه یا جاواسکریپت؟
۱۴۰۰/۰۴/۳۰

form رضا
در:
با عرض سلام و خسته نباشید ایا امکان این قضیه در outlook وجود دارد که ما ادرس فرستنده را از طریق آن بتوانیم پیدا...
۱۴۰۰/۰۴/۳۰

form محمود
در:
سلام مهندس چگونه می شود میزان حرکت اسکرول را تعیین کرد. یعنی با یه حرکت غلطک موس صفحه بعدی در کادر قرار بگیرد....
۱۴۰۰/۰۴/۳۰

form محمد
در:
سلام خیلی خیلی ممنون تشکر
۱۴۰۰/۰۴/۲۷

form محمود
در:
سلام چگونه حاشیه های ناتمام ایجاد کنیم. یعنی تمام دور کادر کامل نباشد و بردر دور کادر ناقص باشد. مثلن بردر سمت راست تا...
۱۴۰۰/۰۴/۲۷

form محمد
در:
سلام ببخشید من با curl میخواستم فایلی رو با api بفرستم ولی جواب نداد اگر امکانش هست تصحیحش کنید:
۱۴۰۰/۰۴/۲۷

form برنامه نویس
در:
سلام و عرض ادب خدمت استاد. یه سوال خدمت شما داشتم. چطور می تونیم از ادیتور مثل ckeditor یا tinymsc به جای textarea...
۱۴۰۰/۰۴/۲۷

form جواد
در:
با سلام من دانشی از برنامه نویسی ندارم ، میشه برنامه ای نوشت که آدرس یک صفحه بعد از لاگین شدن بهش داد و هر...
۱۴۰۰/۰۴/۲۱

form علی
در:
سلام خوبین؟ من میخوام برای وبلاگم سبد خرید بزنم ولی php و ........ بلد نیستم اگه برام درست کنین ممنونتون میشم
۱۴۰۰/۰۴/۱۹

form سینا الف
در:
باسلام! من از این آموزش‌ سایت‌تون هم خیلی استفاده کردم. ضمن تشکر صمیمانه از مدیریت وبگو بابت مطالب مفید و کاربری اش، سوالی درباره...
۱۴۰۰/۰۴/۱۸

form محمود
در:
سلام و تشکر از کمک های قبلی تان. در بخش بالا قسمت «تغییر رنگ پس زمینه با کلیک کاربرم» را خوندم . ولی کد...
۱۴۰۰/۰۴/۱۸

form محمود
در:
با سلام دوباره نمونه کدی که برای افکت پس زمینه چراغ پلیس و صدا قرار دادین خیلی خوب کار میکند و بسیار سپاس ....
۱۴۰۰/۰۴/۱۴

form احمد
در:
سلام خسته نباشید من یه کد نوشتم که قیمت کالا ها و نام کالا ها رو از یه صفحه برام استخراج کنه و بصورت جدول...
۱۴۰۰/۰۴/۱۴

form محمود
در:
سلام و عرض ادب چگونه می شود با کلیک روی یک متن ، کل پس زمینه در یک آن چشمک بزند یعنی رنگ...
۱۴۰۰/۰۴/۱۱

form مجید
در:
سلام. من برنامه ای دارم که بر اساس php و mysql کار میکنه. بهش 100 جمله میدم و جملات رو تصادفی نمایش میده. حالا میخام...
۱۴۰۰/۰۴/۱۰

form Amir
در:
خیلی عالی بود
۱۴۰۰/۰۴/۱۰

form Amir
در:
سلام ببخشید یک کانال تلگرامی است که سیگنال میده و شرطی اینکه در آلپاری و لایت فارسی حساب داشته باشی و تحت ای پی آنها...
۱۴۰۰/۰۴/۱۰

form مجید
در:
خیر ببینی جوون - این اسکرول افقی کلی اعصاب رو بهم ریخته بود .
۱۴۰۰/۰۴/۰۷

form جین مین
در:
با سلام و وقت بخیر من تمام مراحل رو به نظر خودم درست انجام دادم و فایل هم دانلود میشه اما مشکل اصلی اونجاست...
۱۴۰۰/۰۴/۰۶
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.