فقط واتساپ ۰۹۱۵۷۲۳۲۳۹۸

آموزش font-face در css برای استفاده از فونت دلخواه در سایت

استفاده از fontface در css برای اضافه کردن و استفاده از فونت دلخواه در سایت هست، ما براحتی میتوانیم از هر فونتی که میخواهیم در سایت استفاده کنیم و این کار با دستورات فونت فیس امکان پذیر میباشد در فیلم آموزشی بالا آموزش font face و  نحوه انجام این کار را با استفاده از fontface در css براحتی یادمیگیرید

مبحث استفاده از fontface یکی از مهم ترین مباحثی هست که هر طراح سایتی حتما لازمه که استفاده از اون رو کامل و به شکل اصولی بلد باشه که در این فیلم آموزش font face کاملا باهاش اشنا میشیم. (آموزش html)

 

کاربرد font face چیست؟

شما وقتی توی سایتتون میخواین از فونت هایی غیر از tahoma و arial استفاده کنین لازمه که فایل اون فونت هارو با استفاده از تکنیک فونت فیس ضمیمه فایل CSS کنید تا کاربرانی که فونت استفاده شده در وبسایت شمارو در سیستمشون ندارن هم بتونن سایت شمارو با همون فونت مورد نظر شما ببینن در غیر این صورت اگر شما از هر فونتی در سایتتون استفاده کنید کاربران سایت شما رو با فونت های پیشفرض tahoma و arial میبینن

 

نحوه استفاده از font face در css

نحوه استفاده از font face : برای استفاده از fontface و استفاده از فونت فارسی در css باید در ابتدا فایل های فونت مورد نظر را با فرمت های ttf و woff در پروژه خودتون اضافه کنید برای اینکار در پوشه اصلی پروژه خودتون فولدری با نام fonts ایجاد کنید و فایل های فونت با فرمت های ttf و woff را داخل آن کپی کنید. مثلا اگر میخواید از فونت iransans استفاده کنید باید دو فایل با نام iransans.ttf و  iransans.woff در فولدر fonts اضافه کنید.

این پست رو حتما ببین : آموزش فلکس باکس

در مرحله بعدی حالا باید این فایل هارو به پروژه خودتون معرفی کنید که برای اینکار دستورات fontface را طبق کد زیر به فایل style.css پروژه خودتون اضافه کنید

در خط اول در قسمت خصوصیت font-fmily ما یک نام برای استفاده از این فونت انتخاب میکنیم این نام میتونه دلخواه باشه که ما گذاشتیم iransans

در قسمت src هم آدرس فایل فونتی که به پروژه اضافه کردیم رو باید بنویسیم که ما فایل هارو داخل فولدر fonts قرار دادیم نکته (اگر اسم پوشه یا فایل فونت شما متفاوت هست در قسمت src باید نام فولدر خودتون رو قرار بدید) و تمام

حالا هر جایی سایتتون که خواستید از این فونت استفاده کنید فقط کافیه به کلاس اون عنصر خصوصیت font-family شو برابر با iransans قرار بدید (این iransan همون اسمی هست که در کد fontface انتخاب کردیم و گفتیم دلخواهه)

مثلا اگر بخوایم کل وبسایتمون از این فونت استفاده کنه فقط کافیه المان body رو در css انتخاب کنیم و font-family شو روی iransans تنظیم کنیم طبق کد زیر :

 

اعمال نشدن فونت در css

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

 

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

فونت های وب فرمت های مختلفی دارند که هدکدام در یک مرورگر پشتیبانی میشود لذا فونتی که میخواهید در وبسایت تان استفاده کنید باید فرمت های مختلفش را هم اضافه کنید تا در همه مرورگر ها پشتیبانی شود در زیر چند نمونه از فرمت های مختلف را میبینید :

فرمت TTF : مخفف TrueType Font است این فونت که توسط شرکت اپل و مایکروسافت که بیشترین استفاده را هم در سیستم عامل های مگ و ویندوز دارد ایجاد شده و یک فرمت استاندارد است.

فرمت OTF : مخفف OpenType Font این فونت هم توسط شرکت مایکروسافت ساخته شده و زیرمجموعه فرمت TTF است.

فرمت WOFF : مخفف WebOpenFontFormat یکی از فرمت های مختص صفحات وب که ترکیبی از فرمت های TTF و OTF میباشد

فرمت WOFF2 :  مخفف WebOpenFontFormat درواقع همان WOFF است اما در این فرمت فشرده سازی بیشتری صورت گرفته و نسخه جدیدتری است.

فرمت SVG : مخفف ScalableVectorGraphics این فرمت را بیشتر برای مرورگر سافاری میشناسند و در مرورگر های فایرفاکس و اینترنت اکسپلورر پشتیبانی نمیشود همچنین این فرمت سرعت لود فراخوانی بالایی هم دارد.

فرمت EOT : مخفف Embedded OpenType است و نسخه بهبود یافته فرمت OTF است و فقط هم در مرورگر IE پشتیبانی میشود.

 

در بالا فرمت های مختلفی از فرمت های فونت وب را آوردیم اما آیا لازم است همیشه همه این فرمت هارا داشته باشیم و به صفحه اضافه کنیم؟ قائدتا هدف این است که فونت مورد نظر ما بدون هیچ کم و کاستی در همه مرورگر ها به درستی نمایش داده شود اما با توجه به اینکه مثلا الان اکثر کاربران از مرورگرهای کروم و فایرفاکس استفاده میکنند و کمترکسی پیدا میشود که از مرورگر های IE و حتی سافاری استفاده کند پس اگر بخواهیم فقط از یکی دو فرمت TTF و WOFF هم استفاده میکنیم کفایت میکند و لازم نیست که حتما همه فرمت ها را اضافه کنیم ضمن اینکه باز اگر روی این مسئله تاکید سایت هایی هستند که کار تبدیل فرمت های فونت را انجام میدهند و شما  میتوانید صرفا با داشتن یکی از فرمت ها، فرمت های دیگر آن را هم دریافت کنید. یکی از بهترین سایت هایی که در زمینه تبدیل فرمت های فونتی کار میکند onlinefontconverter است که میتوانید از آن استفاده کنید. (آموزش font face)

 

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

در جدول زیر اطلاعات کاملی از پشتیبانی نسخه های مختلف مرورگر ها از فرمت های وب فونت و همچنین دستور fontface میبینید :

آموزش font face

 

 

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

18 دیدگاه دربارهٔ «آموزش font-face در css برای استفاده از فونت دلخواه در سایت»

پوریا گفت:

سلام وقتون بخیر
ممنون از آموزش بسیار خوبتون.
سوالم اینه که من برای سایتم میخوام یه کد font-face اضافه کنم برای اینکه فقط ویژگی font-display:swap رو بهش اضافه کنم. به این صورت نوشتم. ممنون میشم اگر اشکالی داره به من بفرمایید.
@font-face {
font-family: ‘IRANSansWeb_Medium’;

font-display: swap;
}

فرشید زاهدی گفت:

سلام چطوری میشه با کدنویسی برای المنتور فونت تعریف کرد
چون اگه دستی اضافه نکنیم خیلی باعث کاهش سرعت سایت میشه

رضا حیدری گفت:

سلام با همین آموزش میتونید اینکارو انحام بدید

عرفان فاتحي گفت:

سلام جناب حيدري بنده فاتحي هستم لينك دانلود اين قسمت مثل اينكه خرابه بي زحمت اصلاحش ميكنيد

Hamid Ya30 گفت:

با سلام و سپاس فراوان
اقای حیدری زمانی که از برنامه زمپ استفاده میکنم کلی از ترافیک اینترنت بنده استفاده میشه…لطفا راهی نشان بدین که از این برنامه استفاده نکنیم…
یا طریقه ست کردن با هاست و کار با سی پنل رو اموزش بدین…واقعا برنامه زمپ به صرفه نیست…
ما کماکان منتظر اموزش کار با هاست و سی پنل هستیم ….
با تشکر…
یاعلی

مدیر رضاحیدری گفت:

سلام دوست عزیز برنامه زمپ یه سرور محلیه و ارتباطی با اینترنت نداره!
آموزش کامل و گام به گام تهیه هاست و دامین و کاربا سی پنل – ایجاد دیتابیس و نصب وردپرس و راه اندازی سایت روی هاست واقعی رو تویه دوره جدید طراحی قالب وردپرس توضیح دادم اون دوره هنوز منتشر نشده اما اگرخواستین میتونین پیش ثبت نام کنین – 5تا پست اخری که تویه سایت منتشر کردم قسمت هایی از همون دوره هست و از لینک زیر هم میتونید سرفل هاشو ببینید
http://s7.picofile.com/file/8246333934/websoft3.pdf.html

hamid_ya30 گفت:

اقای حیدری مشکل رو یافتم …ان شالله برای بعد مزاحم میشم
یاعلی

مدیر رضاحیدری گفت:

بسیارعالی

hamid_ya30 گفت:

ضمنا سوالی دیگری داشتم…بنده یه هاست دارم و نمیخوام از برنامه زمپ استفاده کنم…میشه راهنماییم کنید به چه شکل این دو را با هم ست کنم؟
ممنونم یاعلی

مدیر رضاحیدری گفت:

سلام دوست عزیز تویه دوره جدید طراحی قالب وردپرس که هم اکنون در حال ضبط هست این مورد گفته شده یعنی نحوه ثبت هاست و دامین و کاربا سی پنل و ایجاد دیتابیس و راه اندازی کامل سایت روی هاست بصورت کامل توضیح داده شده که اگه مایل بودین میتونین از اون دوره استفاده کنین(هنوز منتشر نشده)

hamid_ya30 گفت:

سلام مجدد آقای حیدری
بنده از صفحه ی مورد نظرم عکس تهیه کردم
امیدوارم با این کار بتونم مشکلم را در میان بزارم…باتشکر
http://uupload.ir/files/o2wp_snap3.png
….
http://uupload.ir/files/kkw3_snap2.png

hamid_ya30 گفت:

با سلامم و عرض خسته نباشید
واقعا ممنونم از زحماتتون که آموزش به این سنگینی رو برامون ارائه میدین
بنده در قسمت نهم فیلم برام مشکلی پیش اومده
قسمت قرار دادن لوگو بر روی هدر …بنده تمامی کدها را طبق کدهایی که شما قرار میدین،قرار دادم ولی لوگو بر روی هدر ظاهر نمیشن…ضمنا بنده یه مقدار اشنایی دارم که باید اسم عکس با اسمی که وارد میشود باید همخوانی داشته باشد…ولی متاسفانه اجرا نمیشه…
لطفا کمک کنید ممنونم

علی گفت:

استاد ممنون مشکلم حل شد گفتم در سایت شما هم مطرح کنم که بقیه دوستان هم استفاده کنن کد زیر را در css قرار دادم

@font-face {
font-family: ‘farnaz’;
src: url(‘fonts/STITRBD.eot’);
src: url(‘fonts/STITRBD.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/STITRBD.woff’) format(‘woff’),
url(‘fonts/STITRBD.ttf’) format(‘truetype’);
}

علی گفت:

سلام رضا جان ابتدا مجدد تشکر می کنم از آموزش های عالیتون بعد اینکه یک مشکل عجیب دارم راستش خودم متوجه نشدم مشکل از کجاست اون هم اینه من چند فونت به سی اس اس (طبق آموزش) اضافه کردم اما فقط یک فونت را تو مرورگر نمایش میده اولین فونتم تیتر است که تعریف کردم به خوبی هرقسمتی فرخوانی می کنم به خوبی عمل می کنه ولی هر فونت دیگری اضافه می کنم و درقسمت کد فراخوانی می کنم اصلا تغییری نمی کنه نمی دونم مشکل از کجاست ممنون میشم کمکم کنید

مدیر رضاحیدری گفت:

سلام ممنون از لطفتون
عجیبه! خب اگه یه فونت رو میشناسه طبق کدهای همون یه فونت دیگه رو اضافه کنی باید بشناسه دیگه! طبق توضیحاتتون احتمال میدم تویه ادرس دهی یا تایپ دقیق اسم فونت اشتباهی رخ داده

علی گفت:

ممنونم استاد که زود پاسخ می دهید به نظرات و راهنمایی می کنید من راستش چندین فونت را تست کردم بعضی از فونت هارو مرورگر نمایش میده مثل فونت کودک ولی بعضی فونت ها را خیرمثل فونت یکان … یک مشکل دیگه که دارم اینه که در قسمت منو اصلی هر اسم فونتی را فراخوانی می کنم حرف “ی” به صورت جدا نمایش میده ولی روی فونت پیش فرض هیچ مشکلی نداره نمی دونم دلیل این چیه واقعا ببخشید سوالاتم زیاد شد

مهسا گفت:

سلام واقعا ممنون از زحمات بی شمارتون .من دانشجوی رشته شیمی هستم اما علاقه زیادی به طراحی دارم وتمام آموزشای تصویریتون کمک بزرگی بهم بود گرچه هنوزم چیز زیادی بلد نیستم اما به یادگیری ادامه میدم البته با همین کمکای بی دریغتون باید بگم خداقوت

مدیر رضاحیدری گفت:

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

ورود | ثبت نام
شماره موبایل یا ایمیل خود را وارد کنید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
درخواست بازیابی رمز عبور
لطفاً پست الکترونیک یا موبایل خود را وارد نمایید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
ایمیل بازیابی ارسال شد!
لطفاً به صندوق الکترونیکی خود مراجعه کرده و بر روی لینک ارسال شده کلیک نمایید.
تغییر رمز عبور
یک رمز عبور برای اکانت خود تنظیم کنید
تغییر رمز با موفقیت انجام شد