Yazı tipi - CSS Hileleri | CSS Almanak 2024

fontCSS özellik bir stenografi özelliği olduğunu tüm birleştirir tek bildiriminde aşağıdaki alt özellikleri.

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; ) */

Aşağıdakileri içeren yedi fontalt özellik vardır:

font-stretch: bu özellik, yoğunlaştırılmış veya genişletilmiş gibi yazı tipi genişliğini ayarlar.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: Metnin italik veya eğik görünmesini sağlar.
- normal
- italic
- oblique
- inherit
font-variant: hedef metni küçük harflerle değiştirir.
- normal
- small-caps
- inherit
font-weight: yazı tipinin kalınlığını veya kalınlığını ayarlar.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: yazı tipinin yüksekliğini ayarlar.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: satır içi öğelerin üstündeki ve altındaki boşluk miktarını tanımlar.
- normal
- number (font-size multiplier)
- percentage
font-family: öğeye uygulanan yazı tipini tanımlar.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Yazı Tipi Shorthand Gotchas

fontMülkiyet kısmen bunun için, ve kısmen miras sorunları sözdizimi şartlarına, diğer kestirme nitelikler kadar basit değildir.

Bu steno özelliği kullanırken bilmeniz gereken bazı şeylerin özeti aşağıda verilmiştir.

Zorunlu Değerler

fontSteno içindeki değerlerden ikisi zorunludur: font-sizeve font-family. Bunlardan herhangi biri dahil edilmemişse, beyanın tamamı göz ardı edilecektir.

Ayrıca, font-familytüm değerlerin sonuncusu beyan edilmelidir, aksi takdirde, yine, tüm beyan göz ardı edilecektir.

İsteğe Bağlı Değerler

Diğer beş değerin tümü isteğe bağlıdır. Eğer herhangi eklerseniz font-style, font-variantve font-weight, daha önce gelmelidir font-sizebildiriminde. Değilse, göz ardı edilirler ve zorunlu değerlerin göz ardı edilmesine de neden olabilirler.

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

Yukarıdaki örnekte, üç seçenek dahil edilmiştir. Bunlar daha önce tanımlandığı sürece font-sizeherhangi bir sırayla yerleştirilebilirler.

Dahil etme line-heightde aynı şekilde isteğe bağlıdır, ancak font-sizeyalnızca eğik çizgiden sonra ve yalnızca eğik çizgiden sonra bildirilebilir :

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

Yukarıdaki örnekte line-height"20px" dir. Eğer atlarsanız line-height, ayrıca eğik çizgi, aksi takdirde tüm çizgi göz ardı edilecektir ihmal gerekir.

Yazı tipi uzatmayı kullanma

font-stretchO desteklemeyen eski bir tarayıcıyı kullanılır yani eğer mülkiyet CSS3 yeni olan font-stretchiçinde fontkestirme, tüm çizgi göz ardı edilmesine neden olacaktır.

Spesifikasyon font-stretch, şunun gibi bir yedeğin dahil edilmesini önerir :

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; )

İsteğe bağlı miras

Optik değerlerden herhangi birini atlarsanız (dahil line-height), atlanan isteğe bağlı öğeler, genellikle tipografik özelliklerde olduğu gibi üst öğelerinden değerleri devralmaz. Bunun yerine, başlangıç durumlarına sıfırlanacaklar.

Örneğin:

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

Bu durumda, isteğe bağlı değerler (italik, küçük büyük harfler ve kalın) fontöğedeki bildirime yerleştirilir . Bunlar aynı zamanda çoğu alt öğe için de geçerli olacaktır.

Ancak, fontparagraf öğelerindeki özelliği yeniden belirttiğimiz için, paragraflardaki tüm isteğe bağlı öğeler sıfırlanacak ve stil, varyant, ağırlık ve satır yüksekliğinin başlangıç değerlerine dönmesine neden olacaktır.

Sistem Yazı Tiplerini Tanımlamak için Anahtar Sözcükler

fontÖzellik , yukarıdaki sözdizimine ek olarak, anahtar kelimelerin değer olarak kullanılmasına da izin verir. Onlar:

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

Bu anahtar kelime değerleri, yazı tipini, kullanıcının işletim sisteminde söz konusu kategori için kullanılana ayarlar. Örneğin, "resim yazısı" tanımlamak, o öğedeki yazı tipini, işletim sisteminde altyazılı kontroller (düğmeler, açılır menüler vb.) İçin kullanılanla aynı yazı tipini kullanacak şekilde ayarlayacaktır.

Tek bir anahtar kelime tüm değeri içerir:

body ( font: menu; )

Daha önce bahsedilen diğer özellikler, bu anahtar kelimelerle birlikte geçerli değildir. Bu anahtar sözcükler yalnızca fontsteno ile kullanılabilir ve uzun el özelliklerinden herhangi biri kullanılarak açıklanamaz.