CSS’ te yazılan metinleri biçimlendirmek için kullanılan yöntemleri daha önceki CSS Metin Biçimlendirme konusunda incelemiştik. Bu derste ise yine en temel özelliklerden olan font özellikleri biçimlendirmeyi inceleyeceğiz.
Yazı tipi (Font) , belirli bir stilde ve boyutta yazdırılabilir veya görüntülenebilir metin karakteri setidir. Yazı kümesi türü tasarımı yazı tipi ve bu tasarımın varyasyonları yazı tipi ailesi oluşturmaktadır. CSS font özelliklerinin kullanımında çoğunun başında font-ifadesi bulunur.
Font Family
Bir metnin yazı tipi “font-family” özelliği ile ayarlanır.
Tek bir font kullanmak yerine birkaç alternatif font kullanmanız her zaman tavsiye edilir. Sitenizde özel fontları kullanmak isteyebilirsiniz. Tüm fontlar tüm bilgisayarlarda bulunmadığından (binlerce yazı tipi vardır ve çoğu ücretsiz değildir), CSS bir geri dönüşüm sistemi sunar.
Tarayıcı tarafından görüntülenemeyen bir font kullanılmışsa web’in güvenilen fontlarından birini seçerek yazının sunulmasında problem çıkartmaz. Varsayılan olarak, her bilgisayarda, tablette, akıllı telefonda veya diğer web tarama özellikli cihazlarda önceden yüklenmiş birkaç yazı tipi bulunur. Her cihazda zaten yüklü olan bu yazı tiplerini, web sitelerimizde özgürce kullanabiliriz.
Bu yazı tipleri “web-güvenli fontlar” olarak bilinir hale gelmiştir. Önce istediğiniz yazı tipini, sonra kullanılamıyorsa ilk dolduracak yazı tiplerini ve en son web güvenli fontlarından birini tercih etmelisiniz.
Web güvenli fontları ;
- serif
- sans-serif
- cursive
- monotype
- fantasy
Örnek:
Not: Bir yazı tipi ailesinin adı birden fazla sözcük ise, tırnak işaretleri içinde olmalıdır: ‘Times New Roman’.
Örnek:
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 30 31 32 33 34 35 | <!DOCTYPE html> <html> <head> <style> p.bir { font-family: serif; } p.iki { font-family: sans-serif; } p.uc { font-family: "arial black"; } p.dort { font-family: cursive; } p.bes { font-family: fantasy; } </style> </head> <body> <h1>CSS font-family Özelliği</h1> <p class="bir">Bu yazıda Serif fontu kullanılmıştır.</p> <p class="iki">Bu yazıda Sans-Serif fontu kullanılmıştır.</p> <p class="uc">Bu yazıda arial black fontu kullanılmıştır.</p> <p class="dort">Bu yazıda Cursive fontu kullanılmıştır.</p> <p class="bes">Bu yazıda Fantasy fontu kullanılmıştır.</p> </body> </html> |
Font Style:
CSS font-style özelliği genelde yazıyı italik(eğik) yapmak için kullanılır.
3 farklı değer alabilir. Alttaki örnekte bu değerleri ve ekran görüntüsünü görüyorsunuz.
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 | <!DOCTYPE html> <html> <head> <style> p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; } </style> </head> <body> <p class="normal">Bu paragraf normal style.</p> <p class="italic">Bu paragraf italic style.</p> <p class="oblique">Bu paragraf oblique style.</p> </body> </html> |
CSS Font-Size Özelliği:
font-size Özelliği metnin boyutunu değiştirmenize olanak verir. Metin boyutunu yönetebilmek, web tasarımında önemlidir.
Bununla birlikte, paragrafların başlıklar gibi görünmesini sağlamak için yazı tipi boyutu ayarlamalarını kullanmamalısınız.
<h1> – <h6> başlıklar ve <p> paragraflar için daima uygun HTML etiketleridir.
font-size değeri farklı türlerde belirtilebilir;
Piksel Ölçü birimi : Yazı tipi boyutunu piksel cinsinden verebilirsiniz.
Mutlak boyut : Bu mutlak değerler, tarayıcı tarafından hesaplanan belirli font boyutlarına eşlenir. Mutlak boyut, metnin tarayıcı üzerinde fiziksel boyutu biliniyorsa kullanımı yararlıdır.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
Göreli boyut : Etrafındaki öğelere göre boyutu ayarlar.
- larger
- smaller
Yüzdeli Boyut : Bir yazı tipi boyutu yüzdelik değer olarak belirtebilirsiniz. Bu durumda bir üst öğenin yazı tipi boyutuna göre de boyutlandırma yapılmış olur.
em Ölçü Birimi : em birimi, üst öğenin yazı tipi boyutunun hesaplanan değerine dayalı göreceli bir birimdir. Bu, alt öğelerin yazı tipi boyutlarını ayarlamak için her zaman üst öğelerine bağımlı olduğu anlamına gelir.
Not: Bir yazı tipi boyutu belirtmezseniz, paragraflar gibi normal metin için varsayılan boyut 16 pikseldir (16 piksellik = 1em).
Örnek ;
Aşağıdaki örnekte farklı paragraflara farklı boyutlandırma şekilleri kullanılarak ölçeklendirmeler yapılmıştır.
Örnek:
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html> <head> <style> p.bir { font-size: 16 px;; } p.iki { font-size: 30px;; } p.uc { font-size: xx-small; } p.dort { font-size: medium; } p.bes { font-size: larger; } p.alti { font-size: smaller; } p.yedi { font-size: 1em; } p.sekiz { font-size: 3em;; } </style> </head> <body> <p>Bu paragrafa herhangi bir boyut verilmemiştir. Standart ölçü olarak büyüklüğü 16px değerinde olacaktır.</p> <p class="bir">Bu paragrafa 16px piksel cinsinden boyut verilmemiştir.</p> <p class="iki">Bu paragrafa 30px piksel cinsinden boyut verilmemiştir.</p> <p class="uc">Bu paragrafa xx-small değeri verilmiştir.</p> <p class="dort">Bu paragrafa medium değeri verilmiştir.</p> <p class="bes">Bu paragrafa larger değeri verilmiştir.</p> <p class="altı">Bu paragrafa smaller değeri verilmiştir.</p> <p class="yedi">Bu paragrafa 1em değeri verilmiştir.</p> <p class="sekiz">Bu paragrafa 3em değeri verilmiştir.</p> </body> </html> |
CSS font-weigth Özelliği:
ont-weigth Özelliği ile metnin ağırlığını yada kalınlığını belirlemeniz mümkün. Ancak bu durum tarayıcı tarafından kullanılacak olan yazı tipi ailesine bağlı kılar.
Bu özellik, bir anahtar kelime değerini veya önceden tanımlanmış sayısal bir değeri kabul eder. Mevcut anahtar kelimeler;
- normal
- bold
- bolder
- lighter
Mevcut sayısal değerler ise 100, 200, 300, 400, 500, 600, 700, 800, 900 olabilir. Bu değerlerden (“400”) normal, (“700”) ve sonrası kalın görünümüne eş değer olacaktır.
Örnek:
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 30 31 32 | <!DOCTYPE html> <html> <head> <style> p.normal { font-weight: normal; } p.light { font-weight: lighter; } p.thick { font-weight: bold; } p.thicker { font-weight: 900; } </style> </head> <body> <p class="normal">www.tasarimkodlama.com</p> <p class="light">www.tasarimkodlama.com</p> <p class="thick">www.tasarimkodlama.com</p> <p class="thicker">www.tasarimkodlama.com</p> </body> </html> |
CSS Responsive Font Size:
Metin boyutu, ‘viewport width’ anlamına gelen vw birimi ile ayarlanabilir.
Bu şekilde metin boyutu tarayıcı penceresinin boyutuna göre azalıp artacaktır.
Aşağıdaki kodları yazarak tarayıcının boyutunu arttırıp azaltarak inceleyebilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body> <h1 style="font-size:10vw;">Responsive Metin</h1> <p style="font-size:5vw;">Metin boyutunun nasıl ölçeklendiğini görmek için tarayıcı penceresini yeniden boyutlandırın.</p> <p style="font-size:5vw;">Metni boyutlandırırken 'vw' birimini kullanın. 10vw, boyutu viewport genişliğinin% 10'una ayarlayacaktır.</p> <p>Viewport, tarayıcı penceresi boyutudur. 1vw = viewport genişliğinin% 1'i. Görüntü alanı 50 cm genişliğinde ise, 1vw 0,5 cm'dir.</p> </body> </html> |
CSS font-variant Özelliği:
font-variant Özelliği, metinde bulunan tüm küçük harfleri büyük harflere dönüştürür. Bununla birlikte, dönüştürülen büyük harfler metindeki orijinal büyük harflerden daha büyük bir yazı tipi boyutunda görünür.
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <style> .normal { font-variant: normal; } .small { font-variant: small-caps; } </style> </head> <body> <h1 class="small">www.tasarimkodlama.com</h1> <p class="normal">CSS Örneklerini bu sitede bulabilirsiniz.</p> <p class="small">CSS Örneklerini bu sitede bulabilirsiniz.</p> </body> </html> |
1 Yorum