Metnin kalın yada ince olarak gözükmesini sağlar.
.font {
font-weight: bold;
font-size: 45px;
}
| Değer | Açıklama |
| normal | Metin kendi font özelliklerinde görünür. |
| bold | Metin kalın görünür. |
| bolder | Metin kalın görünür. |
| lighter | Metin hafif kalınlıkta görünür. |
|
100 200 300 400 500 600 700 800 900 |
Sıralama inceden kalına doğrudur. |
| İnital | |
| İnherit |
| 2.0 | 1.0 | 4.0 | 1.3 | 3.5 |
Küçük harflere sahip metinin küçük harflerini büyütür. Fakat normal büyük harfinden biraz daha küçük olur.
.font {
font-variant: small-caps;
}
| Değer | Açıklama |
| normal | Metin normal gözükmesini sağlar.. |
| small-caps | Küçük yazılmış harflerin büyük gözükmesini sağlar. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 3.5 |
Metnin yazı tipi stilini belirler.
.font {
font-style: italic;
font-size: 50px;
}
| Değer | Açıklama |
| normal | Yazı stilini normal olarak ayarlamak için kullanılır. |
| İtalic | Yazı stilini italik olarak ayarlamak için kullanılır. |
| ablique | Tarayıcı eğik bir yazı stili görüntüler. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 7.0 |
Bu font özelliği metni daha geniş veya dar yapmanıza olanak verir.
.font {
font-stretch: condensed;
}
| Değer | Açıklama |
| ultra-condensed | Metni ultra daraltır. |
| extra-condensed | Metni extra daraltır. |
| condensed | Metni daraltır. |
| semi-condensed | Metni normalden biraz daha daraltır. |
| normal | Metne normal değerini verir. |
| semi-expanded | Metni normal değerden biraz daha genişletir. |
| expanded | Metni genişletir. |
| extra-expanded | Metni extra genişletir. |
| ultra-expanded | Metni ultra genişletir. |
| İnital | |
| İnherit |
| Desteklenmiyor | Desteklenmiyor | Desteklenmiyor | Desteklenmiyor | Desteklenmiyor |
Web tarayıcısı ilk fontu okumadığı zaman ikinci fonta geçer ve font boyutunda önemli ölçüde değişimlere neden olabilir. Bu durumu önlemek için bu özellik her font un aynı boyutta gözükmesini sağlar.
.font1 {
font-family: 'arial',sans-serif;
font-size-adjust : 1.0;
}
.font2 {
font-family: 'verdana',sans-serif;
font-size-adjust : 1.0;
}
| Değer | Açıklama |
| number | Alacağı değeri belirlemek için kullanılır. |
| none | Değer almaz. |
| İnital | |
| İnherit |
| desteklenmiyor | 3.0 | desteklenmiyor | desteklenmiyor | desteklenmiyor |
Yazının boyutunu ayarlar.
.font {
font-size: 45px;
}
| Değer | Açıklama |
| medium | Orta boy metin tanımlamak için kullanılır. Varsayılan değerdir. |
| xx-small | Ekstra ekstra küçük boy metin tanımlamak için kullanılır. |
| x-small | Ekstra küçük boy metin tanımlamak için kullanılır. |
| small | Küçük boy metin tanımlamak için kullanılır. |
| large | Büyük boy metin tanımlamak için kullanılır. |
| x-large | Ekstra büyük boy metin tanımlamak için kullanılır. |
| xx-large | Ekstra ekstra büyük boy metin tanımlamak için kullanılır. |
| smaller | Küçük boy metin serisi tanımlamak için kullanılır. |
| larger | Büyük boy metin serisi tanımlamak için kullanılır. |
| length | Sabir bir değer tanımlamak için kullanılır.(12px, 1.5em, 100% gibi) |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 5.5 | 1.0 | 7.0 |
Bir eleman için yazı ailesini belirtir. Birden çok yazı fontu içerisine yazabilirsiniz. Bu sayede tarayıcı birinci fontu desteklemiyorsa bir sonrakine geçer.
.font{
font-family: 'arial',sans-serif;
}
| Değer | Açıklama |
| family-name generic-family |
Birincisi ana font olarak alınır sonrakiler ise bağlı olduğu aileden farklı fontlardır. |
| flex-basis | Flex-basis de flex-grow gibi boyutlandırma yapar,ama bu px gibi değer alarak yapar. |
| flex-shrink | Flex-shrink değeri kadar o element diğerlerine göre fazladan daralacaktır.Varsayılan değeri 1 dir |
| auto | ayarı 1 1 e otomatik olarak ayarlar. |
| none | ayarı 0 0 a otomatik olarak ayarlar. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 3.5 |
Her web sayfasının bir font’a ihtiyacı vardır. Tanımlanmadığı durumlarda bunu her web tarayıcısı farklı yorumlayabilir. Burada örnekte göreceğiniz ilk değer geçerli olan fonttur. O fontun web tarayıcısı tarafından okunamadığı yada tanımlanamadığı durumlarda ikinci font devreye girecektir.
@font-face {
font-family: 'robotomedium';
src: url('http://www.w3tr.com/file/roboto-medium_0-webfont.eot');
src: url('http://www.w3tr.com/file/roboto-medium_0-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.w3tr.com/file/roboto-medium_0-webfont.woff2') format('woff2'),
url('http://www.w3tr.com/file/roboto-medium_0-webfont.woff') format('woff'),
url('http://www.w3tr.com/file/roboto-medium_0-webfont.ttf') format('truetype'),
url('http://www.w3tr.com/file/roboto-medium_0-webfont.svg#robotomedium') format('svg');
font-weight: normal;
font-style: normal;
}
| Değer | Açıklama |
| font-family | Gerekli. Yazının adını tanımlar. |
| src | Gerekli. yazının bulunduğu konumu belirtmek için kullanılır. |
| font-stretch | Yazı tipi renginin nasıl olması gerektiğini belirtmek için kullanılır. Varsayılan değer “normal” dir. |
| font-style | Yazı tipi stilinin nasıl olacağını belirtmek için kullanılır. Varsayılan değer “normal” dir. |
| font-weight | Fontun kalınlığını belirlemek için kullanılır. Varsayılan değer “normal” dir. |
| unicode-range | Yazı karakter aralığını belirtmek için kullanılır. Varsayılan değer “U+0-10FFFF” dir. |
| İnital | |
| İnherit |
| TTF/OTF | 4.0 | 3.5 | 9.0 | 3.1 | 10.0 |
| WOFF | 5.0 | 3.6 | 9.0 | 5.1 | 11.1 |
| WOFF2 | 36.0 | 35.0 | desteklenmiyor | desteklenmiyor | 26.0 |
| SVG | 4.0 | desteklenmiyor | desteklenmiyor | 3.2 | 9.0 |
| EOT | desteklenmiyor | desteklenmiyor | 6.0 | desteklenmiyor | desteklenmiyor |
Font özellikleri sayfalarımızdaki metinlerin font ailesini, kalınlık ayarlarını, boyutunu, büyük-küçük harf olmasını ve stilini değiştirmemizi sağlar.
.font{
font: italic bold 20px/24px arial, serif;
}
| Değer | Açıklama |
| font-variant | Metnin küçük/büyük harf ile gösterilmesini belirler. |
| Font-weight | Font un kalınlık incelik durumunu belirler. 100(ince)-900(kalın) arasında bir değer alabildiği gibi bold ve normal değerlerini de alır. |
| Font-style | Metnin italik olup olmayacağını belirlemek için kullanılır. |
| Font-size | Metnin boyutunu ayarlamak için kullanılır. |
| Line-height | Satır yüksekliğini ayarlamak için kullanılır. |
| Font-family | Metinlerde kullanacağımız font ailesini belirlemek için kullanılır. Birden fazla font ailesi kullanılırsa aralarına virgül konur. |
| icon | İcon lar tarafından kullanılan yazı tipini kullanır. |
| Menu | Açılan menüler tarafından kullanılan yazı tipini kullanır. |
| Message-box | İletişim kutuları tarafından kullanılan yazı tipini kullanır. |
| Status-bar | Durum çubuğu tarafından kullanılan yazı tipini almak için kullanılır. |
| caption | Kontroller tarafında kullanılan yazı tipini kullanır. (like buttons, drop-downs, etc.) |
| small-caption | caption yazı tipi nin küçük bir versiyonudur. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 3.5 |