CSS ile Yazı Şekillendirme

CSS ile Yazı Şekillendirme

CSS ile kullanabileceğiniz dört temel yazı özelliği bulunmaktadır: family, style, size ve weight. Bu özellikleri bir arada kullanarak sitenizdeki yazıları şekillendirebilirsiniz.

 Font-Family

font-family özelliği kısaca hangi font’un kullanılacağını belirler. Ayrıca birden fazla parametre alabilir. Bu sayede kullanıcıda ilk tercih edilen font yüklü değilse soldan sağa olmak üzere diğer font değerleri tercih edilir. Örneğin paragraflar için bu özelliği kullanalım.

Bir font ismi eğer iki veya daha fazla kelimeden oluşuyorsa tırnak işareti arasına alınarak yazılır.

Yukarıdaki örnekte ilk font tercihi Times New Roman için kullanıldı ve tırnak işaretleri arasına yazıldı.

Kullanımı en güvenli olan font ailelerine Arial, Helvetica, Times New Roman, Times, Courier New, and Courier örnek verilebilir. The Verdana, Georgia, Comic Sans MS, Trebuchet MS, Arial Black, ve Impact ise PC ve Mac için güvenlidir fakat Linux sistemlerde kurulu olmayabilir.

Bu özelliği kullanırken seçtiğiniz font’un kullanıcıda yüklü olmayabileceğini de düşünerek birden fazla seçenek sunmak en güvenli yoldur.

Font-Style

Yazıları normal, italic veya oblique özelliği ile göstermeyi sağlar. İtalik ile oblique özelliği arasında küçük bir fark bulunur. Genel olarak italik, font için özel bir versiyon olarak kabul edilir. Yaygın kullanımı eğik yazı biçiminde olur. Oblique ise yazının normal haline göre küçük bir açıyla eğim almış halidir.

Font-Size

Yazı büyüklüğünü değiştirmek için pek çok yol bulunmakta. Fakat iki ana başlıkta toparlamak gerekirse sabit ve göreceli büyüklükten bahsedebiliriz.

Sabit büyüklük için uygulanacak elemente bir değer atamak yeterlidir. Örneğin paragrafların büyüklüklerini 14 punto olarak ayarlayalım.

Göreceli büyüklük için ise önce sabit bir büyüklük belirlenir. Çeşitli yazı türleri için büyüklüğü artırmak veya azaltmak isteyebiliriz. Örneğin yazı başlıklarını belirlediğimiz değere göre dereceli olarak artıralım.

Yukarıdaki örnekte h4 etiketi varsayılan font büyüklüğünden %20 daha büyük olacak şekilde ayarlanmıştır. Ardından her biri için %40 artış sağlandı.

Font-Weight

Yazının hangi kalınlıkta gösterileceğini belirler. Pek çok değer almasına karşın en yaygın kullanımı normal ve bold olarak karşımıza çıkar. Ayrıca yazıyı daha ince göstermek için lighter kullanılır. Örneğin paragrafların kalınlığını artıralım.

css ile yazı şekillendirme

 

Yorum Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

error: