article

ویژگی های Font و Text در CSS

css-font-text

پیش از این در بخش آموزش مقدماتی CSS از کاربرد این زبان استایل نویسی، نحوه تعریف و استفاده از سلکتور کلاس (Class) و آی دی (ID) صحبت کردیم، همچنین با نحوه کار رنگ ها و تصاویر پس زمینه (Background) و ویژگی های آنها بیشتر آشنا شدیم و مثال هایی را در این خصوص به صورت صفحاتی کمی و بیش ساده با الگوهای دلخواه مرور کردیم، اکنون در ادامه مباحث آموزش مقدماتی CSS می خواهیم با یکی دیگر از کاربردهای این زبان آشنا شویم و شیوه کار با فونت، متن و اعمال تنظیمات سفارشی بر روی آنها را بررسی کنیم، قابلیت های CSS در این بخش با توجه به نیاز صفحات وب عمدتا به دو دسته Font و Text تقسیم بندی می شوند که در ادامه مطلب با نحوه کار و جزئیات آنها آشنا خواهیم شد.

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


انتخاب جهت متن معمولا نخستین گام ما در طراحی صفحات وب است، در CSS برای نمایش حروف از سمت راست به چپ (به طور مثال برای زبان فارسی) یا چپ به راست (حالت پیش فرض) از ویژگی direction استفاده می کنیم.
<style>
body{
    direction:rtl;
}
</style>
خاصیت direction می تواند مقادیر rtl برای حروف فارسی یا ltr برای حروف انگلیسی داشته باشد، عبارت RTL مخفف Right To Left و عبارت LTR مخفف Left To Right است.

فونت (Font) در CSS


همانطور که قبلا گفتیم CSS به عنوان ابزاری کمکی در شکل دهی ظاهر صفحاوت وب در کنار تگ های HTML کابرد دارد، به عبارتی از CSS برای ایجاد استایل مورد نظر و اعمال جلوه های سفارشی بر روی عناصر صفحات وب استفاده می شود، نمونه پرکاربرد و برجسته این عناصر، خانواده ویژگی های مربوط به فونت (Font) یا مرتبط با آن است که در ادامه به صورت موردی به بررسی آنها می پردازیم.

تعریف فونت در CSS با font و font-family


در CSS فونت را در حالت کلی به شیوه های زیر تعریف می کنیم.
- تعریف مستقیم فونت
در این حالت با استفاده از خاصیت font در CSS اسامی فونت های دلخواه را به عنوان مقدار در نظر می گیریم، این اسامی به ترتیب هستند و با علامت ویرگول (comma یا ,) از هم جداسازی می شوند، در هنگام پردازش صفحات وب مرورگر ابتدا به سراغ اولین فونت می رود، اگر به هر دلیل نتواند این فونت را بارگذاری کند فونت دوم بررسی و همین روال تا هر تعداد فونت تعریف شده ادامه خواهد داشت، در نهایت اگر مرورگر نتواند از هیچ کدام از فونت های در نظر گرفته شده استفاده نماید فونت پیش فرض اعمال خواهد شد.
<style>
body{
    font:Tahoma, Geneva, sans-serif;
}
</style>
- تعریف خانواده فونت
روش متداول دیگر استفاده از خاصیت font-family است، در این حالت علاوه بر اسامی فونت های مد نظر می توانیم خانواده فونت را نیز به عنوان مقدار تنظیم کنیم، منظور از "خانواده" فونت هایی هستند که در یک دسته بندی تعریف شده اند یا اطلاعات و شباهت های مشترکی دارند، انتخاب فونت اصلی طبق روال به صورت ترتیبی خواهد بود و اگر مرورگر نتواند فونت مد نظر را استفاده کند، فونتی را اعمال می کند که بیشترین شباهت را به خانواده در نظر گرفته شده داشته باشد، تعیین خانواده فونت ممکن است بین علامت های دابل کوتیشن ("" یا double quotation) درج شود، در این حالت فونت های بعدی باید از همان خانواده انتخاب شده باشند، مثال:
<style>
body{
    font-family:"Times New Roman", Times, serif;
}
</style>
خانواده فونت می تواند برای مثال یکی از مقادیر زیر باشد:
- Verdana, Geneva, sans-serif
- Georgia, "Times New Roman", Times, serif
- Arial, Helvetica, sans-serif (فونت پیش فرض مناسب برای حروف فارسی در وب)
- Tahoma, Geneva, sans-serif (پرکاربردترین فونت پیش فرض برای حروف فارسی در وب)
فونت های بالا به ترتیب اولویت توسط مرورگر بررسی می شوند، اگر در سیستم کاربر فونت اول در دسترس بود دیگر از فونت های بعدی استفاده نمی شود، اما اگر فونت اول وجود نداشت یا به هر دلیل در دسترس نبود، نوبت به استفاده از فونت های بعدی می رسد.
نکته 1: استفاده از فونت هایی که در سیستم کاربران به طور پیش فرض وجود ندارد (مانند برخی فونت های فارسی) ممکن است موجب شود که کاربران صفحه وب به همان شکلی که ما آن را می بینیم نتوانند مطالب را ببینند (به این دلیل که فونت مد نظر در سیستم آنها نصب نیست و قاعدتا با نوع دیگری جایگزین می شود) بر همین اساس اصطلاحی تحت عنوان Web Safe Font یا فونت مطمئن وب وجود دارد که توصیه می کند از فونت هایی در وب استفاده کنیم که در اغلب سیستم ها به طور خودکار نصب شده باشد، فونت sans-serif نمونه برجسته این مبحث است.
نکته 2: برای استفاده از فونت های فارسی دلخواه باید از قابلیتی به نام font-face در CSS استفاده کنیم، به جهت پیشرفته بودن این مبحث و جلوگیری از پیچیده شدن مطلب توضیح این مورد به صورت جداگانه در قسمت آموزش های کاربردی CSS صورت گرفته و در مطلبی با عنوان نحوه استفاده از فونت فارسی در وب در حال حاضر در سایت منتشر شده است.
نکته 3: در صورتی که از استایل خطی یا درون صفحه ای استفاده می کنیم باید همواره صفحه وب خود را در سرویس اعتبارسنجی W3C در آدرس زیر بررسی کنیم.
https://validator.w3.org
به طور مثال فونت Arial از نظر این سرویس نامعتبر است و نباید استفاده شود!

تعیین اندازه فونت در CSS با font-size


تعیین اندازه فونت در CSS با خاصیت font-size امکانپذیر است، اندازه فونت ها در این خاصیت با مقادیر px، em یا به صورت عبارات (به طور مثال large) مشخص می شود (em برگرفته از Element و px برگفته از Pixel است).
<style>
body{
    font-size:12px;
}
</style>
علاوه بر مقادیر پیکسلی می توانیم از em و یا عبارات تعریف شده در CSS استفاده کنیم، بهتر است اندازه فونت بلاک های اصلی و والد صفحه با px تعریف شوند، در حالت em اندازه ها معادل حاصل ضرب با اندازه پیکسلی فونت عنصر والد در نظر گرفته می شوند، به طور مثال اگر مقادیر font-size بلاک والد برابر 12 پیکسل باشد و در تگ فرزند از مقدار 2em استفاده کنیم در واقع معادل 24 پیکسل خواهد بود (24 = 12 * 2)، مثال:
<style>
.parent{
    direction:rtl;
    font-size:12px;
}
.child{
    font-size:2em;
}
</style>
<div class="parent">
فونت 12 پیکسل، مقدار دهی با px
<div class="child">
فونت 24 پیکسل، مقدار دهی با em
</div>
</div>
روش دیگر برای مقداردهی خاصیت font-size در CSS استفاده از عباراتی است که برای اندازه فونت به کار می روند:
- large (بزرگ)
- larger (بزرگتر از بزرگ)
- medium (معمولی)
- small (کوچک)
- smaller (کوچکتر از کوچک)
- x-large و xx-large (به ازای هر x یک مقدار بزرگتر از large)
- x-small و xx-small (به ازای هر x یک مقدار کوچکتر از small)
نکته: مقادیر پیکسلی به طور معمول از 10، 11، 12، 14، 16 شروع و به 36 ختم می شوند، در حالت پیش فرض و زمانی که عنصر والد مقدار پیکسلی برای font-size نداشته باشد، مقادیر em از حاصل تقسیم مقادیر پیکسلی مد نظر بر عدد 16 به دست می آید (16 اندازه پیش فرض فونت در اغلب مرورگرها است)، به طور مثال اگر بخواهیم 30px را معادل سازی کنیم مساوی با 1.875em خواهد بود (1.875 = 16 / 30).
در مثال زیر از em و مقداردهی با عبارات استفاده شده است.
<style>
body{
    direction:rtl;
}
.block-1{
    font-size:2.5em;
}
.block-2{
    font-size:small;
}
</style>
<div class="block-1">
فونت 40 پیکسل، مقدار دهی با em معادل با 2.5 * 16 = 40
</div>
<div class="block-2">
فونت small، مقداردهی با عبارات از پیش تعریف شده.
</div>
با توجه به اینکه در اینجا تگ والد تگ body است و مقدار اولیه ای برای font-size ندارد، عدد 16 به صورت پیش فرض در نظر گرفته می شود.

کشیدگی فونت در CSS با font-stretch


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

استایل فونت در CSS با font-style


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

ضخامت فونت در CSS با font-weight


برای نمایش فونت به صورت برجسته می توانیم از خاصیت font-weight در CSS استفاده کنیم، خاصیت های font-weight و font-style در CSS به لحاظ جلوه ظاهری عملکردی مشابه با تگ های b، strong، em و i در HTML دارند.
<style>
body{
    font-weight:bold;
}
</style>
برای تعیین ضخامت فونت می توانیم از مقادیر زیر برای خاصیت font-weight استفاده کنیم.
- مقادیر عددی به صورت ضریبی از 100 تا 900 (100، 200، 300 تا 900).
- bold (ضخیم)
- bolder (خیلی ضخیم)
- lighter (نازک و سبک)
نکته: چند خاصیت دیگر نیز در CSS3 برای فونت وجود دارد که در حال حاضر یا توسط برخی مرورگرها پشتیانی نمی شود یا اینکه کاربرد چندانی ندارد، از جمله font-size-adjust و font-variant.
برای آشنایی بیشتر با خاصیت های مربوط به Font، در صفحه وب زیر سلکتورها و کلاس های فرضی تعریف کرده و متن موجود در آنها را با عناصر Font تنظیم نموده ایم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ویژگی های فونت در CSS</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
.block {
    font-size: 14px;
}
.paragraph {
    font-size: 1.5em;
}
.font-stretch {
    font-stretch: condensed;
}
.font-style {
     font-style: oblique;
}
.font-weight {
    font-weight: 600;
}
</style>
</head>
<body>
جلوه ظاهری فونت در تگ body مقادیر 12px
<hr>
<div class="block">
جلوه ظاهری فونت در کلاس فرضی block مقداردهی با px مقادیر 14px
<p class="paragraph">
جلوه ظاهری فونت در کلاس فرضی paragraph مقداردهی با em مقادیر 1.5em معادل (1.5 * 14 = 21px)
</p>
</div>
<hr>
<div class="font-stretch">
جلوه ظاهری فونت در کلاس فرضی font-stretch<br><br>
خاصیت font-stretch تنها بر روی فونت هایی قابل اعمال است که این امکان در هنگام طراحی فونت در قسمت Face برای آن تعریف شده باشد (دارای Face های متعدد باشد)، این خاصیت در عمل چندان کاربردی نیست و باید فونت های خاص برای آن تعریف کرد!
</div>
<hr>
<div class="font-style">
جلوه ظاهری فونت در کلاس فرضی font-style مقادیر oblique
</div>
<hr>
<div class="font-weight">
جلوه ظاهری فونت در کلاس فرضی font-weight مقادیر 600
</div>
</body>
</html>
پیش نمایش

متن (Text) در CSS


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

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


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

تزئین متن در CSS با text-decoration


در CSS متن و مخصوصا لینک ها را با خاصیت text-decoration تنظیم می کنیم، به طور مثال اگر از این گزینه استفاده نکنیم بیشتر مرورگرها به صورت پیش فرض عبارات لینک شده را به صورت متن زیرخط دار نمایش می دهند.
مقادیری که برای ویژگی text-decoration قابل استفاده هستند:
- none: برای حالت عادی (بدون خط).
- overline: برای حالتی که خط در قسمت بالای متن ترسیم می شود.
- underline: برای حالتی که خط در زیر متن ترسیم می شود.
- line-through: برای ایجاد متنی که روی آن خط کشیده شده یا خطی از وسط آن گذشته است.
- blink: برای ایجاد متن های چشمک زن (این خاصیت در حال حاضر منسوخ شده و در اغلب مرورگرها پشتیبانی نمی شود، در ادامه آموزش حاضر در خصوص شیوه جایگزین ایجاد جلوه متن چشمک زن با استفاده از انیمیشن در CSS صحبت خواهیم کرد).
مثال:
<style>
a {
    text-decoration:none;
}
</style>
با در نظر گرفتن مقادیر none برای text-decoration در سلکتور a، تمام لینک های صفحه وب به صورت بدون زیرخط نمایش داده می شوند.
برای خاصیت هایی که شامل خط (line) می شوند می توانیم از مقادیر استایل زیر در کنار مقادیر اصلی برای تعیین جلوه ظاهری خط ترسیم شده استفاده کنیم:
- solid: خط عادی (حالت پیش فرض).
- double: خط دوتایی.
- dotted: خط نقطه چین.
- dashed: خط تیره (فاصله).
- wavy: خط موج دار.
علاوه بر این در حالت ترسیم خط می توانیم از مقادیر رنگی مجاز CSS (کدهای Hex، RGB، HSL و رنگ های با نام مانند red، green، blue، lime و...) نیز برای تعیین رنگ خط استفاده کنیم، مثال:
<style>
p {
    text-decoration: wavy underline lime;
}
</style>
این استایل در حالت پیش فرض بر روی تمام تگ های p در صفحه اعمال خواهد شد.

ایجاد متن چمک زن با استفاده از خاصیت animation در CSS


گفتیم که خاصیت blink به دلایلی توسط کنسرسیوم جهانی وب W3C منسوخ شده و در اغلب مرورگرهای امروزی پشتیبانی نمی شود، برای ایجاد این حالت می توانیم از شیوه جایگزین و خاصیت animation در CSS استفاده کنیم، مثال:
<style>
blink, .blink {
    animation: blink 1s step-end infinite;
    -webkit-animation: blink 1s step-end infinite;
    -moz-animation: blink 1s step-end infinite;
    -o-animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink {
    80% {
        opacity: 0;
    }
}
@-moz-keyframes blink {
    80% {
        opacity: 0;
    }
}
@-o-keyframes blink {
    80% {
        opacity: 0;
    }
}
@keyframes blink {
    80% {
        opacity: 0;
    }
}
</style>
<p class="blink">متن چمک زن</p>
جزئیات خاصیت animation باید در جای خود آموزش داده شود اما در گام فعلی در این حد بدانیم که می توانیم با نمونه استایل بالا در صفحات HTML متن چمک زن ایجاد نمود.

میزان تو رفتگی متن در CSS با text-indent


از ویژگی text-indent در حالتی استفاده می کنیم که بخواهیم خط ابتدای یک پاراگراف نسبت به سایر خطوط به اندازه دلخواه تو رفتگی (فضای خالی پیش از شروع متن) داشته باشد، مقادیر خاصیت text-indent می تواند به صورت px، em یا درصدی باشد.
مثال:
<style>
p{
    text-indent:45px;
}
</style>
امکان در نظر گرفتن مقادیر منفی نیز برای خاصیت text-indent وجود دارد، همچنین می توانیم از دو مقدار آزمایشی hanging و each-line بعد از در نظر گرفتن مقدار عددی استفاده کنیم، مثال:
<style>
p{
    text-indent:4em hanging;
}
</style>
در نظر گرفتن مقادیر hanging باعث برعکس شدن حالت پیش فرض خاصیت text-indent می شود، یعنی تمام خطوط به جزء خط اول حالت تو رفتگی خواهند داشت، همچنین استفاده از مقادیر each-line باعث می شود تا حالت تو رفتگی علاوه بر خط اول پاراگراف به خطوطی که به طور مثال با تگ br شکسته شده اند نیز سرایت کند، یادآور می شویم که hanging و each-line در حال حاضر به صورت آزمایشی معرفی شده اند و ممکن است در مرورگرهای مختلف به درستی عمل نکنند.

ایجاد سایه متن در CSS با text-shadow


خاصیت text-shadow در CSS3 معرفی شد، همان طور که از عبارت shadow مشخص است از این ویژگی برای ایجاد متن سایه دار استفاده می شود، مقداردهی text-shadow به طور کلی به صورت زیر است:
<style>
.text{
    text-shadow:5px 5px 2px #666;
}
</style>
اعداد در مقداردهی بالا به ترتیب نشانه فاصله افقی (Horizontal Shadow محور Xها)، فاصله عمودی (Vertical Shadow محور Yها)، فاصله ماتی (Blur) و رنگ سایه است.
نکته: خاصیت text-shadow در نسخه های ماقبل 10 مرورگر اینترنت اکسپلورر پشتیبانی نمی شود.

حروف کوچک و بزرگ در CSS با text-transform


خاصیت text-transform قابلیتی است در CSS که بیشتر برای حروف انگلیسی کاربرد دارد، به کمک این ویژگی می توانیم حروف را به صورت بزرگ یا کوچک نمایش دهیم، مقادیر خاصیت text-transform عبارتند از:
- capitalize (حروف اول بزرگ نشان داده می شود)
- lowercase (تمام حروف کوچک نشان داده می شوند)
- uppercase (تمام حروف بزرگ نشان داده می شوند)
مثال:
<style>
p{
    text-transform:uppercase;
}
</style>
برای آشنایی بیشتر با خاصیت های مربوط به Text، در صفحه وب زیر سلکتورها و کلاس های فرضی تعریف کرده و متن موجود در آنها را با عناصر Text تنظیم نموده ایم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ویژگی های متن در CSS</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
a {
    text-decoration: none;
    font-size: 14px;
}
a:hover {
    text-decoration: underline;
}
p {
    text-align: justify;
    width: 200px;
    border: 1px solid #3F9C0C;
}
.indent {
    text-indent: 50px;
    border: 1px solid #2270D9;
}
.shadow {
    text-shadow: 5px 5px 2px #666;
}
.transform {
    text-transform: capitalize;
    border: 1px solid #7639E7;
}
.ltr {
    direction: ltr;
}
</style>
</head>
<body>
جلوه ظاهری متن و <a href="#" title="لینک">لینک</a> در تگ body، با توجه به درنظر گرفتن مقادیر none برای خاصیت text-decoration در سلکتور a، لینک بدون زیرخط نمایش داده می شود، اما در حالت hover و زمانی که نشانه گر ماوس را روی لینک می بریم، حالت underline خواهد داشت.
<hr>
<p>
متن در این پاراگراف با خاصیت text-align و مقادیر justify تنظیم شده است، justify باعث نمایش متن به صورت تمام چین می شود و فضای خالی از هر دو سمت چپ و راست پر خواهد شد.
</p>
<hr>
<p class="indent">
تو رفتگی متن در این پاراگراف با خاصیت text-indent و مقادیر 50px تنظیم شده است، همان طور که اشاره شد مقادیر hanging و each-line در حال حاضر در مرحله آزمایشی قرار دارند و بهتر است به صورت کاربردی استفاده نشوند.
</p>
<hr>
<div class="shadow">
متن سایه دار در CSS با خاصیت text-shadow ایجاد می شود.
</div>
<hr>
<div>
جلوه ظاهری متن زبان انگلیسی در کلاس فرضی transform:<br>
<p class="transform ltr">CSS is easy and powerfull!</p>
</div>
</body>
</html>
پیش نمایش 
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» کاربرد خاصیت height و width در CSS
» خاصیت Background و ویژگی های آن در CSS
» کار با border و outline در CSS
» مقدمه ای بر CSS و استایل دهی صفحات وب
» نحوه تنظیم لیست با تگ ul li در CSS
commentنظرات (۲۹ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: امیرمحمد
۱۲:۵۲ ۱۳۹۳/۱۰/۲۱
خداقوت ...
استفاده کردم ، ممنون
نویسنده: داوود
۱۳:۳۷ ۱۳۹۴/۰۳/۱۷
سلام آقای مهندس؛ روزتون بخیر و ممنون بابت مطالبی که میذارین. استاد میشه در مثالی که برای آقا مصطفی زدین، برای اینکه تعداد خطوط CSS مون کمتر شه و کدها بهینه تر، ما بیایم و به خود تگ textarea این خاصیت رو بدیم و دیگه برای هر کدوم از کلاس و یا id ها این خط رو تکرار نکنیم:
border:1px solid #CCC;
اینجوری یعنی ببینید:
textarea{
border:1px solid #CCC;
}
.my-class{
background:#F7F7F7;
}
.my-class:hover{
background:#EFEFEF;
}
.my-class:focus{
background:#E5E5E5;
}
پاسخ: 
قاعدتا روش شما امکانپذیر است و بسته به شرایط می تواند استفاده شود، منتها باید به دو نکته توجه کنید:
- استفاده از ویژگی های عمومی در عین برخورداری از مزیت های خود، در حالتی که نیاز به تعریف استایل اختصاصی برای یک عنصر دارید کاربردی نخواهند داشت و باید این کار توسط class یا id مجزا انجام شود.
- در مثال درج شده برای کاربر در قسمت focus از رنگ متفاوتی برای border استفاده شده که اگر بخواهید این حالت را در textarea داشته باشید، باید برای آن به صورت مجزا تعریف کنید.
در کل از ویژگی های عمومی در مواردی استفاده کنید که یک استایل باید به تمام عناصر همسان اعمال شود یا یک مقدار پیش فرض برای استایل عناصر باید وجود داشته باشد.
نویسنده: حسین
۲۳:۱۸ ۱۳۹۴/۰۳/۳۱
با سلام
میخوستم ازتون بپرسم اسم فونت تصویر اول که گذاشتین چیه؟؟
من خیلی دنبال این فونت بودم ولی اسمش رو نمیدونم ، اگر بتونید اسمش رو بهم بگید خیلی ممنونتون میشم.
پاسخ: 
فونت Arial ساده است منتها با تکنیک های طراحی به این شکل تغییر یافته!
(نکته: طرح استفاده شده اختصاصی نیست.)
نویسنده: حسین
۰۸:۵۹ ۱۳۹۴/۰۴/۰۳
با سلام
من psd این فونت (به صورت کامل با تکنیک های طراحیش) رو احتیاج دارم و اگر هزینه ای هم داشته باشه تقبل میکنم (اینقدر بهش احتیاج دارم)
پاسخ: 
متاسفانه طرح لایه باز این تصویر در اختیار ما نیست!
نویسنده: morteza
۱۸:۱۵ ۱۳۹۴/۰۴/۰۶
آقا من واقعاً نمی دونم چی بگم! یعنی من بگم سایت شما بهترین سایت آموزشی است، اقرار نکردم. بسیار ممنونم از سایت خوبتون.
نویسنده: حسام آقاجانی
۱۲:۵۱ ۱۳۹۴/۰۵/۲۳
سلام آیا راهی هست تا نوشته های یک تگ div را بدون اضافه کردن تگ p و یا تگ های دیگر تغییر داد به کد زیر دقت کنید :
<div>
وبگو
</div>
من بنا به دلایلی این کد را نمیتونم به صورت زیر بنویسم و رنگ نوشته رو عوض کنم:
<div>
<p style="color:#F00">
وبگو
</p>
</div>
لطفا راهنماییم کنید چگونه بدون اضافه کردن تگی کنار کلمه ی وبگو میتونم رنگش رو عوض کنم و آیا دستوری هست که رنگ نوشته های داخل div رو عوض کنه ؟
پاسخ: 
برای این کار باید یک id یا class به بلاک مورد نظر اختصاص دهید و از طریق استایل CSS، موارد مورد نظر را اعمال نمائید، بدون اختصاص id یا class نیز این کار ممکن است، منتها به تمام تگ های div استایل اعمال خواهد شد، مثال:
<style>
div{
color:#087B93;
}
</style>
<div>متن داخل بلاک</div>
راه حل دیگر می تواند مبتنی بر جاوا اسکریپت باشد که البته باید تگ های قبلی مشخص و یک id نیز داشته باشند تا قابل انتخاب شدن باشند.
نویسنده: مهیا
۲۱:۳۱ ۱۳۹۴/۰۷/۲۷
سلام. اگه بخوایم حالت justify ای رو که به یه متن اعمال کردیم رو از بین ببریم و از حالت justify درش بیاریم باید چیکار کنیم؟ ممنون که وقت می ذارین
پاسخ: 
می توانید برای خاصیت text-align مقدار دیگری (center, left, right) در نظر بگیرید.
نویسنده: داوود
۱۳:۱۱ ۱۳۹۴/۰۸/۰۳
سلام استاد عزیز؛
وقتتون بخیر.
استاد طبق توضیحی که نوشتین و تو سایت w3schools هم به اون اشاره شده از دستور text-indent برای جلو یا عقب رفتن متون استفاده میشه. حالا بعضی جاها رو می بینیم که اومدن و با این کد:
text-indent:-9999px;
متن مورد نظر رو مخفی کردن که فکر کنم روی اون لوگو قرار بدن! اگه اشتباه نکنم. میخواستم ببینم این کار استاندارده و مشکلی نداره از نظر seo و غیره. اصلا درست گفتم از نظر اینکه مقدار
-9999
رو برای مخفی کردن بهش اعمال کردن؟؟
متشکر و سپاسگزارم.
پاسخ: 
هرچند الگوریتم های ربات های جستجوگر ممکن است تغییر کند، اما در حال حاضر این روش مشکلی برای SEO سایت ایجاد نمی کند و (ترجیحا به تعداد کم) قابل استفاده است!
نویسنده: حسین شریفی
۱۳:۳۶ ۱۳۹۴/۱۰/۱۴
سلام استاد
پس رو این حساب دو کلاس example و text هرکدوم یک کار رو انجام میدن منتها به خاصیتهای مختلف..... درسته استاد؟!
اگر طور دیگه ای هستش خواهشا بگین.....
پاسخ: 
عبارت example و text هر دو نام انتخابی برای class در CSS هستند و می توانند به جای آنها عبارات دلخواه دیگری استفاده شود، این خاصیت های استفاده شده در کلاس است که در خروجی تاثیر متفاوت دارد، به فرض font-weight ضخامت فونت موجود در کلاس را مشخص می کند و text-shadow سایه دار بودن متن.
نویسنده: سیدرضا بازیار
۱۲:۴۶ ۱۳۹۵/۰۴/۲۱
ممنون
خوب بود
نویسنده: milad
۲۳:۲۳ ۱۳۹۵/۰۵/۲۱
سلام مهندس
wp-styl.css
family:'Droid Arabic Naskh
margin-left: 20px;font-weight: bold;
با firebug فونت بولد میشه ولی تو سایت نه مشکل چیه
پاسخ: 
برای نمایش فونت های سفارشی از قابلیت font-face@ در CSS3 استفاده کنید.
نویسنده: sara
۱۷:۴۵ ۱۳۹۵/۰۶/۲۰
عالی بود ممنون از آموزش خوبتون
نویسنده: Reza N
۰۳:۰۷ ۱۳۹۵/۱۰/۲۷
سلام، ممنون از آموزش جامع و مفیـدتون! خیلی کمکم کرد!
نویسنده: Iman Mafakheri
۱۶:۱۳ ۱۳۹۹/۰۶/۳۰
سلام من یه قالب خارجی اوردم راست چینش کردم حتی فونتشم تغییر دادم اما متاسفانه وقتی متن فارسی مینویسم حروف رو جدا جدا مینویسه نمیدونم مشکل از کجاست
پاسخ: 
باید چند مورد را بررسی کنید:
- در هنگام فراخوانی سایت با زدن دکمه F12 و از طریق قسمت Network بررسی کنید که در قسمت Response Headers سربرگ زیر وجود داشته باشد:
content-type: text/html; charset=UTF-8
- متاتگ زیر در صفحه وجود داشته باشد و همچنین خاصیت lang را برای تگ HTML در نظر بگیرید:
<html lang="fa">
<meta charset="utf-8">
- بررسی کنید که در فایل های CSS خاصیت های مربوط به یونیکد مانند unicode-bidi استفاده نشده باشد.
- تمام فایل هایی که ممکن است در ایجاد خروجی نقش داشته باشند با برنامه ++Notepad اجرا کرده و از منوی Encoding گزینه Encoding in UTF-8 را انتخاب کنید تا اگر BOM (Byte Order Mark) در فایل ها وجود داشت حذف یا در صورت تنظیم یونیکد اشتباه اصلاح شود، دقت کنید حتما قبل از هرگونه ویرایشی از فایل های اصلی پشتیبان داشته باشید.
در صورت تمایل می توانید قالب را در یک نمونه لینک استفاده و آدرس URL را درج کنید تا بیشتر بررسی کنیم.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





1 × 4
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form عبدالمالت ریالی
در:
سلام علیک میشه از چند فونت در یک صفحه html استفاده کرد.؟
۱۳۹۹/۰۸/۰۱

form مبینا
در:
سلام من برنامه ای میخواستم که داخل ارایه 5 رنگ قرار گرفته باشه. و با استفاده از حلقه for این یک متنو به اون پنج...
۱۳۹۹/۰۸/۰۱

form mohadeseh
در:
ممنون از راهنماییتون مشکلم حل شد
۱۳۹۹/۰۷/۲۸

form محمد
در:
سلام. یک کد نوشته ام بدین صورت: وقتی صفحه باز شده یک پنجره پیام خالی با یک ok باز شده هر چه ok را...
۱۳۹۹/۰۷/۲۸

form فایز پور جهانبخشی
در:
سلام اگر بخواهیم برنامه ای که داخل متلب نوشتیم تا یک ثانیه اجرا شود و بعد از ثانیه اول در حالت خطا که...
۱۳۹۹/۰۷/۲۸

form mohadeseh
در:
الان کد من که توی تگ <head> گزاشتم میخواستم بدونم ایا امکانش هست که توی تگ link که ایکون رو باهاش اوردم بتونم...
۱۳۹۹/۰۷/۲۷

form mohadeseh
در:
سلام ببخشید لطفا راهنمایی کنید که چجوری title برای favicon در html بزارم؟ جوری که وقتی موس روی icon قرار بگیره متن...
۱۳۹۹/۰۷/۲۷

form ryomaechizen
در:
سلام. اگه حافظه وب پر بشه و مجبورا عکسا کپی باشن چطور باید مشکل بارگزاریشون حل بشه؟
۱۳۹۹/۰۷/۲۶

form رونا
در:
پرونده فرستاده شده نمی‌تواند به wp-content/uploads/2020/10 برود. سلام این ارور برای چی رخ می ده
۱۳۹۹/۰۷/۲۵

form reza
در:
سلام خوبید انشاالله؟ خواستم بدونم این نوار ابزار رو چطور باید اونایی رو دوست دارم بزارم سمت راست وبلاگم. هر چی کد و ......
۱۳۹۹/۰۷/۲۴

form سینا
در:
چگونه میتوانیم با استفاده از HTML فرمول شیمیایی مواد را بنویسیم؟ با عدد اتمی، جرمی و بار اتمی
۱۳۹۹/۰۷/۲۱

form فاطمه
در:
سلام ممنونم... خیلی ساده و روون توضیح دادین.. اونقدر که تشویق شدم محتوای یه فایل تکس رو با ایجکس درون یه div بیارم ولی...
۱۳۹۹/۰۷/۲۱

form امیرحسین
در:
خب متوجه شدم. که باید خط اول عدد فانکشن رو تغییر بدم. بسته به تعداد آرایه یا هر عدد دیگه تغییر بدم جوابمو...
۱۳۹۹/۰۷/۲۱

form امیرحسین
در:
عالی بود. خیلی ممنونم. ولی هر چند کلمه داخل آرایه داشته باشم به همون میزان خروجی گرفته میشه. من اگه 10 کلمه در آرایه داشته...
۱۳۹۹/۰۷/۲۱

form سعادتی
در:
سلام کاش روش برطرف کردن این بهم ریختگی رو هم توضیح میدادید. ممنون
۱۳۹۹/۰۷/۲۰
form امیرحسین
در:
موفق شدم اینو پیدا کنم. ولی میخوام کلمات تکراری داخلشون نباشه. مثال AAA فقط یک بار در اون خط وجود داشته باشه.
۱۳۹۹/۰۷/۲۰
form امیرحسین
در:
سلام. نه محدودیت زمانی وجود نداره.
۱۳۹۹/۰۷/۲۰
form امیرحسین
در:
سلام خسته نباشید. میخوام از این تابع برای بدست آوردن لیست های متفاوت استفاده کنم. مثلا یه آرایه داشته باشم. امیدوارم کمکم...
۱۳۹۹/۰۷/۲۰
form ابوالفضل
در:
سلام وقتتون بخیر من میخوام یه افزونه برای مرورگر کروم طراحی کنم و میخوام یه متنی رو هر سری از سایت دریافت کنه و...
۱۳۹۹/۰۷/۲۰
form mahdi
در:
سلام چطور می تونم از ip خارجی استفاده کنم؟ برای دریافت لانچر میخام. مرسی
۱۳۹۹/۰۷/۱۹
form احسان عباسی
در:
با سلام و تشکر از سایت خوبتون من یه کد تعریف کردم که در بورس ایران سهم مدنظرمو بیاره .. میخواستم ببینم امکانش هست دستوری...
۱۳۹۹/۰۷/۱۷
form شبنم
در:
سلام وقتتون بخیر، ببخشید از کلمه event یا e دقیقا چه زمانی توی فانکشن استفاده میکنیم؟
۱۳۹۹/۰۷/۱۷
form احمد
در:
با عرض سلام مجدد ساختار کلی دستورم به این صورت هست. بعد از حلقه وایل اون دیو کلاس 1 و 2 و 3 میخواهم...
۱۳۹۹/۰۷/۱۶
form احمد
در:
با عرض سلام ببخشید چطوری میتونم یه قسمت از تگ ها رو داخل حلقه وایل رد کنم دوباره تگ های بعدی داخل حلقه قرار بگیرن...
۱۳۹۹/۰۷/۱۶
form ابوالفضل
در:
سلام واقعا من خیلی گشتم تا بتونم این آموزش رو پیدا کنم چون واقعا نمی دونستم چی بنویسم تا یک رتبه بندی برای نتایج جستجو...
۱۳۹۹/۰۷/۱۵
form mahtab
در:
سلام وقتتون بخیر ببخشید میشه بفرمایید چجوری کلیپ رو بزاریم وبلاگ ؟؟ بی زحمت کامل بفرمایین ممنون و متشکر
۱۳۹۹/۰۷/۱۴
form Saeid Azari
در:
سلام ببخشید اگه امکانش هست سوال منو جواب بدید یکم گیج شدم...من یک کد html دارم که باید یک سایت درست کنم و ان را...
۱۳۹۹/۰۷/۱۳
form ابوالفضل
در:
سلام یک سوال دارم چجوری یک متنی که درون تگ td هست و بعد تگ br هست (تگ br درون تگ td است) رو...
۱۳۹۹/۰۷/۱۳
form parnian
در:
با سلام با توجه به این که این مطلب در سال 91 نوشته شده ایا تغیری هم کرده؟ مثلا استفاده و مهم بودن تگ های...
۱۳۹۹/۰۷/۱۳
form fahimeh
در:
سلام من دارم پروژه واسه دانشگاه مینویسم طراحی سایتو کردم برای کار با پایگاه داده دستور insert و delete کار میکنه ولی...
۱۳۹۹/۰۷/۱۲
form امین
در:
با عرض سلام ببخشید یه فرم دارم اخر فرمم یه دکمه دارم میخواستم بدونم چطوری باید بعد از کلیک کردن دکمه به صفحه دیگه انتقال...
۱۳۹۹/۰۷/۱۱
form محسن
در:
سلام من از فرم ساز گرویتی استفاده میکنم آیا امکان استفاده همچین چیزی رو میتونم داخلش داشته باشم آیا کدی داره که در قسمت...
۱۳۹۹/۰۷/۱۱
form مالکی
در:
چرا وبلاگم بالا نمی یاد
۱۳۹۹/۰۷/۰۹
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید نمونه کد رو اگر امکانش هست نگاه کنید که چطوری این متغییری رو که بدست اوردم در...
۱۳۹۹/۰۷/۰۹
form الناز
در:
سلام وقتتون بخیر. چطور میشه برنامه ای رو در php نوشت که کدملی رو تبدیل به شماره دانشجویی کنه اگه برام بنویسید ممنون میشم.
۱۳۹۹/۰۷/۰۹
form محمد
در:
سلام من میخواستم بدونم چه طوری میشه بدون اینکه از کاربر بپرسی که میخواهد از حساب خروج پیدا کند خود سایت بفهمد که کاربر از...
۱۳۹۹/۰۷/۰۹
form احمد
در:
با سلام ببخشید چطوری باید در جکوری از یک متغییر در صفحات دیگه استفاده کنم مثال دو عدد را باهم جمع کردم و ریختم داخل...
۱۳۹۹/۰۷/۰۹
form مهسا
در:
سلام و خسته نباشید مشکلی برای وبلاگ من پیش اومده موقع ورود بهم پیام میده وبلاگ داره بروز رسانی میشه و بعدا وارد وبلاگ شوید...
۱۳۹۹/۰۷/۰۸
form Moshtagh
در:
سلام و خسته نباشید بنده چند روزه که وقتی اطلاعات ورود به وبلاگم رو وارد تیترها و کلیک میکنم با چنین پاسخی مواجه میشم...
۱۳۹۹/۰۷/۰۸
form mahtab
در:
سلام خسته نباشین ببخشید چرا بلاگفا باز نمیکنه ؟؟؟ میرم مدیریت وبلاگ نه تو بروز شده ها وبی هستم نه هم که...
۱۳۹۹/۰۷/۰۷
form جواد
در:
سلام و عرض ادب. سایت من هک شده و یک کد ریدایرکت تو دیتابیس هاستم بارگزاری شده که آخر همه پست ها تو...
۱۳۹۹/۰۷/۰۷
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.