سبد خرید (0)

تبلیغات

فرمت دهی فونت در CSS

فونت در CSS

Wiki

ویژگی های مربوط به فونت در CSS در واقع نوع قلم، ضخامت، اندازه و نوع نمایش یک متن را مشخص می کنند.

در CSS برای مشخص کردن قلم دو راه وجود دارد:

  1. generic family: یک گروه از Fontهایی که شبیه یکدیگرند (مانند Serif,Monospase)
  2. font family: در این روش باید نام یک Font را مشخص کنیم (مانند Tahoma,Arial)

در جدول زیر بعضی از فونت های عمومی لیست شده است:

Generic family Font family توضیحات
Serif Times New Roman
Georgia

 در پایان کاراکترهای این مجموعه از Fontها، یک خط کوچک وجود دارد

Sans-serif Arial
Verdana

در پایان کاراکترهای این مجموعه از Fontها، خطی وجود ندارد

Monospace Courier New
Lucida Console

تمام کاراکترهای این مجموعه، عرض یکسانی دارند


 تنظیم قلم یک متن

Wiki

خصوصیت font-family در واقع نوع قلم یک متن را تنظیم می کند.

این خصوصیت باید چندین نام را به عنوان یدکی در خود نگه دارد تا اگر مرورگر اولین font را پشتیبانی نکرد به سراغ بعدی برود. 

توجه: اگر نام یک font بیشتر از یک کلمه باشد باید آنرا در کوتیشن مارک قرار دهید، مانند: "Times New Roman"

برای لیست کردن fontها از جدا کننده کاما استفاده کنید:

مثال (فرمت دهی فونت در CSS)

p{font-family:"Times New Roman", Times, serif;}
خودتان امتحان کنید »

در مثال بالا اگر "Times New Roman" در کامپیوتر کاربر نصب شده باشد، به تگ <p> اختصاص داده خواهد شد و اگر نصب نباشد "Times" استفاده می شود و در نهایت اگر هیچکدام از Fontها موجود نباشد، مرورگر از بین مجموعه فونتهای serif یکی را اختصاص خواهد داد.


تنظیم نوع نمایش یک متن

Wiki

خصوصیت font-style اغلب برای مشخص کردن متن مورب یا italic استفاده می شود.

این خصوصیت دارای 3 مقدار زیر است:

  1. normal: متن به صورت معمولی نمایش داده می شود.
  2. italic: متن به صورت مورب نمایش داده می شود.
  3. oblique: خیلی شبیه italic است، اما کمتر پشتیبانی می شود.

مثال (فرمت دهی فونت در CSS)

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
خودتان امتحان کنید »

تنظیم اندازه یک متن

Wiki

خصوصیت font-size اندازه یک متن را تنظیم می کند.

توجه داشته باشید که مدیریت اندازه متن در وب بسیار مهم است، البته برای تنظیم اندازه متن عنوان ها(header)، استفاده از این خصوصیت مناسب نیست و باید از تگهای <h1> تا <h6> استفاده شود.

مقدار خصوصیت font-size می تواند نسبی یا مطلق باشد:

اندازه مطلق:

  • متن با یک اندازه مشخص تنظیم می شود.
  • اجازه تغییر اندازه متن در مرورگرها از کاربران گرفته می شود که البته دستیابی پذیری را پایین می آورد.
  • زمانی این روش موثر است که اندازه فیزیکی خروجی را بدانیم.

اندازه نسبی:

  • اندازه با توجه به عناصر احاطه کننده دیگر تنظیم می شود.
  • در این روش به کاربر اجازه داده می شود که در مرورگرها، اندازه متن را تغییر دهد.

نکته: اگر اندازه متن را مشخص نکنید، مقدار پیشفرض برای متن های معمولی مثل پاراگراف ها، 16 پیکسل خواهد بود(16px=1em)


تنظیم اندازه متن با واحد pixel

Wiki

تنظیم اندازه متن با واحد پیکسل، به شما اجازه می دهد تا کنترل بیشتری، روی اندازه متن عناصر داشته باشید:

مثال (فرمت دهی فونت در CSS)

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
خودتان امتحان کنید »

در مثال بالا اجازه تغییر اندازه متن در مرورگرهای Explorer 9, Firefox, Chrome, Opera, Safari داده می شود.

توجه: مثال بالا در نسخه های IE9 و قبلتر کار نخواهد کرد.

 در تمام مرورگرها با استفاده از ابزار zoom می توان اندازه متن را تغییر داد. (البته این تغییر اندازه، فقط مختص متن نیست و اندازه بقیه عناصر نیز تغییر می کند)


تنظیم اندازه متن با واحد Em

Wiki

برای اجتناب از مشکل تغییر اندازه متن، در نسخه های قدیمی IE، بیشتر توسعه دهندگان وب از em بجای pixel استفاده می کنند.

واحد اندازه em توسط W3C پیشنهاد شده است.

1em مساوی با اندازه متن جاری است. اندازه پیشفرض در تمام مرورگرها 16px است، بنابراین اندازه پیشفرض 1em مساوی با 16px است.

با استفاده از فرمول روبرو می توان pixel را به em تبدیل کرد.      pixels/16=em

مثال (فرمت دهی فونت در CSS)

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
خودتان امتحان کنید »

اندازه متن مثال بالا با مثال قبلی یکسان است، اما این مثال در تمام مرورگرها پشتیبانی می شود.

متأسفانه تنها یک مشکل با نسخه های قدیمی IE وجود دارد. زمانی که اندازه متن بزرگ است، اندازه، بزرگتر از آنچه که باید باشد، نمایش داده می شود، و همین مورد برای متن های کوچک برقرار است.


استفاده ترکیبی از واحد em و درصد

Wiki

راه حل نهایی که در تمام مرورگرها کار خواهد کرد این است که، یک اندازه پیشفرض به درصد، در تگ <body> تنظیم کنیم:

مثال (فرمت دهی فونت در CSS)

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
خودتان امتحان کنید »

حالا کدمان عالی کار خواهد کرد! در تمام مرورگرها اندازه متن یکسان خواهد بود و مرورگر اجازه می دهد، اندازه متن را تغییر دهیم.


مثال

مثال - خودتان امتحان کنید

Wiki

تنظیم خاصیت font-weight
این مثال نشان می دهد که چگونه ضخامت یک متن را تنظیم کنیم (Bold).

تنظیم خاصیت font-variant
این مثال نشان می دهد که چگونه برای متن های انگلیسی، حروف کوچک را به حروف بزرگ تبدیل کنیم البته در اندازه کوچک.

مختصر نویسی خواص مربوط به متن
این مثال نشان می دهد که چگونه از مختصرنویسی برای تنظیم همه ویژگی های مربوط به متن استفاده کنیم.


کلیه خصوصیات مربوط به متن در CSS

Wiki

خصوصیت توضیحات
font

همه ی ویژگی های مربوط به متن را در یک مرحله تنظیم می کند

font-family

Font یک متن را تنظیم می کند

font-size

اندازه یک متن را تنظیم می کند

font-style

Style یک متن را تنظیم می کند

font-variant

اگر با مقدار small-caps تنظیم شود حروف کوچک را در همان فضا به حروف بزرگ تبدیل می کند(حروف بزرگ در اندازه کوچک)

font-weight

ضخامت یک متن را مشخص می کند

دیدگاه‌ها  

+3 # pdf 1395-08-27 12:42
سوال من اینه که اسم فونت وبسایت شما چیه من توی صفحه ازمایشی ام که روی هیچ سروری نیست یه نوشته رو داخل تگ p قرار میدم و نوشته خیلی بد ظاهر میشه یعنی خطش افتضاح میشه اگه اسم فونت وبسایت شما رو به من بگید خوشحال میشم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1395-08-27 12:55
دوست عزیز سایت بیاموز از فوت یکان(yekan) استفاده می کنه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # آزی 1395-08-18 10:56
سلام چجوری میتونم فونت های استاندارد صفحات مرور گر رو داشته باشم و در پروژه هام ازشون استفاده کنم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-08-18 11:35
سلام . یک از فونت های استاندارد برای زبان فارسی، فونت Tahoma است. که به طور پیش فرض برای مرورگرها استفاده میشه. می تونید این فونت رو در اینترنت سرچ کنید و دانلود کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # Reza_R 1395-03-01 10:40
سلام دوستای عزیزم
خدا قوت
توی خط زیر یه غلط املایی وجود داره
برای اجتناب از مشکل تغییر اندازه متن، در نسخه های قدیمی IE، بیشتر توسعه دهندگان وب از em بجای pixcel استفاده می کنند.
کلمه پیکسل انگلیسی اشتباه نوشته شده...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1395-03-04 08:54
سلام و تشکر از شما
اصلاح شد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # adinacarpet.com 1394-12-29 21:27
من اندازه فونت رو میخام جوری تعیین کنم که با کوچک شدن صفحه ، اندازه فونت هم تغییر کنه .
با % و یا em یا px .. با کودوما میشه این کار رو کرد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-01-01 10:17
به سوال شما در انجمن بیاموز پاسخ داده شده است. لطفا به این آدرس مراجعه نمایید:
http://beyamooz.com/forum/threads/217-%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87-%D9%81%D9%88%D9%86%D8%AA
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # محبوب 1394-09-10 21:52
سلام
ممنون از سایت خوبتون
من یک سوال کلی داشتم
من هر چی پیش میرم با اینکه مطالب را خوب و دقیق میخونم ولی حس میکنم کدهای درس های پیشین را فراموش میکنم
آیا نیازه که ما تمام تگ ها و کدها رو حفظ باشیم
آیا میتونیم از روی بعضی از مطالب به سرعت عبور کنیم؟؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-09-10 23:21
با سلام و تشکر.
این ترس رو اکثر افرادی که شروع به یادگیری می‌کنن، دارن.
در مورد حفظ کردن تگ‌ها، باید بگم که اصلا نیازی نیست به حفظ کردن نیست. هر زبانی، یه سری قاعده و اصول و مفاهیم داره. شما این مفاهیم رو یاد بگیرید، می‌تونید اون رو تعمیم بدید به اکثر زبان‌ها.
در مورد HTML، اصلی‌ترین مفهوم، تگ و تعریف و کاربرد اون هست. وقتی بدونید تگ یعنی چی، نصف مرحله رو پیش رفتید. وقتی شروع به کدنویسی کنی، به مرور یه سری از تگ‌ها ملکه‌ی ذهن شما خواهد شد.

مطالب رو با تمرکز مطالعه کنید. وقتی رفتید سراغ درس بعدی، مطلب قبل رو گذرا مطالعه کنید. البته حتما در هر درس، تمرین هم کنید.
تمرین در یادگیری خیلی مؤثر هست!!!

موفق باشید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # aynaz 1394-05-27 02:15
سلام
مرسی از سایت خوبتون

یه سوال داشتم
میشه از فونت های فارسی هم تو صفحات وب استفاده کرد ؟ مثلا فونت نستعلیق
من چند دفعه امتحان کردم ولی نشون نمیده
باید از کد خاصی استفاده کرد ؟

ممنون میشم راهنماییم کنید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1394-05-27 15:32
سلام، ممنون ...
بله در حال حاضر در سایت بیاموز از فونت Yekan استفاده می شود. برای کسب اطلاعات بیشتر به لینک زیر مراجعه فرمایید:
www.beyamooz.com/css3/653-%D9%81%D9%88%D9%86%D8%AA-%D8%AF%D8%B1-css3
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # Marjan 1393-12-16 19:45
تو خصوصیت font هم مثل background ترتیب مقدارها اهمیت داره؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-12-17 15:14
بله
خاصیت هایی که می توانند تنظیم شوند به ترتیب عبارتند از:
font-style
font-variant
font-weight
font-size/line- height
font-family
مقادیر مربوط به font-size و font-family اجباری هستند.
برای اطلاعات بیشتر به لینک روبرو مراجعه فرمایید:www.beyamooz.com/cssref/227-css-properties/807
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # zhrd 1393-11-28 14:24
سلام-چرا فونت فارسی می نویسم توی صفحه وب خراب می شه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1393-11-29 07:46
برای صفحات با محتوای فارسی، یکی از دو کار زیر را انجام دهید:
1- اضافه کردن تگ meta: در قسمت head صفحه، یک تگ meta با ویژگی های زیر اضافه نمایید.
<meta http-equiv="Con tent-Type" content="text/h tml; charset=utf-8">
2- UTF-8: زمانی که می خواهید فایل HTML را در نات پد ذخیره کنید، گزینه encoding را با مقدار UTF-8 تنظیم نمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیرکیان 1393-11-23 15:03
چرا روش درج فونت دلخواه را نگفتید؟!
@font face
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1393-11-23 15:38
به لینک زیر مراجعه فرمایید:
http://beyamooz.com/css3/653
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # sara 1393-09-20 19:28
سلام دوستان
من متوجه نشدم در قسمت font family اسم فونت مورد نظرمو از کجا بیارم ؟؟ از فونت هایی که روی ویندوز نصب شده میتونیم استفاده کنیم ؟؟ تو برنامه فوتوشاپ از خیلی فونتها استفاده میکنم ولی برای وب نمیدونم از چه فونتی میشه استفاده کرد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1395-02-13 22:34
با سلام.
قابلیت تنظیم فونت در صفحات وب از CSS3 به بعد ایجاد شده و شما با تنظیم font-face قادر خواهید بود فونت دلخواه خودتون رو در صفحات وب به نمایش بگذارید و مطمئن باشید که در هر جای این کره‌ی خاکی سایت شما با فونت موردنظر دیده میشه.
اما اگر قصد دارید به صورت دیفالت از فونت‌های عادی استفاده کنید باید به چند نکته توجه داشته باشید:
1- هر سیستم عاملی به طور پیش فرض یک سری فونت در سییستم نصب می‌کنه که از این فونت‌ها برای نمایش متون استفاده میشه. برخی از این فونت‌های پیش فرض عبارتند از: tahoma, verdana, arial, times new roman و ...
2- سازگارترین فونت برای صفحات وب و همینطور جذاب‌ترین فونت برای وب (مخصوصا فارسی) فونت tahoma هست و پیشنهاد میشه اگه قصد استفاده از فونت فارسی خاصی رو در سایت خودتون ندارید، فونت پیش فرض سایت رو روی این فونت بذارید.
3- برای تعریف فونت شما باید از font-face در CSS استفاده کنید. برای هر فونت باید یک font-face جداگانه بنویسید. این فونت باید در پوشه‌ای از سایت شما قابل دسترس باشه. در واقع منظور این هست که اگه فونت در سیستم شما باشه، فقط شما قادر خواهید بود محتویات رو با فونت موردنظر ببینید، و دیگران چون اون فونت رو ندارن، نمی‌تونن محتویات را با اون فونت ببینند.

عبارت فونت فارسی در صفحات وب رو سرچ کنید، تعدادی از فونت‌های قابل استفاده در صفحات وب برای شما آورده میشه که می‌تونید دانلود و استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # Pouriya 1395-02-13 14:34
سلام . Sara جان شما میتونی با مراجعه به سایت https://everythingfonts.com/ttf-to-woff به صورت رایگان هر فونت ttf که داری رو به woff تبدیل کنی .
موفق باشی
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+7 # امیر پهلوان صادق 1393-09-20 20:03
سلام، لطفاً برای تنظیم خصوصیت font-family به نکات زیر توجه فرمایید:
1- مسلماً فونتی که قصد استفاده از آنرا دارید باید روی کامپیوتر کاربرانتون نصب باشد.
2- فونت Tahoma و Arial و "Times New Roman" و Times فونت های رایج تری هستند، (بخصوص Tahoma) و البته مطمئن هستیم که روی تمام کامپیوترها، بصورت پیشفرض وجود دارد.
بنابراین پیشنهاد ما، فونت Tahoma است که در همین سایت هم استفاده شده است ...!
لطفاً برای کسب اطلاعات بیشتر به لینک زیر مراجعه کنید:
http://beyamooz.com/cssref/229-css-reference/916
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی