پادکست CSS - 036: متن و تایپوگرافی
متن یکی از اجزای اصلی وب است.
هنگام ایجاد یک وب سایت، لزوماً نیازی به سبک دادن به متن خود ندارید. HTML در واقع دارای یک سبک پیش فرض بسیار معقول است.
با این حال، متن به احتمال زیاد اکثریت وب سایت شما را تشکیل می دهد، بنابراین ارزش آن را دارد که برای زیباتر کردن آن، سبکی اضافه کنید. با تغییر چند ویژگی اساسی، می توانید تجربه خواندن را برای کاربران خود به میزان قابل توجهی بهبود بخشید!
در این ماژول، ابتدا به برخی از ویژگی های اساسی فونت CSS مانند font-family
، font-style
، font-weight
و font-size
نگاه می کنیم. سپس، به ویژگیهایی میپردازیم که بر پاراگرافهای متن تأثیر میگذارند، مانند text-indent
و word-spacing
. ماژول با برخی موضوعات پیشرفته تر مانند فونت های متغیر و شبه عناصر به پایان می رسد.
تایپ را تغییر دهید
از 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
right
با خط عربی که از راست به چپ (RTL) نوشته می شود به سمت راست 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
. برای جزئیات بیشتر در مورد استفاده از آن، پیوندهای موجود در هر ملک را بررسی کنید.
درک خود را بررسی کنید
دانش خود را از تایپوگرافی در وب آزمایش کنید
کدام یک از کلیدواژههای زیر را میتوان بهعنوان یک بک آپ کلی 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
baseline-distance
line-height
منابع
- بهترین شیوه های فونت در مورد وارد کردن فونت ها، رندر کردن فونت ها و سایر بهترین روش ها برای استفاده از فونت ها در وب بحث می کند.
- MDN سبک متن و فونت اساسی .