آموزش تصویری اضافه کردن فونت به وبلاگ ها و سایت ها
در مقاله سعی داریم شما را با روشی آشنا کنیم که قادر خواهید بود فونت دلخواه و مورد نظر خود را روی صفحات وب بکار گیرید طوری که نیازی نیست تا فونت مورد نظر در سیستم کاربران وجود داشته باشد بلکه با این روش فونت دلخواه تان روی صفحات وبتان Import خواهد شد و متون را با فونت مشخص نمایش خواهد داد . این ویژگی در CSS3 اضافه شده است که در این مقاله به چگونگی کار با این ویژگی دوست داشتنی بنام @font-face آشنا خواهید شد و قادر خواهید بود فونت های دلخواه خود را روی صفحات وب اعمال کنید
1-ابتدا فونت دلخواه خود را انتخاب کنید و به فرمت های eot ، woff تبدیل نماید .برای تبدیل کافیست
1-اول به سایت زیر مراجعه کنید:
http://onlinefontconverter.com/
فونت خود را به قسمت بالا درگ کنید یا با کلیک گرینه or select file فونت خود را از سیستم انتخاب کنید.
حال بعد از آپلود کافیست تا فایل را به فرمت های WOFF و TTF و EOT را دانلود فرمائید.
هر بار که روی هر فونت مورد نظر کلیک می کنید آپلود شده و در قسمت دانلود اضافه می شود تا به راحتی با کلیک روی فونت روبه روی دالنود دانلود فرمائید.
بعد از دانلود هر 3 فونت بالا کافیست فونت ها را در هاست یا آپلودر ها آپلود و مراحل زیر را ادامه دهید
سپس کد زیر را به کد های CSS خود اضافه کنید :
@font-face {
font-family: ‘BYekan’;
src: url(‘fonts/BYekan.eot?#’) format(‘eot’), /* IE6–۸ */
url(‘fonts/BYekan.woff’) format(‘woff’), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url(‘fonts/BYekan.ttf’) format(‘truetype’); /* Saf3—۵, Chrome4+, FF3.5, Opera 10+ */
}
در این مثال ما فونت BYekan را قصد داریم به صفحه وب خود اضافه کنیم . دقت کنید که بعد از تبدیل فونت ها باید روی سرور سایت شما یا یک سرور دیگر که امکان لینک مستقیم داشته باشد(مخصوص وبلاگها) آپلود شود و آدرس فونت در قسمت url داده شود تا فونت شما از آن آدرس به صفحات وبتان Import گردد .
با خاصیت font-family برای فونت خود نام را انتخاب کنید که بتوانید با آن نام در کد های css و html از آن استفاده نمایید .
یک مثال از نحوه بکار گیری :
“style=”font-family: BYekan
