Web geliştirmede, yazı tipi stilinin doğru kullanımı, uygulamaya çekici bir görünüm sağlar. Bu yazı tipi stilleri, belgenin okuma sırası hakkında görsel ipuçları verir. Örneğin, belge başlığının yazı tipi stili diğerlerinden farklı olarak kalın ve anlamlı olmalıdır. Stil, önemli içeriği diğerlerinden ayırmaya da yardımcı olur.
Bu makalenin öğrenme çıktıları şunlardır:
- Google Web Yazı Tipleri nedir?
- Google Yazı Tiplerini HTML'ye Nasıl Aktarırım?
- Google Yazı Tiplerini CSS dosyasında nasıl kullanabilirim?
Google Web Yazı Tipleri nedir?
Google web yazı tipi, yüzlerce yazı tipi stilini veya ailesini içeren açık kaynaklı bir kitaplıktır. Ayrıca, Web yazı tiplerini Android ve CSS ile kullanmamıza yardımcı olan API'ler sağlar. Google Yazı Tipleri, diğer yazı tipi kitaplıklarından çok daha hafiftir ve ticari kullanım için ücretsizdir. Bunların herhangi bir web sitesinde uygulanması daha kolaydır.
CSS, varsayılan olarak fantezi, serif, Sans serif, el yazısı ve tek aralıklı yazı tipi stilleri sunar. Diğer bazı yazı tipi stillerini kullanmak isterseniz Google Yazı Tipleri kullanılabilir.
Google Yazı Tiplerini HTML'ye Nasıl Aktarırım?
Google Yazı Tiplerini bir HTML sayfasında kullanmak için aşağıdaki adımları izleyin.
1. Adım: Yazı Tipi Ailesini Seçin
İlk olarak, Google Yazı Tipleri resmi web sitesi ve istediğiniz yazı tipini seçin. Örneğin, “ Istakoz İki ' font ailesi:
Adım 2: Stilleri Seçin
Ardından, stil listesini görüntülemek için aşağı kaydırın. ' düğmesine tıklayarak bunları koleksiyonunuza ekleyin. + ' imza:
3. Adım: Seçilen Aileleri Görüntüleyin
Seçilen aileleri görüntülemek için aşağıda vurgulanan simgeye tıklayın:
4. Adım: HTML'ye Gömmek İçin Bağlantıyı Kopyalayın
Bundan sonra, aşağı kaydırın ve vurgulanan “ kullanarak font-family bağlantısını kopyalayın. Kopyala ” simgesi:
CSS Dosyasında Google Yazı Tiplerinden Nasıl Yararlanılır?
Google Fonts'un kopyasını stil için CSS'de kullanmak için verilen örnekleri inceleyin.
örnek 1
İçeriyor ' ” öğesi, bazı içerik veya paragraf belirtmek için:
< p > “En iyi öğretici Web Sitesi” p > Google Yazı Tiplerini içe aktarmak için, kopyalanan kodu “
Stil “p” Elemanı
p {font ailesi: 'Istakoz İki' , el yazısı;
metin hizalama: merkez;
yazı tipi boyutu: 45 piksel;
renk: ( 64 , 3 , 162 , 0.8 ) ;
}
Aşağıda açıklanan CSS özellikleri HTML'ye uygulanır “ ' etiket:
- “ font ailesi ”, “ değeri ile atanır. 'Istakoz İki', el yazısı ”. Bu yazı tipi ailesi, Google Yazı Tiplerinden içe aktarılmıştır.
- “ Metin hizalama ” metin hizalamasını ayarlar.
- “ yazı Boyutu ” yazı tipi boyutunu belirler.
- “ renk ” yazı tipi rengini ayarlar.
Resim, yazı tipi ailesinin başarıyla uygulandığını gösterir:
Örnek 2
“ öğesini içe aktarmak için başka bir örnek ele alalım. Nerko Bir ” Google yazı tipi. Bu amaçla “Nerko One” Google yazı tipi URL'sinin kodunu “” alanına tekrar yapıştırın.
Stil “p” Elemanı
p {font ailesi: 'Nerko Bir' , el yazısı;
yazı tipi ağırlığı: 300 ;
yazı tipi boyutu: 30px;
}
“ font ailesi ”, “ yazı tipi ağırlığı ', ve ' yazı Boyutu ' özellikler HTML'ye uygulanır ' ” öğesi.
Çıktı
Size Google web yazı tiplerini CSS dosyasına nasıl aktaracağınızı öğrettik.
Çözüm
Google Yazı Tiplerini CSS'ye aktarmak için önce şu adresi ziyaret edin: Google Yazı Tipleri resmi web sitesi ve yazı tipi stilini seçin. Ardından, “ içeren kodu kopyalayın. @içe aktarmak ” anahtar kelimesini seçin ve CSS dosyasına veya “