فونت های سفارشی یکی از جذاب ترین جنبه های CSS3 برای طراحان هستند. با صورت فونت قانون، شما می توانید هر فونتی را که به صورت آنلاین در وب خود دارید رندر کنید page متن، صرف نظر از اینکه کاربر آن را نصب کرده است یا خیر.

مانند بسیاری از تکنیک‌های CSS3، کد اصلی بسیار ساده است، اما واقعیت عملی کمی پیچیده‌تر است.

در این آموزش کوتاه، اصول قرار دادن فونت های سفارشی در صفحات شما را بررسی می کنیم.

فونت را آپلود کنید

ابتدا مطمئن شوید که فونتی که می خواهید استفاده کنید دارای مجوز برای استفاده در وب باشد. تقریباً از تمام فونت های رایگان می توان استفاده کرد روی یک وب سایت و بسیاری از فونت های ممتاز با مجوزی در دسترس هستند که استفاده از وب را پوشش می دهد.

سپس فونت انتخابی خود را در سرور خود آپلود کنید. ممکن است بخواهید آن را در یک فهرست اختصاصی “fonts” ذخیره کنید، اما این اختیاری است.

به یاد داشته باشید که فایل‌ها را برای هر نوع فونتی که قصد دارید اضافه کنید روی استفاده، مانند پررنگ یا مورب. می توانید از فایل های EOT (Embedded OpenType) برای اینترنت اکسپلورر و از OTF (OpenType) یا TTF (TrueType) برای بقیه استفاده کنید. (گزینه های اضافی عبارتند از WOFF (قالب فونت باز وب) و SVG (گرافیک برداری مقیاس پذیر) اما ما در اینجا به انواع رایج تر می پردازیم.)

محل ذخیره فایل های فونت را یادداشت کنید روی سرور شما

یک بخش font-face به کد CSS خود اضافه کنید

فایل HTML یا CSS را باز کنید page شما در حال کار با a اضافه کنید صورت فونت اعلان به کد سبک:

@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');

به عنوان یکی دیگر از معیارهای اختیاری کارایی، می‌توانیم مرورگر را وادار کنیم که یک کپی محلی از فونت را در صورتی که کاربر قبلاً آن را داشته باشد، بررسی کند. کد خود را دوباره به صورت زیر گسترش دهید، قبل از مشخص کردن URL، بخش محلی را اضافه کنید تا فونت فقط در صورت لزوم دانلود شود:

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');

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

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

فونت را اعمال کنید page عناصر

در نهایت می‌توانیم فونت را روی آن اعمال کنیم page عناصر در کد CSS برای یک عنصر خاص، یا گروهی از عناصر، به سادگی نام فونت مورد استفاده خود را مشخص کنید، از جمله مواردی که انتخاب می کنید:

div { font-family: 'lovelyFont', sans-serif; }

شامل انواع فونت

به عنوان مثال، اگر می خواهید از یک نسخه پررنگ از فونت خود نیز استفاده کنید، به سادگی دیگری را وارد کنید صورت فونت بخش با URL فایل فونت پررنگ و اعلان “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; }

همین!

آیا از CSS3 برای گسترش نوع چهره های موجود برای شما استفاده می کنید؟ آیا از سرویسی مانند Adobe’s Typekit یا Webfonts Google استفاده می کنید؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر فونت از طریق Shutterstock.