Web sitem için .woff yazı tiplerini nasıl kullanırım?

CSS'nin erişebilmesi için yazı tiplerini nereye yerleştirirsiniz?

Bir .woff dosyasında tarayıcı için standart olmayan yazı tipleri kullanıyorum. Diyelim ki 'harika yazı tipi' bir 'awesome-font.woff' dosyasında depolandı.

Woff dosyalarını oluşturduktan sonra, daha sonra tüm css stillerinizde kullanabileceğiniz yazı tipi ailesini tanımlamanız gerekir. Yazı tipi ailelerini (normal, kalın, kalın-italik, italik için) tanımlayan kod aşağıdadır. Alt fontsdizine yerleştirilmiş 4 * .woff dosyası (belirtilen yazı tipleri için) olduğu varsayılmaktadır .

CSS kodunda:

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font.woff") format('woff');
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-bold.woff") format('woff');
    font-weight: bold;
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-boldoblique.woff") format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-oblique.woff") format('woff');
    font-style: italic;
}

Bu tanımları yaptıktan sonra, örneğin yazabilirsiniz,

HTML kodunda:

<div class="mydiv">
    <b>this will be written with awesome-font-bold.woff</b>
    <br/>
    <b><i>this will be written with awesome-font-boldoblique.woff</i></b>
    <br/>
    <i>this will be written with awesome-font-oblique.woff</i>
    <br/>
    this will be written with awesome-font.woff
</div>

CSS kodunda:

.mydiv {
    font-family: myfont
}

CSS stil sayfalarına dahil edilebilecek woff dosyaları oluşturmak için iyi bir araç burada bulunur . Tüm woff dosyaları en son Firefox sürümlerinde düzgün çalışmaz ve bu oluşturucu 'doğru' yazı tipleri üretir.

@font-faceStil sayfanda böyle beyan etmelisin

@font-face {
  font-family: 'Awesome-Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff');
}

Şimdi, bu yazı tipini bir paragrafa uygulamak istiyorsanız, sadece bunun gibi kullanın ..

p {
font-family: 'Awesome-Font', Arial;
}

Daha Fazla Referans