پارسا صفوی
پارسا صفوی
برنامه نویس وب

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

چگونه از Web Font در CSS استفاده کنیم؟ در گذشته ای نزدیک تمامی صفحات وب فارسی از فونت های انگلیسی مثل فونت tahoma استفاده می کردند که اصلا زیبا نبودند و اعداد آنها هم به شکل انگلیسی وارد می شد. اما یه چند سالی هست (از زمان آمدن CSS3)که ما در میان صفحات وب فونت های کاملا فارسی مشاهد می کنیم که جلوه ی فارسی تری به سایت می دهند.ما توی این آموزش می خواهیم یاد بگیریم که چطور از این امکان CSS استفاده کنیم.

مجموعه دوره آموزش طراحی و برنامه نویسی سایت - مقدماتی تا پیشرفته
برای شروع آموزش طراحی سایت کلیک کن
itpro header

برای این کار من یک پروژه ی کوچیک درست می کنم.که در آن یک فایل index.html و فایل فونت مورد نظر وجود داره.

	<!DOCTYPE html>
	<head>
		<style>
			*{
				margin:0;
				padding:0;
			}
			body{
				direction:rtl;
			}
		</style>
	</head>
	<html>
	<body>

	<p>این متن یک فونت فارسی دارد</p>

	</body>
	</html>

خروجی:

font web

خب حالا کافی است که فونت خودم رو به CSS اضافه کنم.

@font-face {
				font-family: BYekan;
				src: url(BYekan.ttf);
			}

در بخش font-family نامی که قرار است در صفحه ی CSS ، من از آن برای استفاده از Font قرار دهم و در بخش src آدرس فونت من قرار می گیرد.بعد از اتمام این کار فقط کافیه که شما فونت رو به المان مورد نظر بدید.

p{
				font-family:BYekan;
			}

فونت به صفحه تگ p داده شد . خروجی:

web font

ولی کار تمام نشده ! از آنجایی که در نسخه های مختلف مرورگر های مختلف این امکان کمی تفاوت دارد ما می خواهیم برای محکم کار چند نوع از فونت خودمان را در CSS آدرس دهی کنیم تا مشکلی در load فونت پیش نیاید.برای تبدیل فونت به فرمت های مختلف شما می توانید از لینک زیر استفاده کنید:

من فونت با فرمت woff را هم به پوشه ی پروژه ام اضافه کردم . حالا کافی است که src را در کد font-face به شکل زیر تغیر دهیم:

src: url('BYekan.ttf') format('truetype'),
				url('BYekan.woff') format('woff');
  • نکته : در کد css جدید من قسمتی به نام format اضافه شد که جهت جلوگیری از مشکل در browser های مختلف است.

کار تمام شد و اکنون می توانید همه جای فایل پروژه ی خود از آن استفاده کنید. پارسا صفوی - توسینسو باشید!

0 4
پارسا صفوی
پارسا صفوی

برنامه نویس وب

طراح و برنامه نویس Full-Stack وب

نظرات