Bu blog, CSS @font-face kuralının kullanımı hakkında konuşacak.
CSS @font-face Kuralı nedir?
CSS'deki @font-face kuralı, projelerimiz için özel yazı tipleri oluşturmak için kullanılır. Bu yazı tipleri, sunucudan veya sistemin yüklü yazı tiplerinden yüklenebilir.
CSS @font-face Kuralı Nasıl Kullanılır?
CSS @font-face kuralını kullanmak için sözdizimi aşağıda belirtilmiştir:
@yazı tipi-yüz {
font ailesi : MyNewFont ;
kaynak : url ( )
}
@font-face kuralı, font-family özelliğinde bir değer ve bu fontun bulunduğu ilgili URL'yi src niteliği olarak belirterek tanımlanır.
Örnek vermek
Aşağıdaki örnekte yazı tiplerini özelleştireceğiz. Bunu yapmak için öncelikle tarayıcıdan yazı tiplerini indirin ve projenizin klasörüne ekleyin. Sunucudan yazı tipleri kullanıyorsanız, bağlantıları da kullanabilirsiniz.
Öncelikle
ve etiketlerini ekleyin, ardından yazı tiplerini her birine özelleştirmek için uygulayın. Yukarıda anlatılan senaryoyu üç adımda uygulayalım.
1. Adım: HTML dosyasına Öğeler ekleyin
1. Adım: HTML dosyasına Öğeler ekleyin
HTML'de, web sayfasıyla ilgili bazı içerikler eklemek için
bölümünün içine ve ekleyin:
< h2 > Linuxhint'e hoş geldiniz! < / h2 >
< h1 > Linuxhint'e hoş geldiniz! < / h1 >
Adım 2: CSS'de @font-face Kuralını belirtin
< h2 > Linuxhint'e hoş geldiniz! < / h2 >
< h1 > Linuxhint'e hoş geldiniz! < / h1 >
Adım 2: CSS'de @font-face Kuralını belirtin
Kuralı belirtmek için “ anahtar kelime @yazı tipi-yüz ” CSS'de kullanılır. Küme parantezlerinin içine font-family özelliğini ekleyin ve font adını değeri olarak ekleyin. Ardından, indirilen yazı tipinin URL yolunu belirtmek için src özelliğini kullanın:
@yazı tipi-yüz {
font ailesi : yazı tipim ;
kaynak : url ( '/fonts/Batuhat\ Script.otf' ) ;
}
Benzer şekilde, başka bir özelleştirilmiş yazı tipi bloğu ekleyeceğiz:
@yazı tipi-yüz {font ailesi : yazı tipim2 ;
kaynak : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Şimdi
ve öğelerine stil uygulayın.
Stil h2 Elemanı
h2 {
font ailesi : yazı tipim ;
yazı Boyutu : 50 piksel ;
}
Stil h2 Elemanı
h2 {font ailesi : yazı tipim ;
yazı Boyutu : 50 piksel ;
}
öğesine uygulanan özellikler aşağıda açıklanmıştır:
- “ font ailesi ”, “ değeriyle ayarlanır yazı tipim @font-face kuralında beyan ettiğimiz şey budur.
- “ yazı Boyutu ” özelliği, yazı tipi boyutunu 50px olarak ayarlar.
Stil h1 Elemanı
h1 {
font ailesi : yazı tipim2 ;
yazı Boyutu : 70 piksel ;
renk : Kahverengi ;
}
Burada “ renk ” özelliği yazı tipini renklendirmek için kullanılır.
ve etiketlerinin yeni bildirilen yazı tipleriyle başarıyla biçimlendirildiği aşağıdaki görüntüden görülebilir:
CSS @font-face kuralını kullanma yöntemini sağladık.
Çözüm
Yazı tipi stilleri, herhangi bir uygulamayı estetik açıdan çekici hale getirmede önemli bir rol oynar. Sistemimizde sınırlı yazı tipi stilleri bulunurken, bir geliştiricinin web uygulamalarına güzelleştirme eklemek için farklı yazı tiplerine ihtiyacı vardır. Bunu yapmak için CSS, özel yazı tipleri eklemek için @font-face kuralını kullanmamıza izin verir. Bu makale, uygulamamızda yazı tipi stilini özelleştirebileceğiniz @font-face kuralını göstermektedir.