خانه آموزش CSS آموزش ویژگی های CSS آموزش دستور font-face در CSS

آموزش دستور font-face در CSS

توسط

۱۳۹۹-۰۱-۲۷

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش دستور font-face در CSS با من همراه باشید.

آموزش دستور font-face در CSS

Free-Learn

آنچه در این جلسه میخوانید :

1 دستور font-face در CSS
2 فرمت های مختلف یک فونت وب
3 جدول پشتیبانی مرورگرها از فرمت های فونت وب
4 نحوه بدست آوردن فرمت های فونت وب
5 نحوه تعریف فونت دلخواه در سایت
6 مثال از دستور font-face در CSS
7 شکل نوشتاری
8 جدول مقادیر دستور font-face در CSS
9 نکات و توضیحات
10 دانلود فونت + مثال این آموزش

دستور font-face در CSS

با استفاده از دستورالعمل / قانون font-face@ در CSS میتوان در یک صفحه وب ( یا درکل وبسایت ) ، فونت های دلخواه خودمون رو تعریف و یا درکل نصب نماییم.

قبل از اینکه دستور font-face در CSS به وجود بیاد، خب ما مجبور بودیم از فونت های پیش فرض سیستمی ( فونت هایی که با نصب سیستم عامل بروی سیستم کاربر نیز نصب میشوند ) مثه Tahoma یا Arial یا Verdana استفاده نماییم.

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

ولی الان دیگه با وجود دستور یا قانون font-face ما به راحتی میتونیم فونت های دلخواه خودمون رو بروی وبسایتمون نصب کنیم، تا متن های موجود در سایتمون با فونت دلخواه خودمون نمایش داده بشه.

تعریفی از فونت : قلم رایانه به مجموعه‌ای از یک الفبایِ کامل و هم خانواده، با حالت های مختلفِ حروف و دیگر کارکترهایِ ( اعداد و علائمِ ) موردِ نیازِ حروف چینی گفته می شود، و از سویِ دیگر به هر یک از این حالت‌ ها و اجزایِ این مجموعه که شاملِ حروف، اعداد و دیگر علائمِ نگارشی می باشند، فونت یا Font گفته می شود.

Free-Learn

فرمت های مختلف یک فونت وب

یک فونت وب یا فونتی که قرار است در وب و وبسایت استفاده شود باید دارای چندین فرمت مختلف باشد، که این فونت بتونه در همه ی مرورگرهای اینترنتی نمایش داده بشه، این فرمت ها به شرح جدول زیر می باشند :

نوع فرمت	توضیح
TTF	مخفف TrueType Font یک فرمت استاندارد که توسط مایکروسافت و اپل ایجاد شده. این فرمت بیشترین استفاده رو در سیستم عامل های ویندوز (مایکروسافت) و مک (اپل) دارد.
OTF	مخفف OpenType Font ساخته شده از فرمت TTF و متعلق به مایکروسافت امروزه در سیستم های کامپیوتری از این نوع فرمت استفاده می شود.
WOFF	مخفف Web Open Font Format این فرمت مخصوص استفاده در وب می باشد. این فرمت از ترکیب ۲ فرمت TTF و OTF بصورت فشرده بدست آمده.
WOFF2	مخفف Web Open Font Format – همان WOFF می باشد. ولی فرمت WOFF2 با فشرده سازی بیشتری ایجاد شده.
SVG	مخفف Scalable Vector Graphics دارای سرعت فراخوانی بیشتر نسبت به بقیه فرمت ها معمولا و بیشتر این فرمت توسط مرورگر Safari پشتیبانی میشود و در حال حاضر توسط Firefox ، IE یا IE Mobile پشتیبانی نمی شوند.
EOT	مخفف Embedded OpenType شکل کامل و جمع وجور شده فرمت OTF می باشد. این فرمت فقط در مرورگر IE پشتیبانی میشود.

سوال : خب این همه فرمت برای چیه؟ مگه نمیشه فقط از ۱ یا ۲ تا از این فرمت ها استفاده کرد؟؟ یعنی حتما باید همه فرمت های زیر رو داشته باشیم.

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

ادامه پاسخ : مثلا TTF برای چیه؟ فونت هایی که ما روی ویندوز داریم از نوع TTF هستند، خب اگه مثلا فونت مورد علاقه من روی سیستم فلان کاربر نبود خب دیگه مرورگر از TTF و دیگر فرمت ها استفاده میکنه برای نمایش فونت مورد علاقه من در سیستم کاربر.

ادامه پاسخ : پس بطور کلی همه ی این فرمت ها صرفا برای صحیح تر نمایش دادن فونت ما بروی مرورگرهای مختلف و سیستم های مختلف می باشد. (مثلا فرمت EOT برای نمایش فونت ما در مرورگر اینترنت اکسپلورر می باشد)

Free-Learn

جدول پشتیبانی مرورگرها از فرمت های فونت وب

در جدول زیر میتوانید مشاهده نمایید که چه نسخه ای از مرورگرهای اینترنتی از فرمت های وب فونت یا بطور کلی از دستور font-face در CSS پشتیبانی می کنند.

فرمت	Chrome	Firefox	Opera	Safari	IE
TTF/OTF	۴٫۰	۳٫۵	۱۰٫۰	۳٫۱	۹٫۰
WOFF	۵٫۰	۳٫۶	۱۱٫۱	۵٫۱	۹٫۰
WOFF2	۳۶٫۰	۳۵٫۰	۲۶٫۰	۱۰٫۰	خیر
SVG	۴٫۰	خیر	۹٫۰	۳٫۲	خیر
EOT	خیر	خیر	خیر	خیر	۶٫۰

Free-Learn

نحوه بدست آوردن فرمت های فونت وب

خب در جدول بالا ما متوجه شدیم که باید از فونت دلخواهمون فرمت های مختلفی همچون WOFF و EOT و.. داشته باشیم، خب حالا چجوری باید این فرمت هارو بدست بیاریم.

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

اگه فرمت TTF رو نداشتید و در عوض دیگر فرمت هارو مثه WOFF داشتید، باز مانعی نیست برای آنها نیز ابزار / سایت آنلاین برای تبدیل وجود دارد.

حال اگه فقط فرمت TTF فونت رو دارید خب خیلی راحت الان با استفاده از سایتی که در ادامه معرفی میکنم میتونیم دیگر فرمت های فونت رو برای استفاده در سایت به راحتی بدست آوریم.

وارد سایت web-font-generator.com شوید، سپس همانند تصویر زیر بروی دکمه ..Brows کلیک نمایید و از داخل سیستم خودتان فایل فونت TTF رو انتخاب نمایید.

اگه سایتی که بهتون معرفی کردم زیاد براتون جذاب نیست میتونید از سایت onlinefontconverter.com نیز استفاده نمایید.

همچنین تیک گزینه …I’m uploading a font را بزنید تا اجازه تبدیل و ایجاد وب فونت ها برای شما صادر شود.

آموزش دستور font-face در CSS

در نهایت برای شروع عمل تبدیل / ایجاد دیگر فرمت های فونت بروی دکمه Generate web font کلیک نمایید.

حال کمی صبر نمایید تا عمل تبدیل به پایان برسد، سپس همانند تصویر بروی دکمه ی Download Package کلیک نمایید و فایل فشرده شده (zip) فایل های فونت تون رو دانلود نمایید.

آموزش دستور font-face در CSS

حال اگه محتویات فایل فشرده شده رو مشاهده نمایید میبینید که فرمت TTF ما به فرمت های EOT,WOFF,SVG تبدیل شده و حتی اگه فایل styles.css موجود در پکیج رو باز کنید میتوانید دستورات CSS لازم برای تعریف فونت بروی سایت را نیز مشاهده نمایید.

آموزش دستور font-face در CSS

Free-Learn

نحوه تعریف فونت دلخواه در سایت

خب ما فرمت های مختلف فونت مون رو بدست آوردیم، حالا میریم برای تعریف این فونت ها بروی صفحه وبمون ، پس همه ی فرمت های فونت رو درون یک پوشه بگذارید و اسمشو بزارید Fonts یا هراسمی که دوست داشتید.

بطور کلی ۲ مرحله داریم برای تعریف و استفاده از فونت دلخواه مون بروی سایت :

مرحله اول : باید از دستور font-face@ برای تعریف فونت مون استفاده نماییم : ( پس دستورات زیر رو باید در ابتدای فایل CSS تون اضافه کنید )

@font-face {
  font-family: 'نام خانوادگی فونت';
  src: url('مسیر / محل فونت') format('فرمت فونت'),
  url('مسیر / محل فونت') format('فرمت فونت'),
  url('مسیر / محل فونت') format('فرمت فونت');
}

@font-face {

font-family: 'نام خانوادگی فونت';

src: url('مسیر / محل فونت') format('فرمت فونت'),

url('مسیر / محل فونت') format('فرمت فونت'),

url('مسیر / محل فونت') format('فرمت فونت');

}

خب پس همانند شکل کلی بالا ما با استفاده از دستور font-face@ اول یک نام برای فونت مون مشخص میکنیم و بعدش میایم و دونه به دونه فایل ها و فرمت های فونت مون رو مسیردهی و فراخوانی میکنیم.

مرحله دوم : صدا زدن نام خانوادگی فونت در هرکجای سایت که خواستیم ازش استفاده کنیم، مثلا من میخوام فونت تگ های H3 در سایت بشه همون نام خانوادگی که برای فونتم تعریف کردم پس بصورت زیر عمل میکنم :

h3{
 font-family: نام خانوادگی فونت;
}

h3{

font-family: نام خانوادگی فونت;

}

Free-Learn

مثال از دستور font-face در CSS

در ادامه میتوانید یک مثال از دستور / قانون font-face@ را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : تعریف و استفاده از یک عدد فونت

<style>

@font-face {
  font-family: 'myfont';
  src: url('myfont/font1.eot?#iefix') format('embedded-opentype'),
  url('myfont/font1.woff') format('woff'),
  url('myfont/font1.ttf') format('truetype'),
  url('myfont/font1.svg#myfont') format('svg');
  font-weight: normal;
  font-style: normal;
}

body{
 font-family:myfont;
 text-align:center;
}

</style>

<style>

@font-face {

font-family: 'myfont';

src: url('myfont/font1.eot?#iefix') format('embedded-opentype'),

url('myfont/font1.woff') format('woff'),

url('myfont/font1.ttf') format('truetype'),

url('myfont/font1.svg#myfont') format('svg');

font-weight: normal;

font-style: normal;

}

body{

font-family:myfont;

text-align:center;

}

</style>

امتحان کنید

مثال شماره ۲ : تعریف و استفاده از یک عدد فونت ( یه فونت دیگه )

<style>

@font-face {
  font-family: 'myfont';
  src: url('myfont/font2.eot?#iefix') format('embedded-opentype'),
  url('myfont/font2.woff') format('woff'),
  url('myfont/font2.ttf') format('truetype'),
  url('myfont/font2.svg#myfont') format('svg');
  font-weight: normal;
  font-style: normal;
}

body{
 font-family:myfont;
 text-align:center;
}

</style>

<style>

@font-face {

font-family: 'myfont';

src: url('myfont/font2.eot?#iefix') format('embedded-opentype'),

url('myfont/font2.woff') format('woff'),

url('myfont/font2.ttf') format('truetype'),

url('myfont/font2.svg#myfont') format('svg');

font-weight: normal;

font-style: normal;

}

body{

font-family:myfont;

text-align:center;

}

</style>

امتحان کنید

مثال شماره ۳ : تعریف و استفاده همزمان از ۳ فونت

<style>

@font-face {
  font-family: 'myfont1';
  src: url('myfont/font1.eot?#iefix') format('embedded-opentype'),
  url('myfont/font1.woff') format('woff'),
  url('myfont/font1.ttf') format('truetype'),
  url('myfont/font1.svg#myfont1') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'myfont2';
  src: url('myfont/font2.eot?#iefix') format('embedded-opentype'),
  url('myfont/font2.woff') format('woff'),
  url('myfont/font2.ttf') format('truetype'),
  url('myfont/font2.svg#myfont2') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'myfont3';
  src: url('myfont/font3.eot?#iefix') format('embedded-opentype'),
  url('myfont/font3.woff') format('woff'),
  url('myfont/font3.ttf') format('truetype'),
  url('myfont/font3.svg#myfont3') format('svg');
  font-weight: normal;
  font-style: normal;
}

p.t1{
 font-family:myfont1;
 text-align:center;
}

p.t2{
 font-family:myfont2;
 text-align:center;
}

p.t3{
 font-family:myfont3;
 text-align:center;
}

</style>

<style>

@font-face {

font-family: 'myfont1';

src: url('myfont/font1.eot?#iefix') format('embedded-opentype'),

url('myfont/font1.woff') format('woff'),

url('myfont/font1.ttf') format('truetype'),

url('myfont/font1.svg#myfont1') format('svg');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'myfont2';

src: url('myfont/font2.eot?#iefix') format('embedded-opentype'),

url('myfont/font2.woff') format('woff'),

url('myfont/font2.ttf') format('truetype'),

url('myfont/font2.svg#myfont2') format('svg');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'myfont3';

src: url('myfont/font3.eot?#iefix') format('embedded-opentype'),

url('myfont/font3.woff') format('woff'),

url('myfont/font3.ttf') format('truetype'),

url('myfont/font3.svg#myfont3') format('svg');

font-weight: normal;

font-style: normal;

}

p.t1{

font-family:myfont1;

text-align:center;

}

p.t2{

font-family:myfont2;

text-align:center;

}

p.t3{

font-family:myfont3;

text-align:center;

}

</style>

امتحان کنید

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این دستور در CSS بصورت زیر می باشد.

@font-face {
  ویژگی + مقادیر موجود در جدول مقادیر
}

@font-face {

ویژگی + مقادیر موجود در جدول مقادیر

}

Free-Learn

جدول مقادیر دستور font-face در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این دستور استفاده کرد مشاهده نمایید.

ویژگی	مقدار	توضیح
font-family	name	ضروری – یک نام را برای فونت تعریف میکند.
src	URL	ضروری – مسیر یا محل فایل فونت را تعریف میکند.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	اختیاری – میزان کشش / پَهنی یا باریکی فونت را مشخص می کند. مقدار پیش فرض “normal”
font-style	normal italic oblique	اختیاری – سبک یا استایل فونت را تعریف می کند. مقدار پیش فرض “normal”
font-weight	Normal Bold ۱۰۰ ۲۰۰ ۳۰۰ ۴۰۰ (Normal) ۵۰۰ ۶۰۰ ۷۰۰ (Bold) ۸۰۰ ۹۰۰	اختیاری – میزان وزن فونت را تعریف می کند. مقدار پیش فرض “normal”
unicode-range	unicode-range	اختیاری – محدوده کاراکترهای یونیکد را که فونت پشتیبانی می کند تعریف می کند. مقدار پیش فرض “U + 0-10FFFF”

Free-Learn

نکات و توضیحات

مثال از نحوه استفاده از مقدار font-stretch :

@font-face {
  font-family: 'نام خانوادگی فونت';
  src: url('..') format('..');
  font-stretch: extra-expanded;
}

@font-face {

font-family: 'نام خانوادگی فونت';

src: url('..') format('..');

font-stretch: extra-expanded;

}

مثال از نحوه استفاده از مقدار font-style :

@font-face {
  font-family: 'نام خانوادگی فونت';
  src: url('..') format('..');
  font-style: italic;
}

@font-face {

font-family: 'نام خانوادگی فونت';

src: url('..') format('..');

font-style: italic;

}

مثال از نحوه استفاده از font-weight :

@font-face {
  font-family: 'نام خانوادگی فونت';
  src: url('..') format('..');
  font-weight: 500;
}

@font-face {

font-family: 'نام خانوادگی فونت';

src: url('..') format('..');

font-weight: 500;

}

در یک آموزش جداگانه بطور کاملتر ” نحوه اضافه کردن فونت دلخواه به سایت ” را آموزش دادم که پیشنهاد میکنم حتما این آموزش را مشاهده نمایید.

از فرمت EOT فقط برای مرورگر IE یا اینترنت اکسپلورر استفاده میشود، پس اگه میخواید فونت دلخواهتون در این مرورگر هم نمایش داده شود باید از این فرمت استفاده نمایید.

از دستور font-face@ میتوان در هرکجای فایل CSS استفاده کرد ولی معمولا و بیشتر از این دستور در ابتدای یک فایل CSS استفاده میکنند، شماهم بهتره از این دستور در ابتدای فایل CSS تان استفاده نمایید.

ویژگی font-stretch بروی هر فونتی عمل نمیکند، چرا که خوده فونت باید از همچین ویژگی / قابلیتی ( کشیدگی یا پهن و باریک کردن کاراکترهای فونت ) پشتیبانی کند.

Free-Learn

دانلود فونت + مثال این آموزش

برای دانلود فونت ها و مثالی که در این آموزش استفاده شده، جهت راحتی و آشنایی بهتر شما با نحوه اضافه کردن فونت دلخواه لطفا اینجا کلیک کنید.

Free-Learn

دریافت PDF یا پرینت این مطلب