تنظیمات متن و تایپوگرافی در CSS
تنظیمات متن و تایپوگرافی در CSS
تایپوگرافی توی CSS خیلی مهمه چون مستقیماً روی خوانایی و زیبایی سایت تأثیر می‌ذاره. بیا بخش‌های اصلی تنظیمات متن رو بررسی کنیم!
۱. تغییر فونت (Font Family)
با این ویژگی می‌تونیم نوع فونت متن رو تغییر بدیم. معمولاً چند فونت رو به ترتیب می‌نویسیم تا اگه مرورگر یکی رو نداشت، از بعدی استفاده کنه.
font-family: "Arial", "Helvetica", sans-serif;
فونت‌های استاندارد: Arial, Times New Roman, Courier New
فونت‌های سفارشی: باید از @font-face یا Google Fonts استفاده کنیم.
۲. تغییر اندازه فونت (Font Size)
font-size: 16px; /* اندازه ثابت برحسب پیکسل */
font-size: 1.2em; /* نسبی به اندازه والد */
font-size: 150%; /* درصدی */
font-size: small; /* مقدار از پیش تعریف‌شده */
font-size: 1.2em; /* نسبی به اندازه والد */
font-size: 150%; /* درصدی */
font-size: small; /* مقدار از پیش تعریف‌شده */
واحدهای متداول:
✅ px (پیکسل) – مقدار دقیق
✅ em – نسبی به عنصر والد
✅ rem – نسبی به root (عنصر <html>)
✅ % – نسبی به سایز پیش‌فرض
۳. ضخامت فونت (Font Weight)
font-weight: normal; /* عادی */
font-weight: bold; /* ضخیم */
font-weight: 100; /* مقدار دقیق از 100 تا 900 */
font-weight: bold; /* ضخیم */
font-weight: 100; /* مقدار دقیق از 100 تا 900 */
۴. سبک فونت (Font Style)
font-style: normal; /* عادی */
font-style: italic; /* مورب */
font-style: oblique; /* کج */
font-style: italic; /* مورب */
font-style: oblique; /* کج */
۵. فاصله بین حروف و خطوط
letter-spacing: 2px; /* فاصله بین حروف */
word-spacing: 5px; /* فاصله بین کلمات */
line-height: 1.5; /* فاصله بین خطوط */
word-spacing: 5px; /* فاصله بین کلمات */
line-height: 1.5; /* فاصله بین خطوط */
۶. تغییر ظاهر متن
text-transform: uppercase; /* تمام حروف بزرگ */
text-transform: lowercase; /* تمام حروف کوچک */
text-transform: capitalize; /* حرف اول هر کلمه بزرگ */
text-transform: lowercase; /* تمام حروف کوچک */
text-transform: capitalize; /* حرف اول هر کلمه بزرگ */
۷. ترازبندی متن (Text Alignment)
text-align: left; /* چپ‌چین */
text-align: center; /* وسط‌چین */
text-align: right; /* راست‌چین */
text-align: justify; /* تراز کامل */
text-align: center; /* وسط‌چین */
text-align: right; /* راست‌چین */
text-align: justify; /* تراز کامل */
۸. دکوراسیون متن (Text Decoration)
text-decoration: none; /* حذف خط زیر لینک */
text-decoration: underline; /* خط زیر متن */
text-decoration: line-through; /* خط روی متن */
text-decoration: overline; /* خط بالای متن */
text-decoration: underline; /* خط زیر متن */
text-decoration: line-through; /* خط روی متن */
text-decoration: overline; /* خط بالای متن */
۹. سایه متن (Text Shadow)
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
/* فاصله افقی | فاصله عمودی | میزان محوشدگی | رنگ */
/* فاصله افقی | فاصله عمودی | میزان محوشدگی | رنگ */
پیشنهاد ویژه یادگیری
دسترسی نامحدود به بیش از ۴,۰۰۰ ویدئوی آموزشی تخصصی
با تهیه یک اشتراک ماهانه در پلتفرم Elimi|علیمی، بدون محدودیت به تمام دوره‌ها، پروژه‌ها و مسیرهای یادگیری دسترسی پیدا کنید.
تنظیمات متن و تایپوگرافی در CSS
تایپوگرافی توی CSS خیلی مهمه چون مستقیماً روی خوانایی و زیبایی سایت تأثیر می‌ذاره. بیا بخش‌های اصلی تنظیمات متن رو بررسی کنیم!
۱. تغییر فونت (Font Family)
با این ویژگی می‌تونیم نوع فونت متن رو تغییر بدیم. معمولاً چند فونت رو به ترتیب می‌نویسیم تا اگه مرورگر یکی رو نداشت، از بعدی استفاده کنه.
font-family: "Arial", "Helvetica", sans-serif;
فونت‌های استاندارد: Arial, Times New Roman, Courier New
فونت‌های سفارشی: باید از @font-face یا Google Fonts استفاده کنیم.
۲. تغییر اندازه فونت (Font Size)
font-size: 16px; /* اندازه ثابت برحسب پیکسل */
font-size: 1.2em; /* نسبی به اندازه والد */
font-size: 150%; /* درصدی */
font-size: small; /* مقدار از پیش تعریف‌شده */
font-size: 1.2em; /* نسبی به اندازه والد */
font-size: 150%; /* درصدی */
font-size: small; /* مقدار از پیش تعریف‌شده */
واحدهای متداول:
✅ px (پیکسل) – مقدار دقیق
✅ em – نسبی به عنصر والد
✅ rem – نسبی به root (عنصر <html>)
✅ % – نسبی به سایز پیش‌فرض
۳. ضخامت فونت (Font Weight)
font-weight: normal; /* عادی */
font-weight: bold; /* ضخیم */
font-weight: 100; /* مقدار دقیق از 100 تا 900 */
font-weight: bold; /* ضخیم */
font-weight: 100; /* مقدار دقیق از 100 تا 900 */
۴. سبک فونت (Font Style)
font-style: normal; /* عادی */
font-style: italic; /* مورب */
font-style: oblique; /* کج */
font-style: italic; /* مورب */
font-style: oblique; /* کج */
۵. فاصله بین حروف و خطوط
letter-spacing: 2px; /* فاصله بین حروف */
word-spacing: 5px; /* فاصله بین کلمات */
line-height: 1.5; /* فاصله بین خطوط */
word-spacing: 5px; /* فاصله بین کلمات */
line-height: 1.5; /* فاصله بین خطوط */
۶. تغییر ظاهر متن
text-transform: uppercase; /* تمام حروف بزرگ */
text-transform: lowercase; /* تمام حروف کوچک */
text-transform: capitalize; /* حرف اول هر کلمه بزرگ */
text-transform: lowercase; /* تمام حروف کوچک */
text-transform: capitalize; /* حرف اول هر کلمه بزرگ */
۷. ترازبندی متن (Text Alignment)
text-align: left; /* چپ‌چین */
text-align: center; /* وسط‌چین */
text-align: right; /* راست‌چین */
text-align: justify; /* تراز کامل */
text-align: center; /* وسط‌چین */
text-align: right; /* راست‌چین */
text-align: justify; /* تراز کامل */
۸. دکوراسیون متن (Text Decoration)
text-decoration: none; /* حذف خط زیر لینک */
text-decoration: underline; /* خط زیر متن */
text-decoration: line-through; /* خط روی متن */
text-decoration: overline; /* خط بالای متن */
text-decoration: underline; /* خط زیر متن */
text-decoration: line-through; /* خط روی متن */
text-decoration: overline; /* خط بالای متن */
۹. سایه متن (Text Shadow)
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
/* فاصله افقی | فاصله عمودی | میزان محوشدگی | رنگ */
/* فاصله افقی | فاصله عمودی | میزان محوشدگی | رنگ */
پیشنهاد ویژه یادگیری
دسترسی نامحدود به بیش از ۴,۰۰۰ ویدئوی آموزشی تخصصی
با تهیه یک اشتراک ماهانه در پلتفرم Elimi|علیمی، بدون محدودیت به تمام دوره‌ها، پروژه‌ها و مسیرهای یادگیری دسترسی پیدا کنید.