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

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

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

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

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

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

پس از آن، ویژگی‌های ضروری فونت CSS از جمله font-family ، font-style ، font-weight و font-size را پوشش خواهیم داد. این اصول مقدماتی را برای دستکاری متن برای سبک و خوانایی آماده می کند.

قبل از پایان دادن به موضوعات پیشرفته مانند فونت های متغیر و شبه عناصر، که کنترل تایپوگرافی شما را بیشتر بهبود می بخشد، ویژگی های خاص پاراگراف مانند text-indent و word-spacing را نیز لمس خواهیم کرد.

مثال‌ها و نکات عملی برای تقویت درک و کاربرد شما از این تکنیک‌های CSS ارائه می‌شود.

قانون @font-face

@font-face CSS at-rule در طراحی وب بسیار مفید است و به شما امکان می دهد فونت های سفارشی را برای نمایش متن مشخص کنید و از آنها استفاده کنید. زیبایی @font-face در تطبیق پذیری آن است: به شما امکان می دهد فونت ها را از یک سرور راه دور یا از فونت نصب شده روی دستگاه کاربر تهیه کنید.

نحو

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

توصیف کننده ها

ascent-override

متریک صعود را سفارشی می کند و بر فضای بالای خط مبنا تأثیر می گذارد.

descent-override

متریک نزول را تنظیم می کند و بر فضای زیر خط مبنا تأثیر می گذارد.

font-display

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

font-family

فونت را برای استفاده در ویژگی های مرتبط با فونت نامگذاری می کند.

font-stretch

مقیاس بندی افقی قابل قبول را تنظیم می کند که به عنوان یک مقدار یا محدوده مشخص شده است.

font-style

سبک فونت را تعریف می کند و از محدوده زاویه برای سبک های مورب پشتیبانی می کند.

font-weight

وزن قلم یا محدوده وزن های موجود را تعیین می کند.

font-feature-settings

دسترسی به ویژگی های فونت OpenType را فعال می کند.

font-variation-settings

کنترل دقیقی را بر روی تنظیمات فونت متغیر فراهم می کند.

line-gap-override

شکاف خط پیش‌فرض فونت را لغو می‌کند.

size-adjust

یک فاکتور مقیاس‌بندی را در طرح کلی و معیارهای فونت اعمال می‌کند.

src

منبع فونت را مشخص می کند، چه محلی و چه از راه دور. این برای قانون @font-face لازم است. ترکیب url() و local() در src یک استراتژی رایج است که در صورت موجود بودن از فونت محلی استفاده می کند و به عنوان یک فایل بک به یک فایل فونت راه دور برمی گردد. مرورگرها منابع را بر اساس ترتیب اعلان اولویت بندی می کنند، بنابراین local() معمولا باید قبل از url() باشد.

unicode-range

کاراکترهایی که این فونت باید برای آنها استفاده شود را محدود می کند.

توضیحات

@font-face طراحان را با استفاده از تایپوگرافی سفارشی از محدودیت‌های فونت‌های "ایمن برای وب" رها می‌کند. توانایی تابع local() برای جستجوی فونت در دستگاه کاربر یک تجربه یکپارچه را ارائه می دهد که لزوماً به اتصال اینترنت بستگی ندارد.

انواع فونت MIME

تفاوت بین @font-face و font-family

در CSS، @font-face و font-family اغلب با هم اشتباه گرفته می‌شوند، اما اهداف متفاوتی را دنبال می‌کنند.

همانطور که بحث کردیم، @font-face قانونی است که برای تعریف فونت های سفارشی که می خواهید در برنامه وب خود استفاده کنید، استفاده می شود. به مرورگر می‌گوید که فونت را از کجا دانلود کند، چگونه آن را در حین بارگیری نمایش دهد (با ویژگی font-display )، و مشخص می‌کند کدام زیر مجموعه از کاراکترها را دانلود کند (با unicode-range ).

در مقابل، font-family یک ویژگی CSS است که در یک قانون CSS برای اختصاص یک فونت خاص یا لیستی از فونت ها به یک عنصر استفاده می شود. فونت های فهرست شده در زیر font-family می توانند فونت های ایمن وب، فونت های سیستمی یا فونت های سفارشی تعریف شده با @font-face باشند.

به طور خلاصه، @font-face یک فونت را اعلام می کند و به آن نام می دهد، و font-family این فونت اعلام شده را روی عناصر HTML اعمال می کند.

در اینجا مثالی از استفاده از هر دو آورده شده است:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

در این مثال، @font-face «CustomFont» را تعریف می‌کند و به مرورگر می‌گوید کجا آن را پیدا کند. سپس ویژگی font-family آن را روی عنصر بدنه اعمال می‌کند و اگر «CustomFont» در دسترس نباشد، Arial به‌عنوان بازگشتی به‌کار می‌رود.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 را بررسی کنید.

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

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

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

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 مخفف تمامی خواص فوق است.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

شبه عناصر

::first-letter و ::first-line

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

::selection شبه عنصر

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

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

نوع فونت

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

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

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

منابع

• بهترین شیوه های فونت در مورد وارد کردن فونت ها، رندر کردن فونت ها و سایر بهترین روش ها برای استفاده از فونت ها در وب بحث می کند.
• MDN سبک متن و فونت اساسی .