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

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

0 نظرات

با سلام به همه ی دوستان 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 باشید!
برچسب ها
مطالب مرتبط
نظرات
هیچ نظری ارسال نشده است

    برای ارسال نظر ابتدا به سایت وارد شوید

    arrow