متن و تایپوگرافی

پادکست CSS - 036: متن و تایپوگرافی

متن یکی از اجزای اصلی وب است.

هنگام ایجاد یک وب سایت، لزوماً نیازی به سبک دادن به متن خود ندارید. HTML در واقع دارای یک سبک پیش فرض بسیار معقول است.

با این حال، متن به احتمال زیاد اکثریت وب سایت شما را تشکیل می دهد، بنابراین ارزش آن را دارد که برای زیباتر کردن آن، سبکی اضافه کنید. با تغییر چند ویژگی اساسی، می توانید تجربه خواندن را برای کاربران خود به میزان قابل توجهی بهبود بخشید!

در این ماژول، ابتدا به برخی از ویژگی های اساسی فونت CSS مانند font-family ، font-style ، font-weight و font-size نگاه می کنیم. سپس، به ویژگی‌هایی می‌پردازیم که بر پاراگراف‌های متن تأثیر می‌گذارند، مانند text-indent و word-spacing . ماژول با برخی موضوعات پیشرفته تر مانند فونت های متغیر و شبه عناصر به پایان می رسد.

تایپ را تغییر دهید

پشتیبانی مرورگر

  • 1
  • 12
  • 1
  • 1

منبع

از font-family برای تغییر تایپ متن خود استفاده کنید.

ویژگی font-family فهرستی از رشته‌ها را می‌پذیرد که با کاما از هم جدا شده‌اند، که به خانواده‌های فونت خاص یا عمومی اشاره دارد. خانواده فونت های خاص رشته های نقل قول هستند، مانند "Helvetica"، "EB Garamond"، یا "Times New Roman". خانواده فونت های عمومی کلمات کلیدی مانند serif ، sans-serif ، و monospace هستند ( لیست کامل گزینه ها را در MDN بیابید). مرورگر اولین فونت موجود را از لیست ارائه شده نمایش می دهد.

هنگام استفاده از font-family ، در صورتی که مرورگر کاربر فونت های دلخواه شما را نداشته باشد، باید حداقل یک خانواده فونت عمومی را مشخص کنید. به طور کلی، خانواده فونت‌های عمومی باید مشابه فونت‌های ترجیحی شما باشد: در صورت استفاده از font-family: "Helvetica" (یک خانواده فونت sans-serif)، بازگشت شما باید sans-serif باشد تا مطابقت داشته باشد.

از فونت های مورب و مورب استفاده کنید

پشتیبانی مرورگر

  • 1
  • 12
  • 1
  • 1

منبع

برای تعیین اینکه آیا متن باید مورب باشد یا نه، از font-style استفاده کنید. font-style یکی از کلیدواژه‌های زیر را می‌پذیرد: normal ، italic و oblique .

متن را پررنگ کنید

پشتیبانی مرورگر

  • 2
  • 12
  • 1
  • 1

منبع

از font-weight برای تنظیم «ضخامت» متن استفاده کنید. این ویژگی مقادیر کلیدواژه ( normal ، bold )، مقادیر نسبی کلمه کلیدی ( lighter ، bolder ) و مقادیر عددی ( 100 تا 900 ) را می‌پذیرد.

کلمات کلیدی normal و bold به ترتیب معادل مقادیر عددی 400 و 700 هستند.

کلمات کلیدی lighter و bolder نسبت به عنصر والد محاسبه می شوند. برای نمودار مفیدی که نحوه تعیین این مقدار را نشان می دهد ، به معنی وزن های نسبی MDN مراجعه کنید.

اندازه متن را تغییر دهید

پشتیبانی مرورگر

  • 1
  • 12
  • 1
  • 1

منبع

font-size برای کنترل اندازه عناصر متن خود استفاده کنید. این ویژگی مقادیر طول، درصد و تعداد انگشت شماری از مقادیر کلیدواژه را می پذیرد.

علاوه بر مقادیر طول و درصد، font-size قلم برخی از مقادیر مطلق کلمه کلیدی ( xx-small ، x-small ، small ، medium ، large ، x-large ، xx-large ) و چند مقدار نسبی کلمه کلیدی ( smaller ، larger را می پذیرد. ). مقادیر نسبی نسبت به font-size عنصر والد است.

فاصله بین خطوط را تغییر دهید

پشتیبانی مرورگر

  • 1
  • 12
  • 1
  • 1

منبع

از line-height برای تعیین ارتفاع هر خط در یک عنصر استفاده کنید. این ویژگی یک عدد، طول، درصد یا کلمه کلیدی normal را می پذیرد. به طور کلی، برای جلوگیری از مشکلات ارثی، توصیه می شود به جای طول یا درصد از عدد استفاده کنید.

فاصله بین کاراکترها را تغییر دهید

پشتیبانی مرورگر

  • 1
  • 12
  • 1
  • 1

منبع

برای کنترل مقدار فاصله افقی بین کاراکترها در متن خود letter-spacing استفاده کنید. این ویژگی مقادیر طولی مانند em , px , و rem را می پذیرد.

توجه داشته باشید که مقدار مشخص شده مقدار فضای طبیعی بین کاراکترها را افزایش می دهد . در نسخه ی نمایشی زیر، یک حرف جداگانه را انتخاب کنید تا اندازه صندوق نامه و نحوه تغییر آن با letter-spacing را ببینید.

فاصله بین کلمات را تغییر دهید

پشتیبانی مرورگر

  • 1
  • 12
  • 1
  • 1

منبع

word-spacing برای افزایش یا کاهش طول فاصله بین هر کلمه در متن خود استفاده کنید. این ویژگی مقادیر طولی مانند em , px , و rem را می پذیرد. توجه داشته باشید که طولی که مشخص می کنید برای فضای اضافی علاوه بر فاصله معمولی است. این بدان معنی است که word-spacing: 0 معادل word-spacing: normal است.

کوتاه نویسی font

می توانید از ویژگی font کوتاه برای تنظیم بسیاری از ویژگی های مرتبط با فونت به طور همزمان استفاده کنید. لیست ویژگی های ممکن عبارتند از font-family ، font-size ، font-stretch ، font-style ، font-variant ، font-weight و line-height .

برای جزئیات نحوه سفارش این املاک ، مقاله font MDN را بررسی کنید.

حروف متن را تغییر دهید

پشتیبانی مرورگر

  • 1
  • 12
  • 1
  • 1

منبع

از text-transform برای تغییر حروف بزرگ متن خود بدون نیاز به تغییر HTML زیرین استفاده کنید. این ویژگی مقادیر کلیدواژه زیر را می پذیرد: uppercase ، lowercase و capitalize .

خط‌های زیر، خطوط و خطوط میانی را به متن اضافه کنید

پشتیبانی مرورگر

  • 1
  • 12
  • 1
  • 1

منبع

از text-decoration برای افزودن خطوط به متن خود استفاده کنید. خطوط زیر بیشتر مورد استفاده قرار می گیرند، اما این امکان وجود دارد که خطوطی را بالای متن خود یا مستقیماً از طریق آن اضافه کنید!

ویژگی text-decoration مختصری برای ویژگی های خاص تر است که در زیر توضیح داده شده است.

ویژگی text-decoration-line کلمات کلیدی underline ، overline و line-through را می پذیرد. همچنین می توانید چندین کلمه کلیدی را برای چندین خط مشخص کنید.

ویژگی text-decoration-color رنگ تمام دکوراسیون ها را از text-decoration-line تنظیم می کند.

ویژگی text-decoration-style کلیدواژه های solid ، double ، نقطه dotted ، dashed و wavy را می پذیرد.

ویژگی text-decoration-thickness هر مقدار طول را می‌پذیرد و عرض خط تمام تزئینات را از text-decoration-line تنظیم می‌کند.

ویژگی text-decoration مخفف تمامی خواص فوق است.

یک تورفتگی به متن خود اضافه کنید

پشتیبانی مرورگر

  • 1
  • 12
  • 1
  • 1

منبع

از text-indent برای افزودن تورفتگی به بلوک های متن خود استفاده کنید. این ویژگی یا یک طول (مثلاً 10px ، 2em ) یا درصدی از عرض بلوک حاوی را می گیرد.

با محتوای مملو یا پنهان مقابله کنید

پشتیبانی مرورگر

  • 1
  • 12
  • 7
  • 1.3

منبع

از text-overflow برای تعیین نحوه نمایش محتوای پنهان استفاده کنید. دو گزینه وجود دارد: clip (پیش‌فرض)، که متن را در نقطه سرریز کوتاه می‌کند. و ellipsis ، که یک بیضی (…) را در نقطه سرریز نشان می دهد.

فضای سفید را کنترل کنید

پشتیبانی مرورگر

  • 1
  • 12
  • 1
  • 1

منبع

از ویژگی white-space برای تعیین نحوه استفاده از فضای سفید در یک عنصر استفاده می شود. برای جزئیات بیشتر، مقاله white-space در MDN را بررسی کنید.

white-space: pre می تواند برای رندر هنر ASCII یا بلوک های کد با دقت تورفتگی مفید باشد.

نحوه شکستن کلمات را کنترل کنید

پشتیبانی مرورگر

  • 1
  • 12
  • 15
  • 3

منبع

word-break برای تغییر نحوه "شکستن" کلمات در زمانی که آنها از خط سرریز می شوند استفاده کنید. به طور پیش فرض، مرورگر کلمات را تقسیم نمی کند. استفاده از کلمه کلیدی مقدار break-all برای word-break به مرورگر دستور می‌دهد تا در صورت لزوم کلمات را با نویسه‌های جداگانه بشکند.

تغییر چینش متن

پشتیبانی مرورگر

  • 1
  • 12
  • 1
  • 1

منبع

از text-align برای تعیین تراز افقی متن در یک بلوک یا عنصر سلول جدول استفاده کنید. این ویژگی مقادیر کلیدواژه left ، right ، start ، end ، center ، justify و match-parent را می‌پذیرد.

مقادیر left و right متن را به ترتیب در سمت چپ و راست بلوک تراز می کنند.

از start و end برای نشان دادن محل شروع و پایان یک خط متن در حالت نوشتن فعلی استفاده کنید. بنابراین، نقشه ها را به زبان انگلیسی به left right با خط عربی که از راست به چپ (RTL) نوشته می شود به سمت راست start . آنها ترازهای منطقی هستند، در ماژول ویژگی های منطقی ما بیشتر بیاموزید.

از center برای تراز کردن متن با مرکز بلوک استفاده کنید.

مقدار justify متن را سازماندهی می‌کند و فواصل کلمات را به‌طور خودکار تغییر می‌دهد تا متن با لبه‌های چپ و راست بلوک ردیف شود.

جهت متن را تغییر دهید

پشتیبانی مرورگر

  • 2
  • 12
  • 1
  • 1

منبع

direction برای تنظیم جهت متن خود استفاده کنید، ltr (از چپ به راست، پیش فرض) یا rtl (راست به چپ). برخی از زبان ها مانند عربی، عبری یا فارسی از راست به چپ نوشته می شوند، بنابراین direction: rtl باید استفاده شود. برای انگلیسی و سایر زبان‌های چپ به راست، از direction: ltr استفاده کنید.

جریان متن را تغییر دهید

پشتیبانی مرورگر

  • 48
  • 12
  • 41
  • 10.1

منبع

writing-mode برای تغییر نحوه جریان و چیدمان متن استفاده کنید. حالت پیش‌فرض horizontal-tb است، اما می‌توانید برای متنی که می‌خواهید به صورت افقی جریان یابد writing-mode روی vertical-lr یا vertical-rl تنظیم کنید.

جهت متن را تغییر دهید

پشتیبانی مرورگر

  • 48
  • 79
  • 41
  • 14

منبع

برای تعیین جهت کاراکترهای متن خود از جهت text-orientation استفاده کنید. مقادیر معتبر برای این ویژگی mixed و upright است. این ویژگی تنها زمانی مرتبط است که writing-mode روی چیزی غیر از horizontal-tb تنظیم شده باشد.

یک سایه به متن اضافه کنید

پشتیبانی مرورگر

  • 2
  • 12
  • 3.5
  • 1.1

منبع

از text-shadow برای افزودن سایه به متن خود استفاده کنید. این ویژگی دارای سه طول ( x-offset ، y-offset و blur-radius ) و یک رنگ است.

برای کسب اطلاعات بیشتر ، بخش text-shadow ماژول ما در Shadows را بررسی کنید.

فونت های متغیر

به طور معمول، فونت‌های «عادی» نیاز به وارد کردن فایل‌های مختلف برای نسخه‌های مختلف تایپ‌فیس دارند، به‌عنوان مثال پررنگ، ایتالیک یا فشرده. فونت های متغیر فونت هایی هستند که می توانند انواع مختلفی از یک تایپ فیس را در یک فایل داشته باشند.

Roboto Flex در ترکیبات تصادفی عرض و وزن

برای جزئیات بیشتر، مقاله ما در مورد فونت های متغیر را بررسی کنید.

شبه عناصر

::first-letter و ::first-line

پشتیبانی مرورگر

  • 1
  • 12
  • 1
  • 1

منبع

شبه عناصر ::first-letter و ::first-line به ترتیب حرف اول و خط اول یک عنصر متنی را هدف قرار می دهند.

::selection شبه عنصر

پشتیبانی مرورگر

  • 1
  • 12
  • 62
  • 1.1

منبع

از شبه عنصر ::selection برای تغییر ظاهر متن انتخاب شده توسط کاربر استفاده کنید.

هنگام استفاده از این شبه عنصر، فقط می‌توان از ویژگی‌های خاص CSS استفاده کرد: color ، background-color ، text-decoration text-shadow ، stroke-color ، fill-color ، stroke-width .

نوع فونت

پشتیبانی مرورگر

  • 1
  • 12
  • 1
  • 1

منبع

ویژگی font-variant مخفف تعدادی از ویژگی های CSS است که به شما امکان می دهد انواع فونت مانند small-caps و slashed-zero را انتخاب کنید. ویژگی های CSS که این مختصر شامل می شود عبارتند از font-variant-alternates ، font-variant-caps ، font-variant-east-asian ، font-variant-ligatures و font-variant-numeric . برای جزئیات بیشتر در مورد استفاده از آن، پیوندهای موجود در هر ملک را بررسی کنید.

درک خود را بررسی کنید

دانش خود را از تایپوگرافی در وب آزمایش کنید

کدام یک از کلیدواژه‌های زیر را می‌توان به‌عنوان یک بک آپ کلی font-family استفاده کرد؟

serif
درست!
monospace
درست!
italic
دوباره امتحان کنید. italic یک کلمه کلیدی معتبر برای font-style است، نه font-family .
sci-fi
دوباره امتحان کنید. با این حال fantasy یک بازگشت عمومی معتبر برای font-family است.
sans-serif
درست!
helvetica
دوباره امتحان کنید. "Helvetica" یک کلمه کلیدی عمومی نیست، بلکه به یک خانواده فونت خاص اشاره دارد.

کدام عبارت برای تبدیل حرف اول هر کلمه به بزرگ استفاده می شود؟ به عنوان مثال This is a sentence. ➡ This Is A Sentence.

text-capitalize: true;
دوباره امتحان کنید.
text-case: capitalize;
دوباره امتحان کنید.
text-transform: capitalize;
درست!
font-style: capitals;
دوباره امتحان کنید.
font-variant: capitalize;
دوباره امتحان کنید.

درست یا نادرست: text-orientation برای تراز کردن متن در سمت چپ، راست یا مرکز استفاده کنید.

درست است، واقعی
دوباره امتحان کنید. text-orientation چرخش حروف را در یک خط تغییر می دهد.
نادرست
درست! text-orientation چرخش حروف را در یک خط تغییر می دهد. از text-align برای تراز کردن متن در سمت چپ، راست یا مرکز (و بیشتر! ) استفاده کنید.

از کدام ویژگی CSS می توان برای تغییر فضای بین خطوط متن استفاده کرد؟

line-spacing
دوباره امتحان کنید.
leading
دوباره امتحان کنید. Leading عبارت صحیحی برای فاصله بین خطوط در تایپوگرافی است، اما یک ویژگی CSS معتبر نیست.
baseline-distance
دوباره امتحان کنید.
line-height
درست!

منابع