CSS Font özellikleri kullanarak, metinlerimizde kullandığımız fontların özelleştirmelerini yapabilmek mümkün. Fontların tipini, boyutunu, kalınlıkları gibi özelleştirmeler yapabilmekteyiz. Metin özelleştirmelerinde yaptığımız gibi font özelleştirmelerini belirli parametreler ve değerler çerçevesinde yapmaktayız.
İçindekiler
Font renklendirme (color)
Yazdığımız içerikler içerisinde metinlerin font renklerini renklendirme yaparak çeşitli renklerle özelleştirme yapabilmekteyiz. CSS ile yazılarda renklendirme yaparken kullandığımız colorparametresini, font renklendirmesinde, metin renklendirmesinde aynı kurallar çerçevesinde kullanmaktayız. Renklendirme yaparken kullanılacak olan renk kodlarını ve renk isimlerini bilmiyorsanız; BURAYA tıklayarak HTML Renk kodlarını öğrenebilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> <style> .fusya { color: #FF00FF; } .altin { color: Gold; } </style> </head> <body> <p class="fusya">Bu yazı fuşya rengindedir.</p> <p class="altin">Bu yazı altın sarısı rengindedir.</p> </body> </html> |
Bu yazı fuşya rengindedir.
Bu yazı altın sarısı rengindedir.
Yazı tipi ailesi belirleme (font-family)
Yazı tipi belirlerken; font-family parametresi kullanılır. Belirlenmiş olan metin grubuna, belirli bir yazı tipi ailesi tanımlanır. Bu tanımlanma sayesinde metinin yazı tipi değiştirilmiş olur.
Web sitelerinizde kullanabileceğiniz, Google fonts veritabanı bulunmaktadır. Buraya göz atarak font seçiminizi kolaylaştırabilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> <style> .yazi1 { font-family: Comic Sans MS; } .yazi2 { font-family: Freestyle Script; } </style> </head> <body> <p class="yazi1">CSS Font Özellikleri ile font değiştirme</p> <p class="yazi2">Kod Kampüsü, CSS Dersleri</p> </body> </html> |
CSS Font Özellikleri ile font değiştirme
Kod Kampüsü, CSS Dersleri
Font büyüklüğünü değiştirme (font-size)
Yazı fontunun büyüklüğünü ve küçüklüğünü font-size parametresini kullanarak uygulamaktayız.
Boyutlandırmanın çeşitli değerleri bulunmaktadır.
| xx-small | x-small | small | medium | large | x-large | xx-large | öz ölçü değerleridir.
| 20px | 54% | 1.5em | gibi değerler, değiştirilebilir boyut değerleridir.
| larger | smaller | göreceleri değerlerdir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <head> <style> .yazi1 { font-size: x-large; } .yazi2 { font-size: 30px; } .yazi3 { font-size: smaller; } </style> </head> <body> <p class="yazi1">Bu yazı x-large boyutundadır.</p> <p class="yazi2">Bu yazı 30px değerinde boyutlandırıldı.</p> <p class="yazi3">Bu yazı smaller boyutundadır.</p> </body> </html> |
Bu yazı x-large boyutundadır.
Bu yazı 30px değerinde boyutlandırıldı.
Bu yazı smaller boyutundadır.
Font stili ayarlama (font-style)
Yazıları eğik, biraz eğik ve düz şekilde yazmak için kullanılmaktadır. font-style parametresi kullanılarak uygulanır.
Özelleştirme yaparken kullanılan değerlere bakacak olursak:
normal : Metini normal şekilde yazdırır.
oblique : Az eğik bir türde yazdırır.
italic : Eğik, italik türde yazdırır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <head> <style> .yazi1 { font-style: normal; } .yazi2 { font-style: oblique; } .yazi3 { font-style: italic; } </style> </head> <body> <p class="yazi1">Bu yazı normal türde bir yazıdır.</p> <p class="yazi2">Biraz eğik türde yazılan bir yazı.</p> <p class="yazi3">İtalik, eğik yazılan yazı.</p> </body> </html> |
Bu yazı normal türde bir yazıdır.
Biraz eğik türde yazılan bir yazı.
İtalik, eğik yazılan yazı.
Fontun harf büyüklüğünü değiştirme (font-variant)
Küçük harfli yazılan yazıları; büyük harfe dönüştürür. Ancak dönüştürülürken yazının boyutu küçük olacak şekilde gözükür.
font-variant parametresi kullanılır. small-caps değeri kullanılır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> <style> .yazi1 { font-variant: normal; } .yazi2 { font-variant: small-caps; } </style> </head> <body> <p class="yazi1">Kod Kampüsü sitesi ile web tasarım öğrenmek çok kolay.</p> <p class="yazi2">Kod Kampüsü sitesi ile web tasarım öğrenmek çok kolay.</p> </body> </html> |
Kod Kampüsü sitesi ile web tasarım öğrenmek çok kolay.
Kod Kampüsü sitesi ile web tasarım öğrenmek çok kolay.
Font kalınlığını belirleme (font-weight)
font-weight parametresi ile fontun inceliğini ve kalınlığını ayarlayabiliriz.
Aldığı bazı değerler bulunmaktadır.
| normal | lighter | bold | bolder |
100 ve 1000 arasında değerler almaktadır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <html> <head> <style> .yazi1 { font-weight: lighter; } .yazi2 { font-weight: normal; } .yazi3 { font-weight: bold; } .yazi4 { font-weight: bolder; } </style> </head> <body> <p class="yazi1">Kod Kampüsü sitesi ile web tasarım öğrenmek çok kolay.</p> <p class="yazi2">Kod Kampüsü sitesi ile web tasarım öğrenmek çok kolay.</p> <p class="yazi3">Kod Kampüsü sitesi ile web tasarım öğrenmek çok kolay.</p> <p class="yazi3">Kod Kampüsü sitesi ile web tasarım öğrenmek çok kolay.</p> </body> </html> |
Kod Kampüsü sitesi ile web tasarım öğrenmek çok kolay.
Kod Kampüsü sitesi ile web tasarım öğrenmek çok kolay.
Kod Kampüsü sitesi ile web tasarım öğrenmek çok kolay.
Kod Kampüsü sitesi ile web tasarım öğrenmek çok kolay.
