آموزش فونت font در css

بازدید: 584 بازدید

فونت font، یا به عبارتی دستخط، شکل ظاهری حروف و کلمات است. شما می توانید فونت های بسیاری برای نوشتن حروف داشته باشید. برای مثال، در رسم الخط فارسی، نستعلیق، یک فونت است. این نوع نوشتاری، شکل ظاهر کلمات را عوض می کند.

در آموزش امروز قصد داریم تا نحوه کار با فونت را در css خدمت شما عزیزان همراه آموزش دهیم. در ادامه شما با کنترل هایی که روی فونتfont دارید آشنا خواهید شد.

با ما همراه باشید.

دنیای خانوادگی فونت ها

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

در کل، دو خانواده فونت font family داریم:

generic family : خانواده عمومی: گروهی از فونت ها هستند که ظاهری مشابه دارند. مانند serif  یا Monospace
font family : خانواده فونت : یک خانواده ویژه از یک فونت خاص مانند : Times New Roman و Arial

تفاوت فونت ها را می توانید در سایت w3schools بهتر ببینید.

 

انواع خانواده فونت

یک نکته مهم!

در صفحه کامپیوتر ، خواندن فونت های sans-serif، بسیار راحت تر از فونت های serif است.

font-family

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

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

برای این کار، با فونت دلخواهتان کار نوشتن کدها را آغاز میکنید،سپس آنرا با generic family به اتمام می رسانید.

دو نکته حرفه ای!

1- اگر نام خانواده فونت FONT FAMILY بیش از یک کلمه باشد، باید در حین کدنویسی و معرفی این خانواده، برای نام آن از علامت “” کوتیشن استفاده کنید. برای مثال “Times New Roman”

2- برای معرفی چند خانواده، در بخش کدنویسی باید از” , ” کاما، استفاده کنید. مثال:

[php]
p {
font-family: “Times New Roman”, Times, serif;
}
[/php]
نحوه کدنویسی و تفاوت های ایجاد شده را از اینجا ببینید.

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

Font-Style

سبک فونت، به منظور مشخص کردن ظاهر نوشته به کار می رود. و دارای مقادیر زیر می باشد:

  • Normal: نوشته ها را به صورت عادی نمایش می دهد.
  • Italic: حروف نوشته را به صورت کج نمایش می دهد.
  • Oblique: معمولا برای شبیه سازی حالت italic استفاده می شود.

نمونه کد، برای تعریف این سبک ها.

این کدها را در بخش css وارد نمایید:

[php]
p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}
[/php]

می توانید تغییرات را از این لینک مشاهده کنید.

Font-Size

اندازه فونت مشخص کننده بزرگی یا کوچکی سایز حروف است. درست است که شما میتوانید با استفداه از این ویژگی انداره حروف را تعیین کنید.اما بهتر است اینکار را نکنید. زیرا نوشته های متن، نباید اندازه و ظاهری شبیه تیترها داشته باشند(مانند h1….h6 برای سرتیترها و تگ p برای متن بدنه) برای تنظیم اینها بهتر است از تگ های html استفاده کنید. آموزش تگ های h را از این لینک مرور کنید.

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

مطلق:

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

یک نکته حرفه ای: اگر اندازه فونت را تعریف نکنید، اندازه پیشفرض در سایت برابر 16پیکسل خواهد بود.

نسبی:

این روش، اندازه حروف را به نسبت سایر عناصر تعریف میکند.یعنی با توجه به سایر عناصر موجود در صفحه، اندازه حروف نیز مشخص می شوند.و همچنین این روش، به کاربران امکان میدهد تا اندازه حروف را تغییر دهند.

مثال های کد نویسی:

برای مقداردهی با پیکسل کدهای زیر را در بخش css وارد کنید:

[php]
h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p {
font-size: 14px;
}
[/php]
میتوانید نمایش کدهای بالا را از اینجا ببینید.

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

این ویژگی به کاربر امکان می دهد که اندازه فونت را تغییر دهند. بیشتر طراحان وب، از این مقداردهی بجای پیکسل استفاده میکنند.

1em برابر با اندازه فعلی فونت است. همانطور که گفته شد،اندازه پیشفرض 16پسکیل است. پس em1 یعنی 16پیکسل.

با فرمول زیر میتوان پیکسل را به em تبدیل کرد:

[php]

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 */

}

[/php]

نتیجه را از اینجا مشاهده کنید.

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

ترکیب درصد و Em

راه حلی که به مشکل بزرگ و ک.چک کردن نوشته کمک میکند از این قرا است. Font sizeرا در تگ <body> برحسب درصد تنظیم میکنیم.

[php]

body {

font-size: 100%;

}

h1 {

font-size: 2.5em;

}

h2 {

font-size: 1.875em;

}

p {

font-size: 0.875em;

}

[/php]

نتیجه را از اینجا مشاهده کنید.

font-weight

وزن فونت را مشخص میکند. این ویژگی دقیقا همان چیزی است که همه آن را می شناسند. یعنی مشخص میکند نوشته bold باشد یا نه .

کد زیر را در بخش css وارد کنید.

[php]

p.normal {

font-weight: normal;

}

p.thick {

font-weight: bold;

}

[/php]

نتیجه را از اینجا مشاهده کنید.

Responsive Font Size

یک ویژگی دیگر که cssدرباره متن در اختیار شما میگذارد، responsive بودن است. این  ویژگی با خاصیت vwمعرفی می  شود. VW یعنی viewport width

با این ویژگی ، اندازه متن از اندازه مرورگر کاربر پیروی میکند. یعنی به نسبت تغییر اندازه صفحه مرورگر،نوشته ها نیز هماهنگ با آن تغییر اندازه پیدا میکنند.

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

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

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

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

سبد خرید

هیچ محصولی در سبد خرید نیست.