parsgreen.com
article

کار با ویژگی های font و text در css

css-font-text

پیش از این در بخش آموزش مقدماتی css، از کاربرد این زبان، نحوه تعریف و استفاده از کلاس (class) و آی دی (id) صحبت کردیم، همچنین با نحوه کار رنگ ها و تصاویر پس زمینه (Backgrounds) و ویژگی های آنها بیشتر آشنا شدیم و مثال هایی را در این خصوص به صورت صفحاتی کمی و بیش ساده با الگوهای دلخواه، مرور کردیم، اکنون در ادامه بحث آموزش های مقدماتی css می خواهیم با یکی دیگر از کاربردهای این زبان آشنا شویم و آن کار با فونت و متن و بررسی تنظیمات آنها است.

کار با فونت (Font) در css:


همانطور که قبلا گفتیم، css به عنوان ابزاری کمکی در شکل دهی ظاهر محتوای صفحاوت وب (html) کابرد دارد، به عبارتی از آن برای ایجاد استایل های مورد نظر برای عناصر صفحات وب که می تواند به فرض فونت مطالب باشد، استفاده می شود.

تنظیم حروف چپ به راست یا راست به چپ با direction:


در css برای نمایش حروف راست به چپ (مثل زبان فارسی)، از عنصر direction استفاده می کنند.
<style type="text/css">
body{
direction:rtl;
}
</style>
direction می تواند مقادیر rtl برای حروف فارسی یا ltr برای حروف انگلیسی داشته باشد.

تعریف فونت در :css


در css فونت را در حالت کلی به شیوه های زیر تعریف می کنند.
تعریف مستقیم فونت:
<style type="text/css">
body{
font:Tahoma, Geneva, sans-serif
}
</style>
تعریف خانواده فونت:
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
}
</style>
خانواده یک فونت می توانید برای مثال یکی از مقادیر زیر باشد:
- Verdana, Geneva, sans-serif
- Georgia, "Times New Roman", Times, serif
- Arial, Helvetica, sans-serif (مناسب برای حروف فارسی)
- Tahoma, Geneva, sans-serif (پرکاربردترین فونت برای حروف فارسی در وب)
فونت های بالا به ترتیب اولویت توسط مرورگر بررسی می شوند، اگر در سیستم کاربر فونت اول بود، دیگر از فونت های بعدی استفاده نمی شود، ولی اگر فونت اول وجود نداشت، نوبت به استفاده از فونت های بعدی می رسد، ذکر یک نکته ضروری است: استفاده از فونتهایی که در سیستم کاربران به طور پیش فرض وجود ندارد (مثل برخی از فونت های فارسی)، ممکن است موجب شود که کاربران صفحه شما، به همان شکلی که شما آن را می بینید، نتوانند مطالب را ببینند (به این دلیل که آن فونت خاص در سیستم آنها نصب نیست، لذا با نوع دیگری جایگزین می شود).

اندازه فونت یا font-size:


اندازه فونت ها در css با مقادیر px، em یا به صورت عبارات مشخص می شوند.
<style type="text/css">
body{
font-size:12px;
}
</style>
علاوه بر مقادیر پیکسلی می توان از em و یا عبارت تعریف شده در css استفاده کرد (البته توصیه می کنیم فقط از px استفاده کنید، چرا که استانداردتر است و در تمام مرورگرها به یک شکل پردازش می شود)؛ عباراتی که برای اندازه فونت به کار می روند عبارتند از:
- large (بزرگ)
- larger (بزرگتر از بزرگ)
- medium (معمولی)
- small (کوچک)
- smaller (کوچکتر از کوچک)
- x-large و xx-large (به ازای هر x یک مقدار بزرگتر از large)
- x-small و xx-small (به ازای هر x یک مقدار کوچکتر از small)
مقادیر پیکسلی به طور استاندارد از 9، 10، 12 شروع و به 36 ختم می شوند، مقادیر em از حاصل تقسیم مقادیر پیکسلی بر عدد 16 (16 اندازه پیش فرض فونت در مرورگر است) به دست می آید، مثلا 30px مساوی است با 1.875em، در مثال زیر از em استفاده شده است.
<style type="text/css">
body{
font-size:0.875em;
}
</style>

کشیدگی (stretch) فونت:


<style type="text/css">
body{
font-stretch:condensed;
}
</style>
stretch یا کشیدگی فونت بیشتر در مورد حروف لاتین کاربرد دارد، با این حال مقادیر زیر را می توان برای stretch در نظر گرفت.
- condensed (فشرده)
- expanded (بسیط)
- extra-condensed (خیلی فشرده)
- extra-expanded (خیلی بسیط)
- narrower (باریک)
- normal (عادی)
- semi-condensed (تقریبا فشرده یا نیمه فشرده)
- ultra-condensed (خیلی خیلی فشرده)
- ultra-expanded (خیلی خیلی بسیط)
- wider (عریض)

استایل فونت یا font-style:


از استایل فونت می توان برای ایجاد متون کج شده یا مایل استفاده کرد.
<style type="text/css">
body{
font-style:oblique;
}
</style>
مقادیر استایل فونت:
- oblique (مایل)
- italic (کج)
- normal (عادی)

ضخامت فونت یا font-weight:


در css برای برجسته کردن یک فونت، می توان این کار را با خاصیت font-weight انجام داد، font-weight و font-style در css تقریبا عملکردی شبیه تگ های b، strong، em و i در html دارند.
<style type="text/css">
body{
font-weight:bold;
}
</style>
برای ضخامت فونت می توانیم از مقادیر زیر استفاده کنیم.
- مقادیر عددی به صورت ضریبی از 100 تا 900 (100، 200، 300 تا 900).
- bold (ضخیم)
- bolder (خیلی ضخیم)
- lighter (نازک و سبک)
نکته: چند خاصیت دیگر نیز در css3 برای فونت وجود دارد که یا توسط برخی مرورگرها پشتیانی نمی شود یا اینکه کاربرد چندانی ندارد، از جمله font-size-adjust و font-variant.
برای آشنایی بیشتر با خاصیت های مربوط به فونت، در مثال زیر ما یک کلاس فرضی تعریف کرده ایم و متن موجود در آن را با عناصر فونت تنظیم نموده ایم.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | کار با فونت در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
.example{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-style:italic;
font-weight:bold;
direction:rtl;
}
</style>
</head>
<body>
<div class="example">
این متن به عنوان مثال با استفاده از ویژگی های فونت در css تنظیم شده است.
</div>
</body>
</html>
پیش نمایش

تنظیمات متن (text) در css:


تعریف نوع فونت و ویژگی های آن، گام اول برای نمایش محتوا در css است، در قدم بعدی نیاز به تنظیم چینش مطالب و نحوه نمایش آنها است، این ویژ گی ها با text و زیرمجموعه های آن ایجاد می شوند.

تنظیم تراز و چینش متن با text-align:


برای اینکه متن خود را به صورت راست چین یا چپ چین و... تنظیم کنید، باید از text-align و یکی از مقادیر زیر استفاده نمائید.
- center (تنظیم گوشه های متن در وسط)
- justify (تمام چین کردن متن، پوشش از سمت چپ و راست)
- left (چپ چین کردن متن)
- right (راست چین کردن متن)
مثال:
<style type="text/css">
body{
text-align:justify;
}
</style>

تزئین متن با text-decoration:


در css متن (و مخصوصا لینک) را با text-decoration تنظیم می کنند، مثلا اگر از این گزینه استفاده نکنید، بیشتر مرورگرها، لینک ها را به صورت متن زیرخط دار نشان می دهند.
مقادیری که در text-decoration استفاده می شود:
- blink (متن چشمکزن)
- line-through (متنی که خطی از داخلش گذشته یا بر روی آن خط کشیده شده)
- none (بدون موارد اضافه و حالت عادی)
- overline (متن با خطی روی آن)
- underline (متن زیر خط دار)
مثال:
<style type="text/css">
body{
text-decoration:none;
}
</style>

میزان فشردگی متن یا text-indent:


از این قابلیت بیشتر برای حروف انگلیسی (که بین آنها فاصله است) استفاده می شود و مقادیر آن را با پیکسل تعریف می کنند.
مثال:
<style type="text/css">
body{
text-indent:45px;
}
</style>

ایجاد سایه متن یا text-shadow:


text-shadow قابلیتی است که در css3 افزوده شده است، از این عنصر برای ایجاد سایه متن استفاده می شود؛ روش ایجاد آن به طور کلی به صورت زیر است:
<style type="text/css">
body{
text-shadow:5px 5px 2px #666;
}
</style>
اعداد در عبارت بالا به ترتیب نشانه فاصله افقی (horizontal shadow)، فاصله عمودی (vertical shadow)، فاصله ماتی (blur) و رنگ سایه است.
نکته: این امکان در مرورگر اینترنت اکسپلورر پشتیبانی نمی شود.

نمایش کوچک بزرگی حروف با text-transform:


text-transform قابلتی است در css که بیشتر برای حروف انگلیسی کاربرد دارد، چرا که می توان با آن حروف را بزرگ یا کوچک نشان داد، مقادیر text-transform عبارتند از:
- capitalize (حروف اول بزرگ نشان داده می شود)
- lowercase (تمام حروف کوچک نشان داده می شوند)
- uppercase (تمام حروف بزرگ نشان داده می شوند)
مثال:
<style type="text/css">
body{
text-transform:uppercase;
}
</style>
در خاتمه این بحث، توجه شما را به مثالی آنلاین جلب می کنیم که در آن، متنی فرضی را با عناصر تنظیم کننده، شکل داده ایم.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | تنظیمات متن در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
.text{
width:200px;
height:auto;
border:1px solid #666;
padding:4px;
margin-left:auto;
margin-right:auto;
direction:rtl;
text-align:justify;
text-transform:uppercase;
text-shadow:2px 2px 2px #F90;
}
</style>
</head>
<body>
<div class="text">
این متن به عنوان مثال با استفاده از ویژگی های text در css تنظیم شده است.
</div>
</body>
</html>
پیش نمایش 
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» نحوه تنظیم لیست با تگ ul li در css
» کار با ویژگی margin و padding در css
» کار با border و outline در css
» مقدمه ای بر CSS، جادوگر طراحی وب!
» نحوه تنظیم لینک (link) در استایل css
commentنظرات (۲۷ یادداشت برای این مطلب ارسال شده است)
نویسنده: محمد
زمان: ۱۲:۰۱:۲۳ - تاریخ: ۱۳۹۱/۰۷/۲۱
با سلام بخشید چطوری میتونیم تو css یه دستوری بنویسم که اگه فونتی رو کاربر در سیستمش نداشت از سمت سرور اون فونت براش ارسال بشه تا مشکلی پیش نیاد؟
پاسخ: 
سلام
برای این کار باید از ویژگی font-face@ در css3 استفاده کنید، این موضوع در آموزش زیر به طور کامل توضیح داده شده است:
آموزش استفاده از فونت فارسی در وب با CSS
نویسنده: nasser
زمان: ۱۱:۰۸:۲۱ - تاریخ: ۱۳۹۲/۰۲/۰۶
با تشکر از شما
نویسنده: علیرضا
زمان: ۰۲:۳۷:۲۴ - تاریخ: ۱۳۹۲/۰۴/۱۴
ببخشید طور میتونم داخله php رنگ نوشته رو تغییر بدم مثلا: وقتی خطا میشه به رنگ قرمز
 die("خطا در ورد اطلاعات");
مثلا: وقتی موفقیت آمیز بود به رنگ سبز:
die("موفقیت آمیز بود");
پاسخ: 
سلام
می توانید خروجی را به صورت یک بلاک div به همراه یک کلاس CSS ارسال کنید:
die('<div class="ok">موفقیت آمیز بود</div>');
البته برای نمایش خطا روش die توصیه نمی شود، چون باعث عدم اجرای ادامه کدها می شود.
نویسنده: مصطفی
زمان: ۲۱:۳۴:۴۵ - تاریخ: ۱۳۹۲/۰۸/۰۲
با تشکر فراوان واقعا خیلی ها چشم امیدشون فقط به همین سایته
می خواستم بدونم چطور میشه مثلا یه teaxtarea ساخت که رنگ پس زمینش رو خودمون تعیین کنیم برای مثال قرمز بزاریم
پاسخ: 
می توانید برای textarea یک کلاس CSS در نظر بگیرید و در آن کلاس از خاصیت background یا background-color استفاده کنید، مثال:
<style type="text/css">
.my-class{
background:#F7F7F7;
border:1px solid #CCC;
}
.my-class:hover{
background:#EFEFEF;
border:1px solid #CCC;
}
.my-class:focus{
background:#E5E5E5;
border:1px solid #999;
}
</style>
<textarea class="my-class" cols="80" rows="20"></textarea>
نویسنده: مصطفی
زمان: ۲۲:۵۷:۵۶ - تاریخ: ۱۳۹۲/۰۸/۰۶
ممنون از زحماتتون
ایا میشه با سی اس اس مثلا یه حالت سایه مانند یا شیار مانند دور عناصر بوجود اورد مثلا می خوایم دور یه input text یه مقدار سایه داشته باشه
پاسخ: 
باید از قابلیت های CSS3 دین منظور استفاده کنید، در چند مطلب در این خصوص صحبت کرده ایم، عبارت "زیبا سازی" و "CSS3" را در قسمت جستجو وارد کنید.
نویسنده: tekide
زمان: ۰۰:۴۳:۲۴ - تاریخ: ۱۳۹۲/۱۰/۲۷
ممنون. و خسته نباشید
نویسنده: الهام
زمان: ۱۲:۴۷:۱۷ - تاریخ: ۱۳۹۲/۱۱/۰۴
سلام . اگر بخواهیم هنگامی که کاربر بخواهد پیغام و یا اخباری را بر روی سایت بگذارد بالای textbox مربوط به نوشتن پیغام دکمه های راست چین و چپ چین و یا گذاشتن عکس و ویرایش و حذف قرار داده بشه و یا بتونه فونت مورد نظر خودش را برای متن انتخاب کنه ، چیزی شبیه به امکانات Word چی کار باید بکنم؟
پاسخ: 
سلام
چیزی که به دنبال آن هستید WYSIWYG نام دارد که مخفف What You See Is What You Get است، در وب برای داشتن این ادیتور دو انتخاب دارید:
- استفاده از ادیتورهای رایگان موجود مانند TinyMCE، CKEditor و... (برای این مورد در وب جستجو کنید).
- طراحی یک ادیتور شخصی (نیاز به داشتن تجربه بالا و تخصص در حد حرفه ای در کدنویسی جاوا اسکریپت دارد).
نویسنده: golnar
زمان: ۱۹:۰۵:۲۵ - تاریخ: ۱۳۹۳/۰۱/۰۶
چطور میشه با CSS فاصله بین خطوط متنی را تغییر داد؟
پاسخ: 
از خاصیت line-height با مقادیر پیکسلی یا درصدی استفاده کنید.
نویسنده: reza
زمان: ۱۷:۵۲:۱۶ - تاریخ: ۱۳۹۳/۰۳/۰۵
سلام. من یه جدول دارم که هر سطر و ستونش اندازه ی بخصوصی داره و کاربران میتونن داخلش متن بنویسن ولی مشکلم اینه که اگه کاربر از enter استفاده کنه خط شکسته میشه و جدول بطور افقی کشیده میشه چطور کاری کنم که اندازه ی ستونهای جدول ثابت بمونه
پاسخ: 
سلام
دقیقا متوجه نشدیم منظورتان چه نوع جدول و در چه محیطی است، اما اگر منظور جدول HTML و تحت وب است، می توانید یک مقدار پیکسلی ثابت به تگ table و td اختصاص دهید تا محتوای اضافه باعث شکستن اندازه ها نشوند.
نکته: خاصیت overflow نیز باید به صورت scroll یا auto تنظیم شود.
نویسنده: reza
زمان: ۱۲:۵۸:۱۸ - تاریخ: ۱۳۹۳/۰۳/۰۶
اره منظورم html هست ایا باید از max height و max width استفاده کنم من میخوام اندازه ی سطر و ستون ها همیشه ثابت بمونه حتی اگه نوشته ای درون جدول از اندازه ی سطر و ستونها بیشتر بشه.
پاسخ: 
با اختصاص height و width به صورت پیکسلی و در نظر گرفتن مقدار scroll برای overflow اندازه سلول ها ثابت مانده و تنها در صورتی که محتوا از سلول بیشتر باشد، اسکرول خواهید داشت (که قاعدتا هم باید به همین نحو باشد، به هر حال محتوا باید به نحوی نمایش داده شود!)، استفاده از max height و max width ضرورتی در این خصوص ندارد (البته ضرری هم ندارد!).
نویسنده: omid
زمان: ۲۳:۴۰:۵۱ - تاریخ: ۱۳۹۳/۰۳/۱۴
سلام
text-decoration:
حالت چشمکزن اصلا کار نمیکنه لطفا راهنمایی کنید .
با تشکر از زحماتتون
پاسخ: 
سلام
ظاهرا مرورگرها در نسخه های جدید خود به پشتیبانی از این خاصیت خاتمه داده اند و به جای آن از animation که جزء خاصیت های CSS3 است باید استفاده کرد، مثال:
<style type="text/css">
.blink{
animation: blink 1s steps(5, start) infinite;
-webkit-animation: blink 1s steps(5, start) infinite;
}
@keyframes blink{
to{
visibility: hidden;
}
}
@-webkit-keyframes blink{
to{
visibility: hidden;
}
}
</style>
<div class="blink">متن چمکزن</div>
نویسنده: سجاد
زمان: ۱۳:۳۸:۳۸ - تاریخ: ۱۳۹۳/۰۴/۲۹
سلام،
چطور میشه یه نیم جمله ی فارسی رو justify کرد. مثلاً مصراع های فرد یک غزل رو چطور میشه طوری justify کرد که همه فضای یکسانی رو اشغال کنند ؟
مرسی.
پاسخ: 
سلام
به طور کلی چنین کاری ممکن نیست، خاصیت justify در حالتی است که متن بیش از یک خط باشد و خط های ماقبل آخر از دو طرف کشیده می شوند، اما در حالتی که متن یک خطی است، تنها به یک طرف کشیده می شود، راه حل نسبی رفع این رفتار، استفاده از خاصیت letter-spacing با یک مقدار پیکسلی در کنار justify است که البته موجب جدا شدن حروف از هم می شود.
نویسنده: مهدی
زمان: ۰۱:۳۲:۳۲ - تاریخ: ۱۳۹۳/۰۵/۲۴
خیلی عالی بود بسیار ممنون.
خیلی کارامد. ممنون
نویسنده: زهرا
زمان: ۰۰:۵۳:۳۴ - تاریخ: ۱۳۹۳/۰۸/۰۳
ممنون از سایت خوبتون
چطور میشه وقتی در یک لیست روی موردی, ماوس رو میبریم حرف اول آن تغییر رنگ دهد ؟
پاسخ: 
برای این کار باید از جاوا اسکریپت استفاده کنید، نمونه کد:
<style type="text/css">
.word-block{
width:200px;
background-color:#FCEFBA;
}
.word-red{
color:#F00E12;
}
</style>
<script type="text/javascript">
function letterColor(id){
var element = document.getElementById(id);
var regex = new RegExp(/<span class="word-red">.*<\/span>/i);
if((element.innerHTML.search(regex)) == -1){
element.innerHTML = element.innerHTML.replace(/(.{1})(.*)?/gi, '<span class="word-red">$1</span>$2');
}
}
</script>
<div id="word" class="word-block" onmouseover="letterColor(this.id);">تست</div>
نویسنده: علی
زمان: ۰۱:۲۵:۴۱ - تاریخ: ۱۳۹۳/۰۹/۲۵
سلام و خسته نباشید. کد font-thin که برای کوچک کردن تگ h1 , h2 , .... استفاده میشه از نظر موتور های جستجو کار اشتباهیه؟ ممنون میشم اگه راهنماییم کنین
پاسخ: 
سلام
طبق تجربه موتورهای جستجو نسبت به خاصیت های CSS (به جزء مواردی مانند مخفی کردن کلید واژه ها و...) حساسیت خاصی ندارد!
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

9 × 5
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...