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

[align=center]

[/align]

مانند بسیاری از تکنیک های CSS3 ، این کد نیز در ابتدا کاربرد ساده ای دارد ولی در عمل و مباحث پیشرفته تر کمی کدها پیچیده می شوند.

در این مطلب کوتاه قصد داریم با روش های ساده ، فونت های  دلخواه مان را به صفحه اضافه کنیم

[size=x-large]آپلود فونت[/size]

ابتدا فایل های فونت مورد نظرتان را روی وب آپلود کنید .البته بهتر است همه آنها در یک پوشه بنام Fonts باشند ولی اختیاری است.

فراموش نکنید انواع مختلف یک فونت را آپلود کنید مثلا کلفت (Bold) و کج (Italic) . (معمولا فونت های ویندوز رو می تونید در مسیر c:\windows\fonts پیدا کنید)

معمولا از نوع فونت EOT یا (Embedded OpenType) برای مرورگر اینترنت اکسپلورر و از دو نوع دیگر OTF  یا (OpenType)  و  TTF یا (TrueType) برای مرورگرهای دیگر استفاده می شود .(البته می توانید فونت هایی از نوع WOFFیا  (Web Open Font Format) و SVG یا  (Scalable Vector Graphics) را نیز بکار ببرید ولی ما در اینجا از انواع عمومی تر فونت های که در بالا آمد استفاده می کنیم)

محل ذخیره فونت های روی سرور نیز به خاطر بسپارید تا بریم سراغ ادامه کار …
افزودن بخش font-face به فایل CSS مان

فایل css یا html مورد نظرتون رو باز کنید و کد font-face مثل زیر رو بهش اضافه کنید

@font-face {
}

در داخل بخش font-face ابتدا یک نام به فونت اختصاص بدهید تا بعدا با فراخوانی آن بتوانیم فونت را به عناصر صفحه اعمال کنیم (این اسم اختیاری است و حتما لازم نیست اسم فونت باشد ولی بهتر است با معنی و خوانا باشد)

font-family: 'lovelyFont';

حالا نوبت یه اضافه کردن مسیر فراخوانی فایل EOT می رسد
src: url('fonts/lovely_font.eot');
دقت کنید که مسیر و نام فایل در اینجا خیلی مهم است . خوب حالا می خواهیم فایل های OTF و/یا TTF را اضافه کنیم

src: 
	url('fonts/lovely_font.otf') 
src: 
	url('fonts/lovely_font.ttf')

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

src: 
	url('fonts/lovely_font.otf') 
	format('opentype');
src: 
	url('fonts/lovely_font.ttf') 
	format('truetype');

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

src: 
	local('Lovely Font'),
	local('Lovely-Font'),
	url('fonts/lovely_font.otf') 
	format('opentype');
src: 
	local('Lovely Font'),
	local('Lovely-Font'),
	url('fonts/lovely_font.ttf') 
	format('truetype');

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

[size=large][size=x-large]اعمال فونت به عناصر صفحه[/size][/size]

و حالا می توانید فونت دلخواه تون رو به عناصر مختلف صفحه اعمال کنید.برای این کار کافیه سم فونت رو قبل زا همه اعمال کنید
div { font-family: 'lovelyFont', sans-serif; }
استفاده از اشکال مختلف یک فونت

برای مثال اگر می خواهید از نسخه bold فونت نیز استفاده کنید کافیه یک بخش font-face دیگه به سبک تون اضافه کنید و مثل بالا ، مسیر و نام فایل فونت bold رو به اون بدید و در انتها کد “font-weight:bold” رو اضافه کنید. پس کد نهایی به این شکل خواهد بود

/*default version*/
@font-face {
	font-family: 'lovelyFont';
	src: url('fonts/lovely_font.eot'); 
	src: 
		local('Lovely Font'),
		local('Lovely-Font'),
		url('fonts/lovely_font.otf') 
		format('opentype');
}
/*bold version*/
@font-face {
	font-family: 'lovelyFont';
	src: url('fonts/lovely_font_bold.eot'); 
	src: 
		local('Lovely Font Bold'),
		local('Lovely-Font-Bold'),
		url('fonts/lovely_font_bold.otf') 
		format('opentype');
	font-weight: bold;
}
/*container element*/
div { font-family: 'lovelyFont', sans-serif; }
/*span elements inside the container div*/
span { font-weight: bold; }

همین !

شما از چه روشی استفاده می کنید؟از cufon جی کوئری یا typekit ادوبی ، شاید هم google web fonts? لطفا روش خودتون و نظرات تون رو  بگین تا با هم یاد بگیریم …

منبع: http://fotolia.ir

آخرین ویرایش: 16-05-2017 ???? 12:35، توسط moh3en