CSS Yazı Tipi

CSS yazı karakter özellikleri, yazı yazı tipi, boyut, kalın, stil (örneğin, yatık) ve dönüşüm (örneğin, küçük büyük harfler) belirler.

CSS Yazı Sırası

CSS'te, iki farklı türdeki yazı tipi ismi bulunmaktadır:

  • Genel Yazı Tipi Serisi - Benzer görünüşlü yazı tipi sistemleri (örneğin "Serif" veya "Monospace")
  • Belirli Yazı Tipi Serisi - Spesifik yazı tipi serileri (örneğin "Times" veya "Courier")

CSS, çeşitli belirli yazı tipi serilerinin yanı sıra 5 tür genel yazı tipi serisi tanımlar:

  • Serif Yazı Tipleri
  • Sans-serif Yazı Tipleri
  • Monospace Yazı Tipleri
  • Cursive Yazı Tipleri
  • Fantasy Yazı Tipleri

Yazı tipi serileri hakkında daha fazla bilgi edinmek için okuyun CSS Yazı Sırası.

Belirli Yazı Tipi Serisi

Kullanım: font-family Özniteliği Metnin yazı tipini tanımlar.

Genel Yazı Tipi Serisi Kullanımı

Belirli bir sans-serif yazı tipi kullanmak istiyorsanız, ancak hangi yazı tipinin kullanılacağını umursamıyorsanız, aşağıdaki bir beyan uygun olabilir:

body {font-family: sans-serif;}

Deneyin

Bu şekilde kullanıcı aracı, sans-serif yazı tipi serisinden bir yazı tipi (örneğin Helvetica) seçer ve bunu body öğesine uygular. Miras nedeniyle, bu yazı tipi seçimi, body öğesinde yer alan tüm öğelere de uygulanır, daha spesifik bir seçici tarafından bu yazı tipi seçimi üstesinden gelmediği sürece.

Belirli Yazı Tipi Serisi

Genel yazı tipi serisini kullanmak dışında, font-family özniteliği ile daha spesifik bir yazı tipi ayarlayabilirsiniz.

Aşağıdaki örnek, tüm h1 öğelerine Georgia yazı tipini ayarlar:

h1 {font-family: Georgia;}

Deneyin

Bu tür kurallar, kullanıcı aracında Georgia yazı tipi kurulu değilse, h1 öğesi için kullanıcı aracının varsayılan yazı tipini kullanmak zorunda kalabileceği bir diğer sorunu da beraberinde getirir.

Bu sorunu çözmek için belirli bir yazı tipi adı ve genel yazı tipi serisini birleştirebiliriz:

h1 {font-family: Georgia,} serif;}

Deneyin

Eğer okuyucu Georgia yazı tipini kurmadıysa, Times yazı tipini (serif yazı tipi serisindeki bir yazı tipi) kurmuşsa, kullanıcı aracı h1 öğesi için Times'ı kullanabilir. Times ile Georgia tam olarak eşleşmemekle birlikte, en azından yeterince yakındır.

Bu nedenle, tüm font-family kurallarında bir genel yazı tipi serisini sağlamayı öneriyoruz. Bu, kullanıcı aracının belirli bir kuralla eşleşen belirli bir yazı tipini sağlayamadığı zamanlarda, bir aday yazı tipi seçilebileceği bir yoldur.

Eğer yazı tipi çok tanıdığınızı düşünüyorsanız, belirli bir öğeye benzer yazı tipleri bir dizi de belirtebilirsiniz. Bunu yapmak için, yazı tiplerini öncelik sırasına göre sıralamanız ve ardından virgülle birleştirmeniz gerekecek:

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

Deneyin

Bu listeye göre, kullanıcı aracısı bu yazı tiplerini sırayla arar. Eğer listelenen tüm yazı tipleri kullanılamazsa, basitçe kullanılabilir serif yazı tipi seçilir.

Tırnak Kullanımı

Belki de fark etmişsinizdir, yukarıdaki örneklerde tekil tırnak kullanıldı. Yazı adı içinde bir veya daha fazla boşluk olan (örneğin New York) veya yazı adı içinde # veya $ gibi semboller içeren yazı adları varsa, font-family bildiriminde tırnak kullanmak gereklidir.

Tekil veya çift tırnak kabul edilir. Ancak, bir font-family özelliği HTML'in style özelliğinde kullanılırsa, o özellik tarafından kullanılmayan tırnak türü gereklidir:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

Deneyin

Yazı Stili

font-style özelliğiGenellikle yatay metinleri belirlemek için kullanılır.

Bu özellik üç değere sahiptir:

  • normal - Metin normal gösterilir
  • italic - Metin italik gösterilir
  • oblique - Metin yatay gösterilir

Örnek

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Deneyin

italic ve oblique arasındaki fark

font-style çok basittir: normal metin, italic metin ve oblique metin arasında seçim yapmak için kullanılır. Tek bir şey biraz karmaşıktır: italic metin ve oblique metin arasındaki farkları belirlemek.

İtalik (italic), her harfin yapısında bazı küçük değişiklikler yaparak değişen bir görünümü yansıtan basit bir yazı tarzıdır. Bu farklı, yatay metinlerin yatay bir versiyonu olan oblique metinlerdir.

Genellikle, italic ve oblique metinler web tarayıcılarında tamamen aynı görünüyor.

Yazı Değiştirme

font-variant özelliğiKüçük büyük harfleri ayarlayabilirsiniz.

Küçük büyük harfler, genel büyük harfler veya küçük harfler değil, farklı büyüklükteki büyük harfleri kullanır.

Örnek

p {font-variant:small-caps;}

Deneyin

Yazı kalınlaştırma

font-weight özelliğiMetnin kalınlığını ayarlayın.

bold anahtar kelimesi ile metni kalın olarak ayarlayabilirsiniz.

Anahtar kelimeler 100 ~ 900, yazıya 9 adet kalınlaşma seviyesi belirler. Bir yazı, bu kalınlaşma seviyelerini içeriyorsa, bu numaralar doğrudan önceden tanımlanmış seviyelere eşleştirilir, 100 en ince yazı biçimine, 900 ise en kalın yazı biçimine karşılık gelir. Sayı 400, normal, 700 ise bold anlamına gelir.

Bir öğenin kalınlaştırma ayarını bolder olarak ayarladığınızda, tarayıcı, miras alınan değerden daha kalın bir yazı kalınlaştırır. Tam tersine, lighter anahtar kelimesi, kalınlaşmayı yukarı değil aşağı doğru taşıyacaktır.

Örnek

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

Deneyin

Font boyutu

font-size özelliğiMetin boyutunu ayarlayın.

Metin boyutunu yönetme yeteneği web tasarımı alanında önemlidir. Ancak, paragrafları başlık gibi görünmesini sağlamak veya başlıkları paragraf gibi görünmesini sağlamak için metin boyutunu ayarlamamalısınız.

Daima doğru HTML başlıklarını kullanın, örneğin <h1> - <h6> başlıklarını etiketlemek için kullanın, paragrafları etiketlemek için <p> kullanın.

font-size değeri mutlak veya relatif değer olabilir.

Asgari değer:

  • Metni belirli bir boyuta ayarlayın
  • Kullanıcıların tüm tarayıcılarda metin boyutunu değiştirmesine izin vermeyin (erişilebilirlik açısından olumsuz etki yaratır)
  • Müfredat boyutu, çıktının fiziksel boyutunu belirlediğinde çok faydalıdır

Relatif boyutlandırma:

  • Deklaratif boyutlandırma
  • Kullanıcıların tarayıcıda metin boyutunu değiştirmesine izin verin

Uyarı:Font boyutu belirlemediyseniz, normal metin (örneğin, paragraflar) varsayılan boyutu 16 pikseldir (16px=1em).

Font boyutunu piksel ile ayarlayın

Metin boyutunu piksel ile ayarlamak, metin boyutunu tamamen kontrol etmek için kullanılır:

Örnek

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

Deneyin

Firefox, Chrome ve Safari'de yukarıdaki örneklerin metin boyutunu yeniden ayarlamak mümkün, ancak Internet Explorer'de mümkün değil.

Metin boyutunu浏览器的缩放工具可以调整，但实际上这是对整个页面的调整，而不仅限于文本。

Font boyutunu em ile ayarlayın

Internet Explorer'de metin boyutunu ayarlayamama sorunu önlemek için, birçok geliştirici pixels yerine em birimi kullanır.

W3C, em ölçü birimini önermektedir.

1em, mevcut yazı boyutuna eşittir. Bir elemanın font-size değeri 16 piksel ise, o eleman için 1em 16 pikseldir. Yazı boyutunu ayarlamak için em değerleri, ana elementin yazı boyutuna göre değişir.

Tarayıcılarda default metin boyutu 16 pikseldir. Bu yüzden 1em'in default boyutu 16 pikseldir.

Aşağıdaki formül, pikseli em'e dönüştürebilir:piksel/16=em

（Not: 16, ana elementin default font-size büyüklüğüdür. Eğer ana elementin font-size değeri 20px ise, formülü değiştirmek gerekecektir:piksel/20=em

Örnek

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Deneyin

Yukarıdaki örnekte, em birimi ile metin boyutu, bir önceki örnekte piksel ile metinle aynıdır. Ancak, em birimi kullanıldığında, tüm tarayıcılarda metin boyutunu ayarlamak mümkündür.

Ne yazık ki, IE'de hala sorunlar var. Metin boyutunu yeniden ayarlandığında, normal boyuttan daha büyük veya daha küçük olabilir.

Yüzde ve EM kullanımı

Tüm tarayıcılarda geçerli bir çözüm, body elementi (anne elementi) için default font-size değerini yüzdelik olarak ayarlamaktır:

Örnek

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

Deneyin

Kodumuz çok etkili. Tüm tarayıcılarda aynı metin boyutunu gösterebilir ve tüm tarayıcıların metin boyutunu ölçeklendirmesine izin verebilir.

CSS Yazı Örneği:

Metin yazısını ayarlamak
Bu örnek, metin yazısını nasıl ayarlandığını gösterir.
Yazı boyutunu ayarlamak
Bu örnek, yazı boyutunu nasıl ayarlandığını gösterir.
Yazı tarzını ayarlamak
Bu örnek, yazı tarzını nasıl ayarlandığını gösterir.
Yazı varyasyonunu ayarlamak
Bu örnek, yazı varyasyonunu nasıl ayarlandığını gösterir.
Yazı kalınlığını ayarlamak
Bu örnek, yazı kalınlığını nasıl ayarlandığını gösterir.
Tüm yazı özellikleri bir açıklamada
Bu örnek, kısaltma özelliklerini kullanarak yazı özelliklerini bir açıklamada nasıl ayarlandığını gösterir.

CSS Yazı Özellikleri

Özellik Açıklama
font Kısaltma özellikleri. Tüm yazı özelliklerini bir açıklamada ayarlamak için kullanılır.
font-family Yazı tipi serisini ayarlayın.
font-size Yazı tipinin boyutunu ayarlayın.
font-size-adjust İlk tercihi yazı tipi kullanılamadığında, değişken yazı tipini akıllıca ölçeklendirin. (CSS2.1 bu özelliği kaldırmıştır.)
font-stretch Yazıyı yatay olarak genişletin. (CSS2.1 bu özelliği kaldırmıştır.)
font-style Yazı tarzını ayarlayın.
font-variant Küçük büyük harfler veya normal yazı ile metin gösterin.
font-weight Yazı tipinin kalınlığını ayarlayın.