Шрифт - CSS-трикове | CSS алманах 2025

В fontимота в CSS е краткият имот, който съчетава всички поставени следните свойства в една декларация.

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

Има седем fontпод-свойства, включително:

font-stretch: това свойство задава ширината на шрифта, като кондензирано или разширено.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: прави текста да изглежда курсив или наклонен.
- normal
- italic
- oblique
- inherit
font-variant: променя целевия текст на малки главни букви.
- normal
- small-caps
- inherit
font-weight: задава теглото или дебелината на шрифта.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: задава височината на шрифта.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: определя размера на пространството над и под вградените елементи.
- normal
- number (font-size multiplier)
- percentage
font-family: определя шрифта, който е приложен към елемента.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Стенографични шрифтове Gotchas

В fontимота не е толкова лесно, колкото други стенограмите имоти, отчасти се дължи на изискванията за синтактични за него, и отчасти поради проблеми с наследството.

Ето обобщение на някои от нещата, които трябва да знаете, когато използвате това стенографско свойство.

Задължителни стойности

Две от стойностите в fontстенографията са задължителни: font-sizeи font-family. Ако нито едно от тях не е включено, цялата декларация ще бъде игнорирана.

Също така, font-familyтрябва да бъде деклариран последен от всички стойности, в противен случай отново цялата декларация ще бъде игнорирана.

Незадължителни стойности

И петте други стойности са по избор. Ако включите някой от font-style,, font-variantи font-weight, те трябва да дойдат преди това font-sizeв декларацията. Ако не са, те ще бъдат игнорирани и може също да причинят игнориране на задължителните стойности.

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

В горния пример са включени три опции. Докато те са определени по-рано font-size, те могат да бъдат поставени във всякакъв ред.

Включването line-heightе също по избор, но може да бъде декларирано само след font-sizeи само след наклонена черта:

body ( font: 44px/20px Georgia, sans-serif; )

В горния пример, това line-heightе „20px“. Ако пропуснете line-height, трябва да пропуснете и наклонената черта, в противен случай целият ред ще бъде игнориран.

Използване на шрифт-разтягане

В font-stretchимота е новото в CSS3, така че ако той се използва в по-стар браузър, който не поддържа font-stretchв fontстенограмите, това ще доведе цялата линия, за да бъдат пренебрегнати.

Спецификацията препоръчва да се включи резервен вариант без font-stretch, като този:

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

Наследяване на незадължителните лица

Ако пропуснете някоя от optianal стойностите (включително line-height), пропуснатите опции няма да наследят стойности от своя родителски елемент, както често се случва с типографските свойства. Вместо това те ще бъдат върнати в първоначалното си състояние.

Например:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

В този случай незадължителните стойности (курсив, малки букви и получер шрифт) се поставят върху fontдекларацията на елемента. Те ще важат и за повечето дъщерни елементи.

Тъй като обаче сме декларирали fontсвойството на елементите на абзаца, всички опции ще бъдат нулирани в абзаците, което ще доведе до връщане на стила, варианта, теглото и височината на линията до първоначалните им стойности.

Ключови думи за дефиниране на системни шрифтове

В допълнение към горния синтаксис, fontсвойството позволява и използване на ключови думи като стойности. Те са:

caption
icon
menu
message-box
small-caption
status-bar

Тези стойности на ключовите думи задават шрифта на този, който се използва в операционната система на потребителя за конкретната категория. Например, дефинирането на „надпис“ ще зададе шрифта на този елемент да използва същия шрифт, който се използва в операционната система за контроли с надписи (бутони, падащи менюта и т.н.).

Една ключова дума включва цялата стойност:

body ( font: menu; )

Другите свойства, споменати по-рано, не са валидни заедно с тези ключови думи. Тези ключови думи могат да се използват само със fontстенография и не могат да бъдат декларирани с помощта на някое от отделните свойства на стенограмите.