این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کار با فونت ها یا Fonts در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با فونت ها یا Fonts در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با فونت ها یا Fonts در CSS
در این جلسه از سری آموزش های مقدماتی زبان CSS میخواهیم با فونت ها و نحوه استفاده از آنها در یک صفحه وب آشنا شویم، در این جلسه میخواهیم با ویژگی های زیر آشنا بشیم :
- font-family : نام فونت
- font-style : استایل فونت
- font-size : اندازه فونت
- font-weight : وزن فونت
Free-Learn
معرفی انواع فونت
ما ۲ نمونه کلی فونت میتونیم داشته باشیم :
- فونت دلخواه ( که خودمون میتونیم به دلخواه بروی سایتمون نصب کنیم )
- فونت پیش فرض سیستمی ( که بصورت پیشفرض رو سیستم ها و مرورگرها وجود داره )
فونت دلخواه
مشخصه دیگه، فونتی هست که خودمون میتونیم بصورت دلخواه بروی سایتمون نصب کنیم، ( نصب که میگم در واقع یسری کدها هستن که باید به فایل CSS اضافه شه )
یعنی مثلا من یه فونت دارم و خوشم میاد ازش و میخوام همین فونت رو نصب کنم که دیگه متن داخل صفحه با اون فونت مورد علاقه من نمایش داده بشه.
من بصورت جداگانه، آموزش کامل نحوه اضافه کردن فونت دلخواه در سایت رو آموزش دادم که میتونید این آموزش رو مشاهده / مطالعه نمایید.
فونت پیش فرض سیستمی
یسری از فونت ها هستن که بصورت پیش فرض در تمامی سیستم های کامپیوتری وجود دارند، و تعدادی فونت هم هستن که بصورت عمومی توسط مرورگرهای اینترنتی پشتیبانی میشوند، یعنی در واقع این فونت های عمومی برای مرورگرها تعریف شده هس و اکثر مرورگرها این فونت هارو پشتیبانی میکنند.
حال اگر ما در صفحه از هیچ فونت سفارشی ( مثلا فونت مورد علاقمون ) استفاده نکرده باشیم ، اون فونت های پیش فرض یا عمومی که گفتم به کاربر نمایش داده میشن.
از فونت های پیش فرض یک سیستم و فونت های عمومی میتونیم موارد زیر رو نام ببریم :
- Serif
- Sans-serif
- Fantasy
- Times New Roman
- Arial
- Comic Sans MS
- Impact
- Tahoma
- Verdana
- Monospace
Free-Learn
نحوه مشخص کردن نام فونت
خیلی راحت با استفاده از ویژگی font-family میتونیم نام فونت رو مشخص کنیم، که شکل کلی برای تعریف و استفاده از ویژگی font-family بصورت زیر می باشد :
|
1 |
font-family: Font_Name; |
مثال شماره ۱ : مشخص کردن نام فونت برای کل صفحه ( کل صفحه هم یعنی تگ Body )
|
1 2 3 4 5 6 7 |
<style> body{ font-family:tahoma; } </style> |
Free-Learn
نحوه تعریف فونت جایگزین
خب دوستان در ادامه ی آموزش کار با فونت ها یا Fonts در CSS میخوام جریان فونت های جایگزین رو براتون توضیح بدم، لطفا با من همراه باشید.
خب یعنی چی فونت جایگزین!؟ یعنی اینکه ما وقتی داریم برای صفحه وبمون فونت مشخص میکنیم یه چنتا فونت هم بصورت جایگزین براش تعریف میکنیم تا اگه مثلا فونت اولی به هردلیلی نمایش داده نشد، فونت های جایگزین نمایش داده بشن.
مثلا اگه مثلا فونت اولی فراخوانی نشد فونت دومی فراخوانی و نمایش داده شود و حالا اگه مثلا فونت دومی هم فراخوانی نشد فونت سومی و همینجور تا هرچقدر که فونت تعریف کرده باشیم.
شکل کلی برای تعریف فونت های جایگزین :
|
1 |
font-family: Font_1, Font_2, Font_3, Font_N; |
پس فونت اولی ( Font_1 ) میشه فونت اصلی ما، اگه به هر دلیلی فونت شماره ۱ نمایش داده نشد فونت شماره ۲ جایگزین میشه و اگه باز دوباره فونت شماره ۲ نمایش داده نشد فونت شماره ۳ و…
نکته در مورد فونت های چند کلمه ای
فونتی که اسمش چند کلمه هست و لازم باشه بین کلمات فاصله گذاشت، میشه فونت چند کلمه ای، مثله :
|
1 |
Times New Roman |
این فونت هارو بهتره برای بحث بهینه بودن درون دوبل کوتیشن گذاشت یعنی درون ” ” ، و اگه داخل دوبل کوتیشن قرار نگیره ممکنه در برخی مرورگرها بکل اون فونت نمایش داده نشه.
یا ممکنه حتی اگه داخل دوبل کوتیشن نزارید بازم مشکلی نداشته باشه و نشون بده ولی خب بطور کلی برای بحث بهینه و استاندارد بودن میگن باید حتما داخل دوبل کوتیشن بزارید.
مثال : مشخص کردن چندین فونت بصورت همزمان و استفاده ازفونت چند کلمه ای
|
1 2 3 4 5 6 7 |
<style> body{ font-family: "Times New Roman", tahoma, Verdana; } </style> |
Free-Learn
آموزش کار با ویژگی Font-Style در CSS
با استفاده از این ویژگی میتوان استایل / سبک یک فونت رو مشخص کرد، مثلا اینکه فونت بصورت کج شده نمایش داده شود.
مثال : استفاده از ویژگی font-style
|
1 2 3 4 5 6 7 |
<style> body{ font-style:italic; } </style> |
Free-Learn
آموزش کار با ویژگی Font-Size در CSS
همونطور که از اسم این ویژگی مشخصه با استفاده از آن میتوان اندازه فونت یک عنصر رو مشخص کرد.
مثال : استفاده از ویژگی font-size
|
1 2 3 4 5 6 7 |
<style> body{ font-size:13px; } </style> |
Free-Learn
آموزش کار با ویژگی Font-Weight در CSS
با استفاده از این ویژگی میتوان وزن یک فونت را مشخص کرد، یعنی در واقع میزان نازکی و کلفت بودن یک فونت میشه وزنش که ما با استفاده از این ویژگی میتونیم اون رو تنظیم نماییم.
ما اگه بخوایم یک فونت رو در وزن های مختلفی نشون بدیم ، باید حتما خوده اون فونت در وزن های مختلف وجود داشته باشه، به همین خاطر هر فونتی رو نمیشه وزنش رو تغییر داد.
مثال شماره ۱ : مشخص کردن وزن فونت ( یک مقدار عددی که از ۱۰۰ شروع میشه و تا ۹۰۰ همینجور هی چاق میشه )
|
1 2 3 |
.Text-1{ font-weight:300; } |
