@font-face :
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.
Örnek
@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;
}
Codepen Ön izleme
Css Sözdizimi
| 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 |
|
Tarayıcı Desteği
|
|
|
|
|
|
| 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 |