Her iki yol da size doğru çıktı verirken, daha doğru yol, ağırlıkların ve stillerin tüm farklı varyantlarını gruplamak için tek bir yazı tipi ailesi kullanmak olacaktır. Sistem yazı tiplerini ('Arial'dan aşağıya' sans-serif 'e) aynı şekilde kullanırsınız ve aslında, Raleway'i yüklemek için Google yazı tiplerini kullanırsanız, tek yazı tipi aile yolunu kullanırsınız.
Bunun doğru yöntem olmasının birkaç nedenini özetleyelim.
CSS karmaşıklığını ve sonuçta dosya boyutunu azaltır
Tek bir yazı tipi ailesine sahip olmak, yazı tipi ailesiyle birlikte tüm bir öğeyi ve yalnızca farklı ağırlık / stillere sahip belirli öğeleri tanımlayabileceğiniz anlamına gelir. Örneğin aşağıdakileri ele alalım:
html {
font-family: Raleway;
}
.bold {
font-weight: 700;
}
.italic {
font-style: italic;
}
.footer {
font-family: Arial;
}
<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>
Bu CSS'nin ne kadar güzel olduğuna dikkat edin. .Bold için font ailesi olarak "RalewayBold" veya .italic için "RalewayItalic" belirtmemize gerek yoktu. Aslında, sınıflarımız basitçe çalışacağından, cesur ve italik bir değişken belirtmemize bile gerek yok. Ayrıca, .bold .footer'ımızın içindeyse, cesur Arial olacaktır ve Raleway değil, çünkü Arial'ı altbilgi kabından devralır.
Tarayıcı bunu yapar.
Yukarıdaki temel olarak tarayıcı iç stil sayfasının yazı tiplerini minimal stilleri ve CSS'nin doğal basamaklı doğasını kullanarak nasıl tanımladığıdır.
Endüstrinin yaptığı ve yaptığı şey budur.
En büyük web mülkleri, uygulamaları ve yayıncıları bunu bu şekilde yapar. Google, Facebook, NYT, ESPN vb. Tüm fontları bu şekilde tanımlar ve kullanır.
Sadece bu değil, aynı zamanda CSS veya internetten önceki kullanıcı arayüzleri tek font ailelerini belirtir ve farklı ağırlık ve stil özelliklerine göre varyantlar seçer. Microsoft Word, KeyNote, Google Dokümanlar, hatta 1990'ların eski bir WordPerfect'i yükleyin ve yazı tipi açılır menüsünü açın; "Arial" yazı tipi ailesi adını göreceksiniz; "Arial" yerine "Arial Bold" ve ardından "Arial Italic" vb.
Sadece Google Fonts'tan yükleyin.
Raleway'i Google Fonts'taki ücretsiz webfonts deposundan yüklerseniz Raleway'in tek bir aile adıyla tanımlandığını görürsünüz:
https://fonts.googleapis.com/css?family=Raleway:400,400italic,500,500italic,700,700italic
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url(https://...Raleway-Regular.woff2) format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://...Raleway-Bold.woff2) format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: italic;
font-weight: 500;
src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
}
@font-face {
font-family: 'italic';
font-style: normal;
font-weight: 700;
src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}
