Aynı yazı tipi için birden çok yazı tipi dosyası nasıl eklenir?

@ Font-face CSS kuralı için MDC sayfasına bakıyorum ama bir şey elde edemiyorum. Kalın , italik ve kalın + italik için ayrı dosyalarım var . Üç dosyayı da tek bir @font-facekurala nasıl ekleyebilirim ? Örneğin, ben varsa:

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

Tarayıcı, kalın olarak hangi yazı tipinin kullanılacağını bilmeyecektir (bu dosya DejaVuSansBold.ttf olduğundan), muhtemelen istemediğim bir şeyi varsayılan olarak kullanacaktır. Tarayıcıya belirli bir yazı tipi için sahip olduğum tüm farklı varyantları nasıl söyleyebilirim?

Çözüm @font-face, birden fazla kural eklemek gibi görünüyor , örneğin:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

Bu arada, Google Chrome format("ttf")argüman hakkında bilmiyor gibi görünüyor , bu yüzden bunu atlamak isteyebilirsiniz.

(Bu yanıt CSS 2 belirtimi için doğruydu . CSS3 , virgülle ayrılmış bir liste yerine yalnızca bir yazı tipi stiline izin veriyor.)

CSS3 itibariyle, özellik değişti, sadece bir tanesine izin verdi font-style. Virgülle ayrılmış bir liste (CSS2 başına) sanki sanki normaldaha önceki (varsayılan) girişleri geçersiz kılar. Bu şekilde tanımlanan yazı tipleri kalıcı olarak italik görünür.

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: oblique;
}

Çoğu durumda, italik muhtemelen yeterli olacaktır ve hangisini kullanacağınızı ve ona sadık kalacağınızı tanımlamaya dikkat ederseniz eğik kurallar gerekli olmayacaktır.

Yazı tipi varyasyonunun düzgün çalışması için, CSS'deki @ font-face sırasını tersine çevirmek zorunda kaldım.

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.ttf");
}

Bugünlerde 2017/12/17. Font-property- order'ın gerekliliği hakkında herhangi bir açıklama bulamadım . Ve ben krom test her zaman sipariş ne olursa olsun çalışır.

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

Google yazı tiplerini kullanıyorsanız aşağıdakileri öneririm.

Yazı tiplerinin localhost veya sunucunuzdan çalışmasını istiyorsanız dosyaları indirmeniz gerekir.

İndirme bağlantılarında ttf paketlerini indirmek yerine, sağladıkları canlı bağlantıyı kullanın, örneğin:

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic

URL'yi tarayıcınıza yapıştırın ve ilk yanıta benzer bir yazı tipi yüzü bildirimi almalısınız.

Verilen URL'leri açın, dosyaları indirin ve yeniden adlandırın.

Güncellenmiş font-yüzü bildirimlerini CSS'nizdeki woff dosyalarına göreli yollarla yapıştırın ve işiniz bitti.

/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'), /* Duplicated name with hyphen */
        url('dejavu/DejaVuSans.ttf') 
        format('truetype');
}
/*bold version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Bold.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Bold.ttf') 
        format('truetype');
    font-weight: bold;
}
/*italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Oblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Oblique.ttf') 
        format('truetype');
    font-style: italic;
}
/*bold italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-BoldOblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-BoldOblique.ttf') 
        format('truetype');
    font-weight: bold;
    font-style: italic;
}

Unutmayın, cesur varyant için font-weight; italik varyant içinfont-style