فونت‌ها مجموعه‌ای از نویسه‌های متن با طراحی و استایل یکسان هستند که شامل شکل، اندازه، وزن و سایر ویژگی‌های نویسه‌ها در یک فونت مشخص می‌شوند.
- این نوع طراحی‌ها برای نمایش و نمایان‌دادن متن در رسانه‌های مختلفی مانند چاپ، صفحات وب و طراحی‌های گرافیکی استفاده می‌شود.
- انتخاب فونت‌ها می‌تواند برای انتقال یک مزاج یا زیبایی خاص، افزایش قابلیت خواندن یا هم‌استیل بودن با هویت یک برند مورد استفاده قرار بگیرد.
- فونت‌ها نقش مهمی در ارتباطات و طراحی دارند و می‌توانند احساسات مختلفی را به مخاطب منتقل کنند و پیام‌های خاصی را به مخاطبان انتقال دهند.
این بخش توضیح می‌دهد که چگونه می‌توان فونت متن موجود در یک عنصر HTML را تنظیم کرد. می‌توانید ویژگی‌های فونت زیر را برای یک عنصر مشخص کنید:
-
font: این یک اختصار برای همه ویژگی‌های دیگر مربوط به فونت است که می‌توان آنها را در یک اعلامیه تنها ارسال کرد. -
font-family: نوع فونت یا لیستی از نوع‌های فونت برای استفاده در متن را مشخص می‌کند. -
font-feature-settings: ویژگی‌های تایپوگرافی پیشرفته در فونت‌های OpenType را کنترل می‌کند، مانند swashes، small caps و ligatures. -
font-kerning: تعیین می‌کند که چگونه جفت‌های خاصی از حروف فاصله‌بندی می‌شوند. -
font-language-override: رفتار نوع نوشتاری را برای یک زبان خاص بازنویسی می‌کند. -
font-optical-sizing: تنظیم می‌کند که آیا رندرینگ متن باید برای مشاهده در اندازه‌های مختلف بهینه‌سازی شود یا خیر. -
font-palette: به شما امکان می‌دهد یکی از طیف‌های مختلفی را که در یک فونت وجود دارد مشخص کنید. -
font-size: اندازه متن را تنظیم می‌کند. می‌تواند به پیکسل (px)، نقطه (pt)، درصد (%)، ems (em) یا واحدهای دیگر مشخص شود. -
font-size-adjust: اندازه حروف کوچک را با توجه به اندازه فونت فعلی تنظیم می‌کند. -
font-stretch: یک چهره فونت گسترده، تنگ‌شده یا معمولی را تنظیم می‌کند. -
font-style: سبک متن را مشخص می‌کند، مانند “italic”، “oblique” یا “normal”. -
font-weight: ضخامت یا ضخامت متن را تعیین می‌کند. مقادیر رایج “normal” و “bold” هستند، اما مقادیر عددی (به عنوان مثال، 100، 200، 300) و کلمات کلیدی (به عنوان مثال، “lighter”، “bolder”) هم می‌تواند استفاده شود. -
font-synthesis: تعیین می‌کند که آیا مرورگر باید چهره‌های bold، italic و/یا small-caps که در یک خانواده فونت از دست رفته‌اند، را سنتز کند یا خیر. -
font-synthesis-small-caps: تعیین می‌کند که آیا مرورگر باید چهره‌های small-caps که در یک خانواده فونت از دست رفته‌اند را سنتز کند یا خیر. -
font-synthesis-style: تعیین می‌کند که آیا مرورگر باید چهره‌های oblique که در یک خانواده فونت از دست رفته‌اند را سنتز کند یا خیر. -
font-synthesis-weight: تعیین می‌کند که آیا مرورگر باید چهره‌های bold که در یک خانواده فونت از دست رفته‌اند را سنتز کند یا خیر. -
font-variant: کنترل استفاده از small caps برای حروف کوچک در متن. مقادیر می‌توانند “normal” یا “small-caps” باشند. -
font-variant-alternates: کنترل استفاده از حروف تایپوگرافی جایگزین. -
font-variant-caps: کنترل استفاده از حروف جایگزین برای حروف بزرگ. -
font-variant-east-asian: کنترل استفاده از حروف جایگزین برای اسکریپت‌های شرقی مانند چینی و ژاپنی. -
font-variant-ligatures: کنترل متنی را در مورد این که کدام لیگچر یا فرم متناظر باید استفاده شود. -
font-variant-numeric: کنترل استفاده از حروف جایگزین برای اعداد، کسرها و نشانگرهای ترتیبی. -
font-variant-position: کنترل استفاده از حروف جایگزین کوچکتر، قرار گرفته به عنوان نیم‌نویس یا زیرنویس. -
font-variation-settings: مشخص می‌کند چهار حرف ایکسیس نام مشخصات فونت متغیر را. -
line-height: ارتفاع جعبه خط را تنظیم می‌کند. همچنین فاصله بین خطوط متن را تنظیم می‌کند.
کوتاه‌نویسی فونت (CSS Font Shorthand)
فهم کوتاه شده CSS یک ویژگی مختصر برای فونت را که همه ویژگی‌های زیر را می‌توان در یک اعلامیه تنها مشخص کرد، اجازه می‌دهد:
ویژگی font یک کوتاه‌نویسی برای موارد زیر است:
– font-style
– font-variant
– font-weight
– font-stretch
– font-size
– line-height
– font-family
نکاتی که به یاد داشته باشید:
1. ویژگی‌های font-style، font-variant و font-weight باید همیشه قبل از font-size آمده باشند.
2. مقادیر normal و small-caps تنها می‌توانند با ویژگی font-variant مشخص شوند.
3. ویژگی font-stretch تنها می‌تواند یک مقدار کلیدی تکی باشد.
4. ویژگی line-height باید پس از font-size قرار گیرد و با “/” قبل از آن آمده باشد. به عنوان مثال: “20px/3”.
5. ویژگی font-family باید آخرین مقدار مشخص شده باشد.
6. مقادیر برای font-family و font-size الزامی هستند، و در صورت عدم حضور هر یک از مقادیر، مقادیر پیش‌فرض استفاده می‌شوند.
فونت سیستم
یک لیست از مقادیر فونت سیستم وجود دارد که عبارتند از:
- caption: برای کنترل‌های عنوان‌دار مانند دکمه‌ها، فهرست‌های کشویی و غیره استفاده می‌شود.
- icon: برای آیکون‌های برچسب استفاده می‌شود.
- menu: در منوها مانند منوهای کشویی یا منوهای لیستی استفاده می‌شود.
- message-box: در جعبه‌های دیالوگ استفاده می‌شود.
- small-caption: برای برچسب‌گذاری کنترل‌های کوچک استفاده می‌شود.
- status-bar: در نوار وضعیت پنجره استفاده می‌شود.
- مقادیر فونت سیستم پیش‌پیچیده: مقادیری که توسط مرورگرها پیاده‌سازی شده‌اند مانند -moz-window، -moz-document، -moz-desktop، -moz-info، -moz-dialog، -moz-button، -moz-pull-down-menu، -moz-list، و -moz-field.
CSS Fonts - استفاده از چند مقدار
این کد HTML یک نمونه از استفاده از ویژگی مختصر فونت در CSS را نشان می‌دهد. این ویژگی به شما اجازه می‌دهد تا تمام مشخصات فونت را در یک دستور تعریف کنید.
<html>
<head>
<style>
p {
border: 2px solid blue;
}
</style>
</head>
<body>
<h2>Font Shorthand Property</h2>
<p style = "font: oblique normal bold 20px Arial, sans-serif;">
Shorthand Property Font
</p>
</body>
</html>در این مثال، یک پاراگراف با یک حاشیه آبی داریم که متن آن با استفاده از ویژگی مختصر فونت تنظیم شده است. مشخصات فونت به ترتیب شامل نوع فونت (oblique)، وزن فونت (bold)، اندازه فونت (20px) و نوع فونت (Arial، sans-serif) استفاده شده است.
CSS Fonts - ویژگی FontFamily
ویژگی font-family یکی از مهمترین ویژگی‌ها در CSS است که از آن برای تعیین نوع فونت یا خانواده فونتی برای متن استفاده می‌شود. انتخاب درستی از font-family بسیار مهم است زیرا بر تمامی ابعاد ویژگی‌های گرافیکی متن تأثیر می‌گذارد و احساسات مختلفی را انتقال می‌دهد. هر خانواده فونت خود دارای ارتباطات و کاربردهای خاص خود است.
به عنوان مثال، در حالی که فونت‌های serif دارای تزئینات یا ضربه‌های کوچک در انتهای حروف هستند، فونت‌های sans-serif ظاهری پاک و مدرن‌تر دارند.
انتخاب فونت مناسب یک جنبه مهم از طراحی گرافیکی و برندینگ است. این می‌تواند به ایجاد یک هویت بصری کمک کند و پیامی که منتقل می‌شود را تقویت کند.
مقادیر ممکن برای این ویژگی عبارتند از:
-
<family-name>: نام خانواده فونت. نام‌های دارای فاصله باید در دو نقل قول قرار گیرند.
-
<generic-name>: این مکانیزم پشتیبان است. باید آخرین مقدار در لیست نام‌های font-family باشد.
-
serif: حروف با ضربه‌های پایانی، گردایی یا تیز. مثال: Lucida Bright، Palatino، و غیره.
-
sans-serif: حروف با پایان‌های خط ساده. مثال: Open Sans، Lucida Sans، و غیره.
-
monospace: حروف با عرض یکسان. مثال: Consolas، Monaco، monospace، و غیره.
-
cursive: حروف در فونت‌های کرسیو با قسمت‌هایی جزئی یا کاملاً پیوسته. مثال: Brush Script MT، Lucida Calligraphy، و غیره.
-
fantasy: فونت‌های تزیینی که نمایشی بازیگوش حروف را دارند. مثال: Curlz MT، fantasy، و غیره.
-
system-ui: حروف از فونت رابط کاربری پیش‌فرض در هر پلتفرمی.
-
ui-serif: فونت سریف رابط کاربری پیش‌فرض.
-
ui-sans-serif: فونت سان‌سریف رابط کاربری پیش‌فرض.
-
ui-monospace: فونت مونواسپیس رابط کاربری پیش‌فرض.
-
ui-rounded: فونت رابط کاربری پیش‌فرض با ویژگی‌های گرد.
-
math: فونتی که عملیات ریاضی مانند انحراف بالا، زیرنویس، پرانتزها، بیانیه‌های تو در تو و غیره را نشان می‌دهد.
-
emoji: فونت‌هایی که شامل نمایش Emoji هستند.
-
fangsong: سبک حروف چینی که بین سریف و کرسیو قرار دارد.
در اینجا یک مثال آورده شده است:
<html>
<head>
<style>
p {
padding: 5px;
border: 2px solid blue;
}
</style>
</head>
<body>
<h2>Font-family</h2>
<p style = "font-family: 'Times New Roman', Times, serif;">
متن ممکن است 'Times New Roman'، Times، یا serif باشد.
</p>
<p style = "font-family: Arial, Helvetica, sans-serif;">
متن ممکن است 'Arial'، Helvetica، یا sans-serif باشد.
</p>
</body>
</html>
تنظیمات ویژگی فونت (CSS Fonts - Font Feature Settings)
ویژگی font-feature-settings توسط CSS ارائه شده است تا ویژگی‌های تایپوگرافی پیشرفته را در فونت‌های OpenType کنترل کند، مانند swashes، کوچک‌نویس‌ها و لیگاتورها.
توجه: ویژگی font-feature-settings برای فعال‌سازی کوچک‌نویس‌ها باید استفاده نشود. فقط در موارد ویژه فونت‌های OpenType باید استفاده شود.
مقادیر ممکن برای این ویژگی عبارتند از:
-
normal: مقدار پیش‌فرض. تنظیمات پیش‌فرض فونت مشخص می‌شوند.
-
<feature-tag-value>: مشخص شده به عنوان یک تاپل، با فاصله از هم جدا شده، شامل یک نام تگ و یک مقدار اختیاری.
-
نام تگ همیشه یک <string> از چهار کاراکتر ASCII است، در غیر این صورت نامعتبر است.
-
مقدار اختیاری می‌تواند یک عدد صحیح یا کلمه‌کلیدی on(1) یا off(0) باشد. مقدار پیش‌فرض 0 است.
نمونه‌هایی از نحوه استفاده از این ویژگی:
/* استفاده از کوچک‌نویس */
font-feature-settings: "smcp" on;
/* تبدیل همه حروف بزرگ و کوچک به کوچک‌نویس */
font-feature-settings: "c2sc", "smcp";
/* استفاده از صفر با خط از بین برای تمایز از "O" */
font-feature-settings: "zero";
/* فعال کردن اشکال تاریخی */
font-feature-settings: "hist";
/* فعال کردن لیگاتورهای رایج */
font-feature-settings: "liga" 1;
/* فعال کردن اعداد تبدیلی (متقارن) */
font-feature-settings: "tnum";
/* فعال کردن کسرهای خودکار */
font-feature-settings: "frac", on;
/* استفاده از دومین کاراکتر swash موجود */
font-feature-settings: "swsh" 2;
ویژگی font-feature-settings
این مثال از ویژگی font-feature-settings در CSS استفاده می‌کند تا ویژگی‌های تایپوگرافی پیشرفته را در فونت‌ها کنترل کند. دو پاراگراف با کلاس‌های مختلف (allcaps و small-caps) ویژگی‌های مختلف را نشان می‌دهند.
<html>
<head>
<style>
div{
border: 1px solid red;
margin: 5px;
width: 300px;
}
p.allcaps{
padding: 8px; font-weight: bold; font-style: italic; font-feature-settings: 'c2sc', 'smcp';
}
p.small-caps{
padding: 8px; font-weight: bold; font-variant:small-caps; font-feature-settings: 'smcp', off;
}
</style>
</head>
<body>
<h2>Font feature settings</h2>
<div>
<p class="allcaps">
Font feature settings-all caps
</p>
<p class="small-caps">
Font feature settings-small caps
</p>
</div>
</body>
</html>-
در این مثال:
-
پاراگراف با کلاس allcaps از ویژگی‌های font-weight: bold، font-style: italic و font-feature-settings: ‘c2sc’, ‘smcp’ استفاده می‌کند. این ویژگی‌ها باعث می‌شوند که متن با حروف بزرگ و کوچک‌نویس نمایش داده شود.
-
پاراگراف با کلاس small-caps از ویژگی‌های font-weight: bold، font-variant: small-caps و font-feature-settings: ‘smcp’, off استفاده می‌کند. این ویژگی‌ها باعث می‌شوند که متن با حروف کوچک‌نویس و حالت کوچک‌نویس نمایش داده شود، اما از فعال‌سازی مجدد حالت کوچک‌نویس (که با استفاده از ‘smcp’) جلوگیری می‌کند.
این مثال نشان می‌دهد که چگونه با استفاده از ویژگی font-feature-settings، ویژگی‌های تایپوگرافی خاصی مانند حالت کوچک‌نویس یا حالت بزرگ‌نویس را می‌توان در فونت‌ها فعال یا غیرفعال کرد.
-
ویژگی font-kerning
ویژگی font-kerning در CSS برای تنظیم فاصله بین جفت‌های خاصی از حروف مفید است.
هر حرف یک فضای تنظیم شده در لبه‌های چپ و راست خود دارد و وقتی دو حرف کنار هم قرار می‌گیرند، فواصل لبه‌های کناری آنها از فضای واقعی آنها جمع می‌شوند.
برای تنظیم این فواصل لبه‌های کناری حروف، از ویژگی font-kerning استفاده می‌شود. شما می‌توانید این ویژگی را فعال یا غیرفعال کنید.
مقادیر ممکن برای این ویژگی عبارتند از:
-
auto: مرورگر تصمیم می‌گیرد که کرنینگ فونت باید اعمال شود یا خیر.
-
normal: اطلاعات کرنینگ فونت ذخیره شده در فونت باید استفاده شود.
-
none: اطلاعات کرنینگ فونت ذخیره شده در فونت غیرفعال می‌شود.
در مثال زیر، سه دیو با استفاده از ویژگی font-kerning به نمایش درآمده‌اند:
<html>
<head>
<style>
div {
font-size: 2rem;
font-family: serif;
}
#nokern {
font-kerning: none;
}
#kern {
font-kerning: normal;
}
#auto {
font-kerning: auto;
}
</style>
</head>
<body>
<h2>Font kerning</h2>
<div id="kern">AV</div>
<div id="nokern">AV</div>
<div id="auto">AV</div>
</body>
</html>
در این مثال، دو دیو با ویژگی font-kerning:normal و font-kerning:auto نمایش داده شده‌اند که تصاویر از کرنینگ فونت استفاده می‌کنند، و یک دیو با ویژگی font-kerning:none نمایش داده شده است که از کرنینگ فونت صرف‌نظر می‌کند.
ویژگی font-language-override
ویژگی font-language-override در CSS برای نادیده گرفتن رفتار یک نوع خاص فونت برای یک زبان خاص استفاده می‌شود.
مقادیر ممکن برای این ویژگی عبارتند از:
-
normal: مشخص می‌کند که مرورگر باید از نمادهای زبان مشخص شده توسط ویژگی lang استفاده کند. این مقدار پیش‌فرض است.
-
<string>: مشخص می‌کند که مرورگر باید از نمادهای زبان مشخص شده توسط <string> استفاده کند. به عنوان مثال: “KOR” برای کره‌ای، “ENG” برای انگلیسی، “DAN” برای دانمارکی و غیره.
در مثال زیر، از ویژگی font-language-override برای تعیین نوع فونت مربوط به زبان استفاده شده است:
<html>
<head>
<style>
.my-text {
font-family: Arial, sans-serif;
font-language-override: "TRK";
}
</style>
</head>
<body>
<p>This is some text with language-specific glyphs: ğüşöçİ</p>
<p class="my-text">This is some text with language-specific glyphs: ğüşöçİ</p>
</body>
</html>
در این مثال، دو پاراگراف وجود دارد. یکی از آنها متن را به طور معمول نمایش می‌دهد، در حالی که پاراگراف دیگر از ویژگی font-language-override با مقدار “TRK” برای اعمال نوع خاصی از فونت به متن با استفاده از نمادهای زبان ترکی استفاده می‌کند.
ویژگی font-optical-sizing
ویژگی font-optical-sizing در CSS برای تنظیم اینکه رندرینگ متن باید به منظور مشاهده بهتر در اندازه‌های مختلف بهینه‌سازی شود، استفاده می‌شود.
مقادیر ممکن برای این ویژگی عبارتند از:
-
none: شکل نمادها برای مشاهده بهینه توسط مرورگر تغییر داده نمی‌شود.
-
auto: شکل نمادها برای مشاهده بهینه توسط مرورگر تغییر می‌کند.
به طور پیش‌فرض، sizing بصری برای فونت‌ها فعال است. اگر از sizing بصری استفاده شود، اندازه‌های متن کوچک با فونت‌های ضخیم‌تر و بزرگتر نمایش داده می‌شوند، در حالی که متن‌های بزرگ به صورت ظریف‌تر نمایش داده می‌شوند.
در مثال زیر، از ویژگی font-optical-sizing برای تنظیم نوع رندرینگ متن استفاده شده است:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap">
<style>
p {
margin-bottom: 5px;
border: 2px solid red;
}
.eng {
font-family: "Montserrat", sans-serif;
}
.opt-no {
font-optical-sizing: none;
}
.opt-yes {
font-optical-sizing: auto;
}
</style>
</head>
<body>
<h3>Optical sizing -none</h3>
<p class="eng opt-no">Check the optical sizing</p>
<h3>Optical sizing -auto</h3>
<p class="eng opt-yes">Check the optical sizing</p>
</body>
</html>
در این مثال، دو پاراگراف وجود دارد. یکی از آنها با استفاده از ویژگی font-optical-sizing با مقدار “none” تنظیم شده است که نمادها برای مشاهده بهینه تغییری نمی‌کنند، در حالی که پاراگراف دیگر با مقدار “auto” تنظیم شده است که نمادها برای مشاهده بهینه تغییر می‌کنند.
ویژگی font-palette
ویژگی font-palette در CSS به شما امکان می‌دهد تا یکی از پالت های مختلفی را که در یک فونت وجود دارد، مشخص کنید.
مقادیر ممکن برای این ویژگی عبارتند از:
normal: تنظیمات پیش‌فرض رنگ یا رنگ‌بندی حروف. پالت در شاخه 0 نمایش داده می‌شود.light: اولین پالتی که با ‘light’ مطابقت دارد را تنظیم می‌کند. اگر هیچ مطابقتی یافت نشود، مانند حالت عادی عمل می‌کند.dark: اولین پالتی که با ‘dark’ مطابقت دارد را تنظیم می‌کند. اگر هیچ مطابقتی یافت نشود، مانند حالت عادی عمل می‌کند.<شناسه پالت>: این امکان را به شما می‌دهد تا پالت خود را با استفاده از قاعده @font-palette-values مشخص کنید.
در مثال زیر، ما از پالت --bungee-more-spicy استفاده می‌کنیم که با استفاده از قاعده @font-palette-values تعریف شده است. این پالت به ما اجازه می‌دهد تا رنگ‌های متفاوتی برای فونت “Bungee Spice” تعیین کنیم.
<html>
<head>
<style>
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --bungee-more-spicy {
font-family: "Bungee Spice";
override-colors:
0 Orange,
1 Yellow;
}
h2 {
font-family: "Bungee Spice";
}
h2.more-spicy {
font-palette: --bungee-more-spicy;
}
</style>
</head>
<body>
<h2>Font face</h2>
<h2 class="more-spicy">Hot & burning</h2>
</body>
</html>
در این مثال، ما از فونت “Bungee Spice” استفاده می‌کنیم و با استفاده از پالت --bungee-more-spicy رنگ‌های مختلفی مانند نارنجی و زرد را برای عناوین مشخص می‌کنیم.
ویژگی font-size
اندازه فونت به ارتفاع حروف نسبت به خط پایه متن اشاره دارد. فونت‌های بزرگ معمولاً برای عناوین یا عناوین استفاده می‌شوند تا توجه کاربر را جلب کنند، در حالی که فونت‌های کوچک مناسب برای متن اصلی یا عناوین کوچک هستند تا خوانایی را تضمین کنند.
مقادیر ممکن برای font-size در CSS عبارتند از:
-
واژگان اندازه مطلق: این مقادیر بر اساس اندازه پیش‌فرض فونت کاربر (متوسط) محاسبه می‌شوند. این شامل موارد زیر است:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- xxx-large
-
واژگان اندازه نسبی: این مقادیر نسبت به اندازه فونت عنصر والد بزرگتر یا کوچکتر هستند. این شامل موارد زیر است:
- larger
- smaller
-
<length>: این مقادیر شامل ارزش‌های مثبت معین‌شده از<length>می‌باشد. این شامل em، ex، rem، px، in و غیره است. -
<percentage>: مقدار مثبت<percentage>، نسبت به اندازه فونت عنصر والد است. -
math: مقدار محاسبه شده font-size برای عناصر ریاضی نسبت به اندازه فونت عنصر والد است.
با استفاده از این مقادیر، می‌توانید اندازه متن را برای هر عنصر در سند HTML تنظیم کنید. این امر به طور معمول با استفاده از ویژگی font-size در CSS انجام می‌شود.
<html>
<head>
<style>
p {
padding: 5px;
border: 2px solid blue;
}
</style>
</head>
<body>
<h2>Font-size</h2>
<p style = "font-size: large;">
The font-size is large.
</p>
<p style = "font-size: 15px">
The font-size is 15px.
</p>
<p style = "font-size: x-small;">
The font-size is x-small.
</p>
<p style = "font-size: 60%;">
The font-size is 60%.
</p>
<p style = "font-size: 2vw;">
The font-size 2vw (viewport width). Change the viewport size to see the effect.
</p>
</body>
</html>این نمونه نشان می‌دهد چگونه می‌توان با استفاده از ویژگی font-size در CSS اندازه متن را در اسناد HTML تعیین کرد. در این نمونه، چندین اندازه مختلف برای متن تعیین شده است:
-
large: این مقدار یکی از مقادیر مطلق اندازه فونت است که آن را به اندازه بزرگترین فونت‌های پیش‌فرض تنظیم می‌کند.
-
15px: این مقدار یک اندازه مطلق است که به طور مستقیم اندازه متن را به 15 پیکسل تنظیم می‌کند.
-
x-small: این مقدار یکی از مقادیر مطلق اندازه فونت است که آن را به اندازه کوچکترین فونت‌های پیش‌فرض تنظیم می‌کند.
-
60%: این مقدار یک مقدار نسبی است که اندازه متن را به 60 درصد از اندازه فونت عنصر والد تنظیم می‌کند.
-
2vw: این مقدار یک مقدار نسبی است که اندازه متن را به 2 درصد از عرض نمایشگر (viewport) تنظیم می‌کند. تغییر اندازه نمایشگر می‌تواند تأثیر آن را نشان دهد.
همانطور که در مثال داده شده دیده می‌شود، با استفاده از مقادیر مطلق و نسبی، می‌توانید اندازه متن را به صورت دقیق تر یا نسبی تر تعیین کنید، اما هر دو روش دارای کاربردهای خود در طراحی وب و محتوای مختلف هستند.
ویژگی font-size-adjust
ویژگی font-size-adjust به شما امکان می‌دهد تا مقدار جنبه‌ی (aspect value) فونت را مشخص کنید که کنترل x-height (ارتفاع حروف کوچک) فونت را انجام می‌دهد.
این ویژگی تضمین می‌کند که فونت پشتیبان (fallback font) ارتفاع معینی را نسبت به فونت مشخص شده حفظ کند.
ویژگی font-size-adjust می‌تواند یکی از مقادیر زیر را داشته باشد:
-
<number>: یک مقدار عددی که نسبت جنبه (aspect ratio) است، که نسبت ارتفاع x از فونت مشخص شده به ارتفاع x از فونت تعیین شده توسط font-family است.
-
none: مشخص می‌کند که هیچ تنظیم اندازه فونتی بر اساس ارتفاع x انجام نمی‌شود.
-
<keyword>: مشخص می‌کند که معیار فونتی که باید به آن نرمال شود:
-
ex-height: ارتفاع x به اندازه‌ی ارتفاع فونت تقسیم شده بر font-size.
-
cap-height: با استفاده از ارتفاع cap-height بر font-size.
-
ch-width: پهنای باریک افقی فونت‌ها نرمال شده است.
-
ic-width: پهنای وسیع افقی فونت‌ها نرمال شده است.
-
ic-height: پهنای وسیع عمودی فونت‌ها نرمال شده است.
-
پشتیبانی مرورگرها از ویژگی font-size-adjust ممکن است متفاوت باشد و این ویژگی در توسعه وب مدرن به طور گسترده مورد استفاده قرار نمی‌گیرد. مرورگرهای Firefox و Safari این ویژگی را پشتیبانی می‌کنند.
در مثال زیر، نتیجه را در مرورگرهای Firefox یا Safari بررسی کنید:
<html>
<head>
<style>
p {
padding: 5px;
border: 2px solid blue;
}
p.p1 {
font-family: 'Courier New', Courier, monospace;
font-size-adjust: none;
}
p.p2 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20pt;
font-size-adjust: 0.6;
}
p.p3 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20pt;
font-size-adjust: ex-height 0.6;
}
</style>
</head>
<body>
<h2>Font-size</h2>
<p class="p1">
The font-size-adjust is none.
</p>
<p class="p2">
The font-size-adjust is 0.6 on font-size 20pt.
</p>
<p class="p3">
The font-size-adjust is ex-height and 0.6 on font-size 20pt.
</p>
</body>
</html>
ویژگی font-stretch
ویژگی font-stretch به شما امکان می‌دهد که عرض متن را (فشرده یا گسترده) تنظیم کنید، در برخی از فونت‌ها انواع اضافی ارائه می‌دهند که حروف آنها می‌توانند مقیاس شده و به طور عمودی یا به عرض آنها تغییر یابند.
توجه: اگر فونتی که استفاده می‌کنید از فرمهای فشرده یا گسترده پشتیبانی نکند، ویژگی font-stretch تاثیری نخواهد داشت.
مقادیر ممکن برای این ویژگی عبارتند از:
- normal: یک چهره فونت عادی را مشخص می‌کند.
- semi-condensed، condensed، extra-condensed، ultra-condensed: یک چهره فونت فشرده تر از عادی را مشخص می‌کند.
- semi-expanded، expanded، extra-expanded، ultra-expanded: یک چهره فونت گسترده تر از عادی را مشخص می‌کند.
- <percentage>: یک مقدار درصدی، که می‌تواند از 50% تا 200% باشد.
- initial: مقدار را به مقدار اولیه تنظیم می‌کند.
- inherit: مقدار را از مقدار والدین به ارث می‌برد.
نگاهی به مطالعه زیر بیندازید:
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h2>Font-stretch</h2>
<p style = "font-stretch: normal;">
عادی
</p>
<p style = "font-stretch: condensed;">
فشرده
</p>
<p style = "font-stretch: expanded;">
گسترده
</p>
<p style = "font-stretch: 170%;">
با تنش 170%
</p>
</body>
</html>
ویژگی font-style
ویژگی font-style برای تعیین استایل فونت موردنظر استفاده می‌شود. این ویژگی به سه استایل اصلی فونت اجازه می‌دهد:
- normal: استایل پیش‌فرض فونت که متن به شکل عادی نمایش داده می‌شود، بدون هیچ انحراف یا شیبی.
- italic: متن به شکل کج می‌آید، با یک شیب کمی به سمت راست.
- oblique: متن مشابه با italic است اما با شیب یا زوایایی بیشتر.
همچنین می‌توانید استایل oblique با زاویه خاصی اعمال کنید، این زاویه مشخص می‌کند که متن به چه میزانی شیب دارد. اگر فونت oblique وجود نداشته باشد، مرورگر متن را با زاویه مشخص شده شیب می‌دهد.
مقادیر معتبر برای زاویه در بازه -90deg تا 90deg قرار دارند و اگر هیچ زاویه‌ای مشخص نشود، مقدار 14deg توسط مرورگر تنظیم می‌شود.
مقادیر مثبت زاویه متن را به سمت انتهای خط شیب می‌دهند و مقادیر منفی آن را به سمت ابتدای خط.
بزرگترین مقادیر زاویه ترجیح داده می‌شود.
این استایل‌های فونت را می‌توان با استفاده از انتخاب‌کننده‌های CSS برای هر المان HTML اعمال کرد و می‌تواند با ویژگی‌های دیگر فونت مانند font-family، font-size و غیره ترکیب شود تا استایل‌های متن موردنظر را ایجاد کنید.
توجه: مرورگرهای موزیلا فایرفاکس برای ویژگی font-style: oblique <angle> پشتیبانی می‌کنند.
در ادامه مثالی ارائه شده است:
<html>
<head>
<style>
p {
padding: 5px;
border: 2px solid blue;
}
</style>
</head>
<body>
<h2>Font-style</h2>
<p style = "font-style: normal;">
متن به شکل عادی نمایش داده می‌شود.
</p>
<p style = "font-style: italic;">
متن به شکل کج نمایش داده می‌شود.
</p>
<p style = "font-style: oblique;">
متن به شکل افقی کج نمایش داده می‌شود.
</p>
<p style = "font-style: oblique 45deg;">
متن به شکل افقی کج با زاویه 45 درجه نمایش داده می‌شود.
</p>
</body>
</html>
ویژگی font-weight
ویژگی font-weight به شما امکان می‌دهد که ضخامت یا ضخامت حروف را تعیین کنید. وزن‌های مختلف در یک خانواده فونت می‌توانند برای ایجاد سلسله مراتب بصری یا تأکید در متن استفاده شوند.
مقادیر ممکن برای font-weight به شرح زیر است:
- normal: وزن فونت نرمال. معادل با 400 است.
- bold: وزن فونت پر رنگ. معادل با 700 است.
- <number>: مقداری بین 1 و 1000 برای تعیین ضخامت فونت. اعداد بزرگتر نشان‌دهنده وزن‌های بیشتری هستند که با اعداد کمتر یا همانند آنها پر رنگ‌تر هستند.
- lighter: وزن فونت سبک‌تر نسبت به وزن فونت عنصر والد.
- bolder: وزن فونت سنگین‌تر نسبت به وزن فونت عنصر والد.
نگاهی به مثال زیر بیندازید:
<html>
<head>
<style>
p {
padding: 5px;
border: 2px solid blue;
}
</style>
</head>
<body>
<h2>Font-weight</h2>
<p style = "font-weight: normal;">
وزن فونت عادی است.
</p>
<p style = "font-weight: bold;">
وزن فونت پررنگ است.
</p>
<p style = "font-weight: 500;">
وزن فونت 500 است (متوسط).
</p>
</body>
</html>
ویژگی font-synthesis
ویژگی font-synthesis تعیین می‌کند که آیا مرورگر باید وزن‌های پررنگ، کج و یا کوچک‌نویس را که در یک خانواده فونت موجود نیستند، ترکیب کند یا نه.
این ویژگی یک مختصر است برای ویژگی‌های زیر:
- font-synthesis-weight
- font-synthesis-style
- font-synthesis-small-caps
مقادیر ممکن برای این ویژگی به شرح زیر است:
- none: نشان می‌دهد که هیچ وزن پررنگ، کج یا کوچک‌نویسی باید ترکیب نشود.
- weight: نشان می‌دهد که مرورگر ممکن است وزن پررنگ از دست برود.
- style: نشان می‌دهد که مرورگر ممکن است نوع کج از دست برود.
- small-caps: نشان می‌دهد که مرورگر ممکن است نوع کوچک‌نویس از دست برود.
برخی از فونت‌ها شامل نسخه‌های پررنگ و کج هستند، و تعداد کمی هم ممکن است نسخه کوچک‌نویس داشته باشند، اما فونت‌های استفاده شده برای زبان‌ها مانند چینی، کره‌ای، ژاپنی و غیره این نسخه‌ها را ندارند و از اینرو ترکیب آنها ممکن است باعث عدم خوانایی شود. بنابراین در این موارد منصوح است که ترکیب فونت مورد نظر غیرفعال شود.
مثال زیر را ببینید:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap">
<style>
p {
margin-bottom: 5px;
border: 2px solid red;
}
.eng {
font-family: "Montserrat", sans-serif;
}
.chi {
font-family: "Ma Shan Zheng";
}
.no-syn {
font-synthesis: none;
}
.syn {
font-synthesis: style weight;
}
</style>
</head>
<body>
<h3>DEFAULT</h3>
<p class="eng">
Supports <strong>bold</strong> and <em>italic</em>.
</p>
<p class="chi"><strong>加粗</strong>和<em>斜体</em> 支援的字體.</p>
<h3>DISABLED SYNTHESIS</h3>
<p class="eng no-syn">
Do not support <strong>bold</strong> and <em>italic.</em>
</p>
<h3>DISABLED SYNTHESIS</h3>
<p class="chi no-syn">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
<h3> SYNTHESIS IS ENABLED </h3>
<p class="eng syn">
Supports <strong>bold</strong> and <em>italic</em>.
</p>
<p class="chi syn"><strong>加粗</strong>和<em>斜体</em> 支援的字體.</p>
</body>
</html>
ویژگی font-variant
ویژگی font-variant در CSS یک خاصیت مختصر است و برای تعیین اینکه متن باید با حروف کوچک نمایش داده شود یا نه استفاده می‌شود. این ویژگی می‌تواند مقادیر زیر را داشته باشد:
font-variant یک مختصر است برای ویژگی‌های زیر:
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
مقادیر ممکن برای font-variant (طبق CSS Level 2.1) عبارتند از:
- normal: این مقدار پیش‌فرض است که مشخص می‌کند متن باید به طور عادی و بدون هیچ نوع تغییر خاصی نمایش داده شود.
- small-caps: این مقدار مشخص می‌کند که متن باید با حروف کوچک‌نویس نمایش داده شود. فونت استفاده شده باید دارای نسخه حروف کوچک‌نویس باشد، در غیر این صورت به نمایش عادی بر می‌گردد.
- none: مقدار فونت-تغییرات-قلم را به none تنظیم می‌کند.
در اینجا یک مثال است:
<html>
<head>
<style>
p {
padding: 5px;
border: 2px solid blue;
}
</style>
</head>
<body>
<h2>Font-variant</h2>
<p style = "font-variant: normal;">
متن به صورت عادی نمایش داده خواهد شد.
</p>
<p style = "font-variant: small-caps;">
متن با حروف کوچک‌نویس نمایش داده خواهد شد.
</p>
</body>
</html>
در این مثال، در عنوان h2 توضیحاتی داده شده و سپس با استفاده از تگ p دو متن نمونه با ویژگی font-variant متفاوت نمایش داده شده است.
ویژگی font-variation-settings
ویژگی font-variation-settings در CSS برای تعیین تنظیمات تغییر متغیر برای فونت‌های متغیر استفاده می‌شود. فونت‌های متغیر نوعی از فونت‌ها هستند که می‌توانند ویژگی‌های قابل تنظیمی مانند وزن، عرض و شیب را داشته باشند، که این امکان را برای کنترل دقیق‌تر ظاهر فونت فراهم می‌کند.
این ویژگی به شما اجازه می‌دهد تا مقادیر تغییرات فونت را با استفاده از برچسب‌های محور و ارقام تعیین کنید.
مقادیر ممکن برای این ویژگی عبارتند از:
- normal: متن بر اساس تنظیمات پیش‌فرض نمایش داده می‌شود.
- <string> <number>:
- <string>: به عنوان 4 کاراکتر ASCII نمایش داده می‌شود.
- در صورتی که مقدار <string> بیشتر یا کمتر از چهار کاراکتر باشد، مقدار نامعتبر می‌شود.
- <number>: مقدار محور برای تنظیم شدن.
- <number> می‌تواند منفی یا کسری باشد، بر اساس محدوده مقدار فونت انتخاب شده.
این ویژگی فقط باید زمانی استفاده شود که ویژگی‌های پایه font-weight و font-style استفاده نمی‌شوند. چرا که مقادیر با این ویژگی همیشه مقادیر ارسال شده با استفاده از ویژگی‌های پایه فونت، مانند font-weight و غیره را نادیده خواهد کرد.
محورهای فونت متغیر ابعاد یا ویژگی‌های قابل تنظیمی از یک فونت متغیر هستند. برخی از محورهای متداول شامل وزن، عرض و شیب هستند.
دو نوع محور متغیر فونت وجود دارد: سفارشی و ثبت‌شده.
شما معمولاً این اطلاعات را در مستندات یا مشخصات فونت‌های ایجاد کننده فونت پیدا می‌کنید. بعد از داشتن اطلاعات محور، می‌توانید با استفاده از ویژگی font-variation-settings تنظیمات متغیر فونت را تعریف و کنترل کنید.
توجه: سیستم‌عامل شما باید بروزرسانی شده باشد تا بتوانید از این فونت‌های متغیر در صفحات وب استفاده کنید.
در ادامه یک مثال آورده شده است:
<html>
<head>
<style>
.container1 * {
font-weight: 625;
}
.container2 * {
font-variation-settings: 'wght' 625;
}
.container3 * {
font-variation-settings: 'wght' 200;
}
</style>
</head>
<body>
<div class="container container1">
<p>Variation Setting - Weight</p>
</div>
<div class="container container2">
<p>Variation Setting - Weight</p>
</div>
<div class="container container3">
<p>Variation Setting - Weight</p>
</div>
</body>
</html>
خاصیت line-height
خاصیت line-height در CSS ارتفاع جعبه خط و فاصله بین خطوط متن را تنظیم می‌کند. این ویژگی ارتفاع حداقل جعبه خط را در یک عنصر مشخص می‌کند.
مقادیر ممکن برای این ویژگی به شرح زیر است:
- <number>: یک عدد بدون واحد، که در آن برای ضرب در اندازه فونت عنصر استفاده می‌شود. روش ترجیحی برای تنظیم line-height است.
- <length>: هر مقدار واحد طول، مانند px، pt و غیره. مقادیر داده شده به واحد em ممکن است نتایج غیر منتظره‌ای داشته باشند.
- <percentage>: نسبت به اندازه فونت عنصر. ممکن است نتایج غیر منتظره‌ای داشته باشد.
- normal: کلمه کلیدی ‘normal’ به عنوان مقدار. وابسته به font-family عنصر و تنظیمات مرورگر کاربر.
توصیه می‌شود که مقدار حداقلی 1.5 برای line-height یک پاراگراف استفاده شود، زیرا بزرگنمایی ممکن است مقدار line-height را نسبتاً افزایش دهد و قابل خواندن تر شود.
در ادامه، یک مثال آورده شده است:
<html>
<head>
<style>
div{
border: 1px solid red;
margin: 5px;
width: 300px;
}
</style>
</head>
<body>
<h2>Line Height of div</h2>
<div style="line-height: normal;">ارتفاع نرمال خط</div>
<div style="line-height: 50%;">ارتفاع خط درصدی</div>
<div style="line-height: 3em;">ارتفاع خط طولی</div>
<div style="line-height: 1.6;">ارتفاع خط عددی</div>
</body>
</html>
فونت‌های گوگل
فونت‌های گوگل یک منبع فوق‌العاده برای استفاده از فونت‌های زیبا و متنوع در وب‌سایت‌ها هستند. گوگل انواع زیادی از خانواده‌های فونت را به صورت رایگان و با مجوز منبع‌باز ارائه می‌دهد، که تعداد آنها بیش از ۱۰۰۰ فونت است.
برای استفاده از فونت‌های گوگل، شما باید پیوند فایل سبک را در بخش <head> اضافه کرده و سپس فونت‌های مورد نظر خود را در CSS استفاده کنید. قالب زیر نحوه استفاده از فونت‌ها را نشان می‌دهد:
<head>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans|Sofia">
<style>
body {
font-family: "Open Sans", sans-serif;
}
</style>
</head>
نکاتی که باید به آنها توجه داشته باشید:
-
همیشه حداقل یک فونت جایگزین را لیست کنید، در صورتی که فونت مشخص شده توسط مرورگر شما پشتیبانی نشود.
-
در صورتی که می‌خواهید از چندین فونت گوگل استفاده کنید، نام فونت‌ها را با نشانهٔ لوله (|) جدا کنید.
-
فونت‌های گوگل می‌توانند با استفاده از ویژگی‌های CSS مانند font-size و غیره، شخصی‌سازی شوند.
-
اثرات ویژه می‌توانند به فونت‌های گوگل اضافه شوند با استفاده از ویژگی font-effect-*، که * می‌تواند هر نام اثری مانند fire، neon، shadow و غیره باشد.
مثالی از اضافه کردن اثر به فونت گوگل:
<html>
<head>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans|Sofia&effect=fire|neon|shadow-multiple">
<style>
body {
font-family: "Open Sans", sans-serif;
font-size: 25px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Google Font</h1>
<h1 class="font-effect-fire">Google Font</h1>
<h1 class="font-effect-shadow-multiple">Google Font</h1>
</body>
</html>
فونت‌های پشتیبان
فونت‌های پشتیبان یا Fallback Fonts فونت‌های پشتیبانی هستند که در صورت عدم در دسترس بودن یا نمایش امکانپذیر بودن یک فونت خاص، استفاده می‌شوند.
این فونت‌های پشتیبان بر اساس شباهت طراحی یا استایل خود به فونت مورد نظر انتخاب می‌شوند، تا متن قابل خواندن باقی بماند و حداقل شباهتی با ظاهر مورد نظر حفظ شود.
برخی از مثال‌هایی از فونت‌های پشتیبان به شرح زیر است:
- Arial: فونت پشتیبان متداول که شباهت زیادی به Helvetica دارد.
- Times New Roman: برای خوانایی آسان طراحی شده است و به طور متداول در چاپ و رسانه‌های دیجیتال استفاده می‌شود.
- Verdana: Verdana یک فونت پشتیبان بدون سریف است که به طور خاص برای خوانایی در صفحات نمایشگر طراحی شده است.
- Georgia: این فونت پشتیبان با سریف به طور متداول برای متن بدنه در وب استفاده می‌شود.
- Courier New: اغلب برای متن‌های یکنواخت از Courier New به عنوان یک فونت پشتیبان استفاده می‌شود که به طور متداول در صورت نیاز به فونت با عرض ثابت انتخاب می‌شود.
CSS Fonts - خلاصه
در زیر لیستی از خصوصیت‌های CSS برای استایل دادن به فونت‌ها آمده است:
- font: خصوصیت مختصر فونت.
- font-family: مشخص می‌کند که فونت یا لیستی از فونت‌ها برای متن استفاده شود.
- font-feature-settings: کنترل ویژگی‌های تایپوگرافی پیشرفته در فونت‌های OpenType.
- font-kerning: تعیین می‌کند که چگونه جفت‌های خاصی از حروف فاصله‌بندی شوند.
- font-language-override: رفتار نوع کاراکتر برای یک زبان خاص را نادیده می‌گیرد.
- font-optical-sizing: مشخص می‌کند که نمایش متن باید برای مشاهده در اندازه‌های مختلف بهینه شود.
- font-palette: اجازه استفاده از یکی از پالت‌های مختلفی که در یک فونت وجود دارد.
- font-size: اندازه متن را مشخص می‌کند.
- font-size-adjust: مشخص کردن مقدار نسبت جنبه یک فونت (نسبت عددی) که کاربرد ارتفاع x را کنترل می‌کند.
- font-stretch: پهنای متن را تنظیم می‌کند (فشرده یا گسترده).
- font-style: استایل متن را مشخص می‌کند، مانند “italic”، “oblique”، یا “normal”.
- font-weight: ضخامت یا پررنگی متن را تنظیم می‌کند.
- font-synthesis: خصوصیت مختصر فونت سنتز.
- font-synthesis-small-caps: تعیین می‌کند که مرورگر باید ایا از فونت small-caps که در یک خانواده فونتی موجود نیست، سنتز کند یا خیر.
- font-synthesis-style: تعیین می‌کند که مرورگر باید ایا از فونت oblique که در یک خانواده فونتی موجود نیست، سنتز کند یا خیر.
- font-synthesis-weight: تعیین می‌کند که مرورگر باید ایا از فونت bold که در یک خانواده فونتی موجود نیست، سنتز کند یا خیر.
- font-variant: کنترل استفاده از حروف کوچک برای حروف کوچک در متن.
- font-variant-alternates: کنترل استفاده از حروف جایگزین.
- font-variant-caps: کنترل استفاده از حروف جایگزین برای حروف بزرگ.
- font-variant-east-asian: کنترل استفاده از حروف جایگزین برای اسکریپت‌های شرقی مانند چینی و ژاپنی.
- font-variant-ligatures: کنترل محتوای متنی عنصر را که کدام لیگاتور یا فرمهای زمینه‌ای استفاده شود.
- font-variant-numeric: کنترل استفاده از حروف جایگزین برای اعداد، کسور و نشانگرهای ترتیبی.
- font-variant-position: کنترل استفاده از حروف جایگزین و کوچکتر، جا به جایی شده به عنوان بالانویس یا زیرنویس.
- font-variation-settings: مشخص کردن نام‌های محور چهار حرفی ویژگی‌های فونت متغیر.
- line-height: ارتفاع جعبه خط را تعیین می‌کند. همچنین فاصله بین خطوط متن را مشخص می‌کند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام