font-face tanımını yenileyelim
Sitemizde özel yazı tiplerini kullanmak için kullandığımız @font-face bize çok güzel imkanlar sağladığı kesin. Bir sorunu var bu özelliğin kod bloku çok uzun ve karışık. Daha önce yazdığım font-face kullanımı yazısının üzerinden çok zaman geçti. Bir çok tarayıcı bu listeden düştü. En son ie8 düştü.
{% highlight css %} @font-face { font-family: 'BenimYaziTipim'; src: url('GraublauWeb.eot'); /*ie 6-8 */ src: local('Graublau Web Regular'), local('Graublau Web'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.svg#GraublauWeb') format('svg'), url('GraublauWeb.otf') format('opentype'); } {% endhighlight %}
Kodun da eot, otf ve svg kodlarına gerek kalmadı. Kodumuz daha basit bir hal aldı.
{% highlight css %} @font-face { font-family: 'BenimYaziTipim'; src: url('font.woff') format('woff'), url('font.ttf') format('truetype');
} {% endhighlight %}
ttf'in tutunmasının nedeni mobildeki Android tarayıcısı. Zamanla ttf'inde bitip tek başına woff kullanımına ulaşacağız inşallah.
woff'un tarayıcı desteğini hatırlamakta yarar var. Mobildeki android tarayıcılar sorun oluyor :/
Tarayıcı Desteği
 |
 |
 |
|---|---|---|
| 5.0+ | 9+ | 3.6+ |
| {: .tarayici-uyumi} |
Mobil Tarayıcılar
 |
 |
|
|---|---|---|
| 4.4+ | 5.1+ | 36+ |
| {: .tarayici-uyumi} |
