CSS yazı tipi özellikleri yazı tipi ailesi, cesaret, boyutunu ve bir metnin stilini tanımlar.
Serif ve Sans-serif yazı tipleri Arasındaki Fark
CSS Yazı Tipi Aileleri
CSS, font ailesi isimlerinin iki çeşidi vardır:
- generic family - benzer bir görünüme sahip yazı tipi aileleri bir grup (like "Serif" or "Monospace")
- font family - (gibi belirli bir yazı tipi ailesi "Times New Roman" veya "Arial")
| jenerik aile | Font ailesi | Açıklama |
|---|---|---|
| Serif | Times New Roman Gürcistan | Serif yazı tipleri, bazı karakterler ucunda küçük hatları var |
| Sans Serif | Arial Verdana | Bu yazı tipleri karakterlerin ucundaki hatları yok - "Sans" olmadan anlamı |
| Eş aralıklı | Courier New Lucida Console | Tüm tek aralıklı karakterleri aynı genişliğe sahip |
Note: Bilgisayar ekranlarında, sans-serif yazı serif yazı daha kolay okunur kabul edilir.
Font ailesi
Bir metnin yazı tipi ailesi ile ayarlanır font-family özelliği.
font-family tesiste gibi çeşitli yazı adlarını tutmak gerekir "fallback" sistemiyle. tarayıcı ilk yazı desteklemiyorsa, o kadar sonraki yazı dener ve.
istediğiniz yazı ile başlayın, ve başka hiçbir yazı olup olmadığını tarayıcı, jenerik ailede benzer bir yazı almak bildirmek için genel bir aile ile biter.
Note : Bir yazı tipi ailenin ismi birden fazla kelime ise, gibi tırnak içinde olmalıdır "Times New Roman" .
Birden fazla yazı tipi ailesi virgülle ayrılmış listesinde belirtilir:
Yaygın olarak kullanılan yazı tipi kombinasyonlar için, bizim bakmak Web Güvenli Yazı Kombinasyonlar .
Yazı stili
font-style özelliği çoğunlukla italik metnini belirtmek için kullanılır.
Bu özellik üç değer vardır:
- - normal normal şekilde gösterilmektedir
- italik - italik yazı gösterilir
- eğik - Metin edilir "leaning" (oblique is very similar to italic, but less supported)
Örnek
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
} Kendin dene " Yazı Boyutu
font-size özelliği metnin boyutunu ayarlar.
Metin boyutunu yönetebilme web tasarımında önemlidir. Ancak, paragraflar başlıkları gibi bakmak, ya da başlıkları paragraflar gibi görünmesi için yazı tipi boyutu ayarlamaları kullanmamalısınız.
Her zaman gibi uygun HTML etiketlerini kullanabilirsiniz <h1> - <h6> başlıklar ve için <p> paragraf için.
yazı tipi boyutu değeri mutlak ya da göreli boyutta olabilir.
Mutlak boyut:
- Belirtilen boyuta metni ayarlar
- Bir kullanıcı (erişilebilirlik nedenlerle kötü) tüm tarayıcılarda metin boyutunu değiştirmek için izin vermiyor
- çıkış fiziksel boyutu bilindiği Mutlak boyutu yararlıdır
Bağıl boyutu:
- Çevredeki elemanlarına boyut göreli olarak ayarlar
- Bir kullanıcı tarayıcılarda metin boyutunu değiştirmesine izin verir
Note: Eğer bir yazı tipi boyutu, normal metin için varsayılan boyutu belirtmezseniz, paragraflar gibi, 16px olan (16px=1em) .
Piksel Seti Yazı Tipi Boyutu
pikselli metin boyutu ayarlama daha metin boyutu üzerinde tam kontrol sağlar:
İpucu: pikseller kullanıyorsanız, yine de tüm sayfayı yeniden boyutlandırmak için yakınlaştırma aracını kullanabilirsiniz.
Em Seti Yazı Tipi Boyutu
Kullanıcıların metin yeniden boyutlandırmak için izin vermek için (in the browser menu) , pek çok geliştirici piksel yerine kullanırım.
em boyutu birimi W3C tarafından tavsiye edilmektedir.
1em mevcut yazı tipi boyutu eşittir. tarayıcılarda varsayılan metin boyutu 16px olduğunu. Yani, 1em varsayılan boyutu 16px olduğunu.
: Boyutu bu formül kullanılarak em piksel hesaplanabilir pixels / 16 = em
Örnek
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
} Kendin dene " Yukarıdaki örnekte, em de metin boyutu piksel olarak önceki örnekle aynıdır. Ancak, em boyutu ile, tüm tarayıcılarda metin boyutunu ayarlamak mümkündür.
Ne yazık ki, hala IE'nin eski sürümleri ile bir sorun vardır. Metin daha küçük yapılmış gerekirken daha onu daha da büyüttü gerekirken daha büyük ve daha küçük hale gelir.
Yüzde ve Em bir kombinasyonu kullanın
Tüm tarayıcılarda çalışır çözümü için yüzde varsayılan font-size ayarlamaktır <body> elemanı:
Örnek
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
} Kendin dene " Bizim kod artık harika çalışıyor! Tüm tarayıcılarda aynı metin boyutunu gösterir ve tüm tarayıcılar yakınlaştırmak veya metin yeniden boyutlandırmak için izin verir!
yazı Ağırlık
font-weight tesiste yazı tipinin ağırlığını belirtir:
yazı Varyant
font-variant tesiste metin Kısa harfli yazı görüntülenmesi gereken olup olmadığını belirtir.
Kısa harfli yazı, tüm küçük harfler büyük harf dönüştürülür. Ancak, dönüştürülmüş büyük harfler metinde orijinal büyük harf daha küçük yazı tipi boyutu görünür.
Diğer Örnekler
Tek bildiriminde tüm yazı tipi özellikleri
Bu örnek tek bildiriminde yazı özelliklerinin tüm ayarlamak için steno özelliğini nasıl kullanılacağını göstermektedir.
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 »
Tüm CSS Font Özellikleri
| özellik | Açıklama |
|---|---|
| font | tek bildiriminde tüm font özelliklerini belirler |
| font-family | metnin yazı tipi ailesini belirtir |
| font-size | metnin yazı tipi boyutunu belirtir |
| font-style | metnin yazı tipi stilini belirtir |
| font-variant | Bir metin Kısa harfli yazı görüntülenmesi gereken olup olmadığını belirtir |
| font-weight | Bir yazı tipinin ağırlığını belirtir |