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

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

هنگام ایجاد یک وب سایت، لزوماً نیازی به سبک دادن به متن خود ندارید. 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

قالب	نوع MIME
TrueType	`font/ttf`
OpenType	`font/otf`
قالب فونت باز وب	`font/woff`
قالب فونت باز وب 2	`font/woff2`

تفاوت بین @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 به‌عنوان بازگشتی به‌کار می‌رود.

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

Browser Support

متن و تایپوگرافی با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

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