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

آموزش فونت در CSS

دوره های مرتبط با این مقاله

خواص فونت در CSS

خانواده ی فونت ) font family ((مجموعه فونت هایی که نمایانگر اشکال مختلف یک نوع typefaceیا طرح حروف هستند)، پررنگی (boldness)، اندازه و همچنین سبک یک نوشته یا متن را تعریف می کنند .

آموزش css

خانوادهای فونت (font family) در CSS

در CSS، دو گروه اسم خانواده ی فونت وجود دارند :

  • generic family (خانواده ی عمومی) - گروهی از فونت ها که ظاهری مشابه دارند (از میان آن ها می توان به "Serif" و "Monospace" اشاره کرد) .
  • font family (خانواده ی فونت) – یک نوع خانواده ی فونت ویژه (از جمله "Times New Roman" و "Arial").
Generic family
Font family
شرح
Serif
Times New Roman Georgia
فونت های Serif خط های کوچکی در انتهای برخی از کاراکترها دارند
Sans-serif
Arial Verdana
پیشوند"Sans" یعنی بدون – این نوع فونت در انتهای کاراکترهای خود خط ندارند
Monospace
Courier New Lucida Console
تمامی کاراکترهای monospace از یک میزان پهنا برخوردار هستند

خانواده ی فونت (font family)

ویژه گی های خانواده ی فونت با خاصیت font-family تعیین می گردند .

خصوصیت font-family طبیعتاً باید دربردارنده ی اسم فونت های متعددی باشد که به عنوان یک نوع سیستم پشتیبانی یا یدکی عمل کند . در صورتی که مرورگر مورد نظر از نوع حروف (فونت) اولی پشتیبانی نکرد، در آن صورت فونت دوم را امتحان خوهد کرد .

نکته:

چنانچه اسم یک خانواده ی فونت (font family) متشکل از چندین حروف (بیش از یک حرف) باشد، در آن صورت باید اسم فونت مزبور را داخل کاراکتر یا علامت نقل و قول دوتایی (double quotation) قرار دهید، مثال : "Times New Roman"

در مثالی که در ذیر ارائه شده، بیش از یک font family در لیست با استفاده از ویرگول از هم جدا شده اند :

آموزش css مثال:

نمونه یک

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

سبک فونت ها (Font style)

Font style یا همان سبک فونت عمدتا به منظور مشخص کردن متن ها و نوشته های خوابیده و حروف کج بکار می روند .

خصوصیت نام برده سه مقدار متفاوت دارد :

  • normal – که در آن متن به صورت عادی نمایش داده می شود.
  • Italic – که متن به صورت خوابیده نشان داده می شوند .
  • Oblique – که در آن نوشته یا حروف درست مشابه italic متمایل شده یا کج می شوند (بیشر به منظور شبیه سازی حالت italic یا حروف خوابیده بکار می رود) .

آموزش css مثال:

نمونه دو

        p.normal {
            font-style: normal;
        }

        p.italic {
            font-style: italic;
        }

        p.oblique {
            font-style: oblique;
        }
امتحان کنید

اندازه ی فونت (Font Size)

همان طور که از اسم آن پیدا است این خصیصه اندازه ی فونت را تعریف می کند .

قابلیت و توانایی مدیریت اندازه ی نوشته ها و متن ها در طراحی وب از اهمیت بسیار بالایی برخوردار است . با این وجود شما به هیچ وجه نباید با بهره گیری از قابلیت تنظیم اندازه ی فونت کاری کنید که پاراگراف ها ظاهری شبیه به تیتر (heading)، و یا تیتر ظاهری مشابه پاراگراف ها پیدا کنند .

همیشه سعی کنید از تگ های مناسب HTML استفاده کنید، به عنوان مثال از

-

ویژه ی تیترها و از

برای پاراگراف ها بهره بگیرید .

مقدارfont-size ممکن است یک مقدار مطلق (absolute) و حتی نسبی (relative) باشد .

اندازه ی مطلق :

  • نوشته را به یک اندازه ی تعریف شده تنظیم می کند.
  • به کاربر اجازه ی تغییر اندازه ی متن را در همه ی مرورگرهای موجود نمی دهد (بنا به دلایل دسترسی نامناسب است).
  • اندازه ی مطلق زمانی کاملاً کارامد تلقی می گردد که اندازه ی خروجی از پیش برای شما تعریف شده و مشخص باشد .
آموزش cssنکته :

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

تنظیم و انتخاب اندازه بر حسب پیکسل (با پیکسل)

تنظیم اندازه ی متن بر حسب پیکسل به شما امکان می دهد اندازه ی نوشته را با اختیار کامل مدیریت کنید :

آموزش css مثال:

نمونه سه

        h1 {
            font-size: 40px;
        }

        h2 {
            font-size: 30px;
        }

        p {
            font-size: 14px;
        }
امتحان کنید
آموزش cssنکته :

در صورت استفاده از پیکسل، می توان با بهره گیری از ابزار بزرگنمایی (zoom tools) کل یک صفحه ی وب را مجددا اندازه بندی کرد (به طور دلخواه اندازه ی آن تغییر داد) .

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

  • برای اجازه دادن به کاربرها جهت اندازه بندی مجدد متن (قابل دسترسی از طریق فهرست گزینش مرورگر مربوطه)، بسیاری از طراحان وب به جای استفاده از پیکسل، واحد em را بکار می برند .
  • W3C بهره گیری از واحد اندازه بندی فوق را به طراحان وب توصیه می کند .
  • 1em در واقع معادل با اندازه ی فعلی فونت می باشد . اندازه ی پیش فرض نوشته در مرورگرهای کنونی برابر است با 16px . بنابراین، اندازه ی پیش فرض 1em به عبارتی همان 16px است .

با بهره گیری از فرمول ذیل می توان واحد پیکسل را به 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 */
        }
امتحان کنید

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

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

بکاربردن ترکیبی از Percent و Em

راه حلی که در کلیه ی مرورگرها کارگر و موثر واقع می شود، این است که font-size پیش فرض را در قسمت یا عنصر بدنهbodyبر حسب درصد تنظیم کنیم :

آموزش css مثال:

نمونه پنج

     body {
            font-size: 100%;
        }

        h1 {
            font-size: 2.5em;
        }

        h2 {
            font-size: 1.875em;
        }

        p {
            font-size: 0.875em;
        }
امتحان کنید

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

تمامی خصوصیت های فونت CSS در جدول زیر با ذکر شرح کاربرد فهرست شده اند :

All CSS Font Properties

توضیح
خاصیت
کلیه ی خصوصیت های فونت را طی یک تعریف تنظیم و انتخاب می کند
font
Specifies the font family for text اسم فونت مورد نظر را مشخص می کند (خانواده ی فونتی که برای متن بکارگرفته می شود را تعیین می کند)
font-family
اندازه ی فونت (قلم نوشته) را برای نوشته ی مورد نظر تنظیم می کند
font-size
سبک فونت انتخابی را برای متن مشخص می کند
font-style
مشخص می کند آیا یک متن با قلم نوشته (font small-caps) نمایش داده شود یا خیر
font-variant
این خصوصیت میزان توپر بودن (Weight) متن را تعریف می کند
font-weight
  • 5988
  •    2102
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

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

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .