در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

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

با سلام به همه ی دوستان itpro!

درگذشته ای نزدیک تمامی صفحات وب فارسی از فونت های انگلیسی مثل فونت 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 فونت پیش نیاید.

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

Web Font Generator

من فونت با فرمت woff را هم به پوشه ی پروژه ام اضافه کردم.

حالا کافی است که src را در کد font-face به شکل زیر تغیر دهیم:

src: url('BYekan.ttf') format('truetype'),
				url('BYekan.woff') format('woff');

نکته:

در کد css جدید من قسمتی به نام format اضافه شد که جهت جلوگیری از مشکل در browser های مختلف است.

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

پارسا صفوی - itpro باشید!

0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....