آموزش برنامه نویسی وب و مهارتهای مرتبط

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

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

یکی از قابلیت های خوب افزوده شده به 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

برچسب ها: CSS - طراحی وب

قبلی »

« بعدی

مطالب بیشتر:
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
چسبیدن فوتر قالب به پائین صفحه با CSS

دیدگاه

۵۶ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

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

۱۱:۱۱ ۱۴۰۲/۰۶/۲۲

سلام
برای تب منو فونت فیس برای تب اول کار میکند اما تب های بعدی اعمال نمیشود چکار باید کرد

برای درک علت اصلی بروز مشکل عنوان شده سورس کدهای سایتتان باید دقیق بررسی شوند، احتمالا مشکلی در اختصاص کلاس یا آی دی CSS به تب های منو وجود دارد، به طور مثال font-face برای کلاس فعلی تب ها به درستی تعریف نشده است.

روزبه پارسی

۱۲:۴۰ ۱۴۰۱/۱۲/۱۳

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

حذف شد

یه جا برای شماره نوشته (نمایش کامل) که باید کلیک کنیم تا شماره بیاد چطوری کاری کنیم با php و یا java اون شماره نشون داده بشه و لازم نباشه روش کلیک کنیم؟
با تشکر
بازم از لطف و محبت شما سپاسگزارم

در ساز و کار فعلی سایت مورد نظر ابتدا باید با تنظیم دستورات PHP مقدار data-reveal-description را از تگ p مربوط به آگهی استخراج کنیم (به فرض 200432076) سپس با ارسال درخواست به API سرور به صورت آدرس نمونه زیر:

https://example.com/api/web/listings/200432076/description

پاسخ را در قالب JSON دریافت و در نهایت باید اطلاعات مورد نظری که در پارامترهای پاسخ وجود دارد را تجزیه کنیم که در این مرحله بلد بودن JSON در جاوا اسکریپت (JSON.parse) مورد نیاز است، در کل کدنویسی این فرآیندها چند مرحله ای و زمانبر است.

روزبه پارسی

۱۲:۳۶ ۱۴۰۱/۱۲/۱۳

با تشکر از شما استاد عزیز
خیلی خوب بود توی صفحه اگه چند تا پاراگراف داشته باشیم که بخواهیم این تغییر رنگ رو برای همه انجام بده که رنگ هیچ کدوم از پاراگراف ها شبیه هم نباشه اون موقع چه کاری باید انجام بدیم؟
چون من یه صفحه دارم که مطالب مختلف داره و می خوام رنگها با هم فرق داشته باشه که بتونم تشخیص بدم کدوم break شده! این کدی که شما زحمت کشید خیلی خوبه ولی همه پاراگراف ها رو به شکل نشون میده
با تشکر مجدد از شما

برای تمایز پاراگراف ها با رنگ متمایز باید کد را توسعه دهیم، به طور مثال نمونه دستورات زیر تمام تگ های p در صفحه را استخراج و متن آنها را به رنگ های متمایز نمایش می دهد:

<script>
function changeParagraphColor(){
	var tag = document.getElementsByTagName('p');
	var colors = new Array("CCCCCC", "FF00CC", "66FF00");
	var num, last;
	
	for(var i = 0; i < tag.length; i++){
	    num = Math.floor(Math.random() * 3);
		while(num == last) {
		    num = Math.floor(Math.random() * 3);
		}
		
	    tag[i].style.color = '#' + colors[num];
		last = num;
	}
}
window.onload = function(){
    changeParagraphColor();
}
</script>
<p>Test Text 1</p>
<p>Test Text 2</p>
<p>Test Text 3</p>
<p>Test Text 4</p>

روزبه پارسی

۱۱:۴۱ ۱۴۰۱/۱۲/۱۲

با سلام و خسته نباشید
ببخشید من یه متن دارم که می خوام هر وقت صفحه رو لود می کنم متن رنگش بصورت راندوم تغییر کنه با css و یا جاوا امکانش هست؟
لطفا راهنمایی کنید
با تشکر فراوان

برای تغییر رنگ متن به صورت اتفاقی می توانیم از جاوا اسکریپت به صورت نمونه زیر استفاده کنیم:

<script>
function changeTextColor(id){
    var elm = document.getElementById(id);
	var colors = new Array("CCCCCC", "FF00CC", "66FF00");
	elm.style.color = '#' + colors[Math.floor(Math.random() * 3)];
}
window.onload = function(){
    changeTextColor('test-id');
}
</script>
<span id="test-id">Test Text</span>

در این نمونه کد رنگ ها به صورت کد هگز در آرایه (متغیر colors) تعریف می شوند که می توانیم تعداد بیشتر یا کمتری در نظر بگیریم، اگر مقدار پیش فرض اضافه یا کم شوند باید تعداد جدید را جایگزین عدد 3 کنیم، همچنین آی دی بلاک span (در اینجا test-id) باید مطابق با آی دی بلاک مد نظرمان در کدها تنظیم شود.
نکته: این کد در هر بار رفرش صفحه به صورت اتفاقی یک رنگ را انتخاب می کند بنابراین امکان تکراری بودن انتخاب رنگ ها وجود دارد.

من

۰۴:۱۰ ۱۴۰۰/۰۴/۰۴

توضیحات کمک نکرد اخرش از سورس فایلای سایتتون فونت shabnam و فایلای سی اس استونو ورداشتم حل شد :)

زمان انتشار این مطلب امکانات محدودی در زمینه فونت های فارسی وجود داشت و فونت های استاندارد به راحتی قابل دانلود و استفاده نبود، در هر صورت مطلب به زودی بازنگری و به روزخواهد شد، خیلی ممنون از بازخورد سازنده شما :)

amin

۱۷:۴۹ ۱۴۰۰/۰۲/۱۸

سلام و احترام ، در خصوص preload و prefetch برای فونت هم میفرمایید؟ کاهش سرعت لود

در حالت معمول مرورگرها بر اساس چینش تگ های HTML از بالا به پائین منابع مورد نیاز جهت نمایش صفحه وب به فرض تصاویر، فونت ها (استایل CSS)، کدهای جاوا اسکریپت و... را با تعیین اولویت پیش فرض خود بارگذاری می کنند و به همین دلیل ممکن است پردازش اطلاعات جهت نمایش اولین نشانه های سایت درخواست شده معطل به فرض بارگذاری یک فایل حجیم شود، از این رو جهت بهبود فاکتورهایی مانند LCP (مخفف Largest Contentful Paint) سایت در زمینه بهینه سازی امکانی تحت عنوان preload و prefetch در مرورگرهای جدید معرفی شده است، preload برای مواقعی است که منبعی در صفحه جاری بلافاصله پس از پایان بارگذاری استفاده خواهد شد اما مرورگر می تواند بارگذاری آن را با اولویت پائین تری نسبت به سایر منابع انجام دهد و به اصطلاح معطل آن بارگذاری نماند، prefetch برای مواردی است که منبع مورد نظر بلافاصله بعد از بارگذاری استفاده نمی شود و ممکن است به فرض با کلیک کاربر روی امکان خاصی یا با پیمایش به صفحات دیگری نیاز به استفاده از آن منبع (از حافظه Cache) باشد، لذا منابع prefetch در انتهای فرآیند بارگذاری قرار می گیرند.
برای فونت ها می توانیم قبل از استایل CSS فایل ها را با خاصیت preload وارد صفحه کنیم، به فرض:

<link rel="preload" href="fonts/font-farsi-name.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="fonts/font-farsi-name.ttf" as="font" type="font/ttf" crossorigin="anonymous">

در استفاده از این امکانات باید به سطح پشتیبانی مرورگرها توجه داشته باشیم:

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#browser_compatibility

عبدالمالت ریالی

۱۲:۱۷ ۱۳۹۹/۰۸/۰۱

سلام علیک میشه از چند فونت در یک صفحه html استفاده کرد.؟

بله هیچ محدودیتی از این نظر وجود ندارد منتها باید font-family های متفاوت تعریف و Class یا ID برای بلاک های مورد نظر داشته باشید، به فرض:

<style>
.div-1 {
	font-family: Tahoma, sans-serif;
}
.div-2 {
	font-family: Arial, sans-serif;
}
</style>
<div class="div-1">متن نمونه</div>
<div class="div-2">متن نمونه</div>

ali

۱۴:۰۶ ۱۳۹۹/۰۱/۱۶

سلام وقت همه دوستان بخیر
من برای یاد گرفتن با وردپرس از هاست رایگان استفاده کردم (سی پنل آنلاین با ظرفیت 5 گیگ)
قالب Zephyr روی وردپرس نصب کردم این قالب پیش فرض فونت فارسی tahoma را نمایش میده از فونت byekan می خوام استفاده کنم فونت رو با استفاده از کد زیر به استایل معرفی کردم:

@font-face {
    font-family: 'byekanweb';
    src: url('fonts/BYekan-webfont.eot') format('eot'),
         url('fonts/BYekan-webfont.woff') format('woff'),
         url('fonts/BYekan-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body,div,q,h1,h2,h3,h4,h5,h6,p,ul li,li,span p,div p,input,small,button, blockquote{
  font-family:byekanweb !important ;                                                                                                                                                                                                                                                                                                                                   }

وقتی مشاهده سایت (کنترل + f5 هم میزنم) را میزنم فونت byekan را نمی خونه همون فونت tahoma را نمایش میده دوستان ممنون میشم راهنمایی کنید

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

esmaeel

۱۹:۲۹ ۱۳۹۸/۱۰/۱۹

سلام من فونتا رو اوکی می کنم تو وبسایت وقتی با کامپیوتر میرم فونتا درسته ولی وقتی با گوشی میرم فونت نمیاد مشکلش چی میتونه باشه ؟

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

Navid

۰۱:۵۶ ۱۳۹۸/۰۲/۱۱

ممنون از شما بالاخره تونستم بارگذاری کنم اما تو h که میذارم یعنی سایز فونت bold میشه بینه حروف فاصله می افته .. نمی دونم چرا؟

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

navid

۰۱:۲۷ ۱۳۹۸/۰۲/۰۱

سلام
سوالم اینه : چند روزی درگیر وارد کردن فونت به سایتم هستم اما متاسفانه تستم منفیه و نمیتونم نتیجه ای دریافت کنم تمام مراحلو دقیقا مثل آموزش رفتم .....

لطفا فونت مد نظر را در سایتتان درج و سپس آدرس نمونه صفحه را جهت بررسی در همین قسمت ارسال کنید.

مجتبی

۱۳:۵۰ ۱۳۹۷/۱۱/۲۴

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

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

مجتبی

۱۳:۲۵ ۱۳۹۷/۱۱/۲۴

با سلام خدمت شما
این مراحلی که گفتینو انجام دادم و توی کامپیوتر از فونت فارسی پشتیبانی می کنه و مشکلی نداره اما وقتی با گوشی اندروید وارد سایت میشم از فونت فارسی پشتیبانی نمیکنه. علتش چیه؟
با تشکر

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

محمد

۱۴:۰۵ ۱۳۹۷/۰۷/۰۲

خوب فونت سایت خوده شما چیه واسه همین صفحه ؟

در حال حاضر فونت Tahoma که یکی از فونت های پیش فرض وب برای زبان فارسی است!

زهره

۱۴:۳۴ ۱۳۹۶/۰۴/۲۸

سلام
من تازه دارم طراحی سایت یاد می گیرم و میخوام فونت ایران سنس و به وردپرس اضافه کنم هر کاری می کنم نمی تونم
میشه کمکم کنید؟

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

نخست

قبلی

بعدی

آخر

صفحه 1 از 4

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