Google I/O'ya katıldığınız için teşekkürler! İçerikleri isteğe bağlı olarak izleyin.

Bu sayfa, Cloud Translation API ile çevrilmiştir.

Metin ve yazı

The CSS Podcast - 036: Text & Typography

Metin, web'in temel yapı taşlarından biridir.

Web sitesi oluştururken metninize stil uygulamanız gerekmez. HTML'de oldukça makul varsayılan stiller bulunur.

Ancak web sitenizin büyük bir kısmını metinler oluşturacağından, sitenizi daha ilgi çekici hale getirmek için metinlere stil eklemeniz faydalı olacaktır. Birkaç temel özelliği değiştirerek kullanıcılarınızın okuma deneyimini önemli ölçüde iyileştirebilirsiniz!

Bu modülde, web sayfalarınıza özel yazı tipleri içe aktarmanıza olanak tanıyan @font-face kuralıyla başlayacağız. Bu sayede, kullanıcı tarafından yüklenen yazı tiplerinden bağımsız olarak ihtiyacınız olan yazı tipine sahip olursunuz.

Ardından font-family, font-style, font-weight ve font-size gibi temel CSS yazı tipi özelliklerini ele alacağız. Bu temel bilgiler, metni hem stil hem de okunabilirlik açısından değiştirmek için zemin hazırlar.

Ayrıca, text-indent ve word-spacing gibi paragrafa özgü özelliklere de değineceğiz. Son olarak, değişken yazı tipleri ve sözde öğeler gibi ileri seviye konulara geçerek yazım denetiminizi daha da hassaslaştıracağız.

Bu CSS tekniklerini anlamanızı ve uygulamanızı sağlamak için pratik örnekler ve ipuçları sağlanacaktır.

`@font-face` kuralı

@font-face CSS at-kuralı, web tasarımında metin görüntülemek için özel yazı tipleri belirtmenize ve kullanmanıza olanak tanır. @font-face'ün en iyi özelliği çok yönlülüğüdür: Yazı tiplerini uzak bir sunucudan veya kullanıcının cihazına yüklenen bir yazı tipinden almanıza olanak tanır.

Söz dizimi

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

Tanımlayıcılar

ascent-override: Yükseliş metriğini özelleştirerek referans değerin üzerindeki alanı etkiler.
descent-override: İniş metriğini ayarlayarak referans değerin altındaki alanı etkiler.
font-display: Yazı tipinin indirme durumuna bağlı olarak yazı tipinin görüntüleme davranışını kontrol eder.
font-family: Yazı tipini, yazı tipiyle ilgili özelliklerde kullanılmak üzere adlandırır.
font-stretch: Kabul edilebilir yatay ölçeği tek bir değer veya aralık olarak belirtir.
font-style: Eğik stiller için destekleyici açı aralıklarının yanı sıra yazı tipi stilini tanımlar.
font-weight: Yazı tipinin ağırlığını veya kullanılabilir ağırlık aralığını belirler.
font-feature-settings: OpenType yazı tipi özelliklerine erişimi sağlar.
font-variation-settings: Değişken yazı tipi ayarları üzerinde hassas kontrol olanağı sunar.
line-gap-override: Yazı tipinin varsayılan satır aralığını geçersiz kılar.
size-adjust: Yazı tipinin dış hatlarına ve metriklerine ölçeklendirme faktörü uygular.
src: Yerel veya uzak yazı tipi kaynağını tanımlar. Bu, @font-face kuralı için gereklidir. url() ve local()'yi src içinde birleştirmek, varsa yerel bir yazı tipini kullanan ve yedek olarak uzak bir yazı tipi dosyasına geri dönen yaygın bir stratejidir. Tarayıcılar, kaynakların önceliğini beyan sırasına göre belirler. Bu nedenle, local() genellikle url()'den önce gelmelidir.
unicode-range: Bu yazı tipinin kullanılması gereken karakterleri sınırlar.

Açıklama

@font-face, özel tipografi kullanmalarını sağlayarak tasarımcıları "web için güvenli" yazı tiplerinin kısıtlamalarından kurtarır. local() işlevinin kullanıcının cihazında yazı tipi arama özelliği, internet bağlantısına bağlı olmayan sorunsuz bir deneyim sunar.

Yazı tipi MIME türleri

Biçim	MIME Türü
TrueType	`font/ttf`
OpenType	`font/otf`
Web Open Yazı Tipi Biçimi	`font/woff`
Web Open Yazı Tipi Biçimi 2	`font/woff2`

@font-face ve font-family arasındaki fark

CSS'de @font-face ve font-family genellikle birbirine karıştırılır ancak farklı amaçlara hizmet eder.

Daha önce de belirttiğimiz gibi @font-face, web uygulamanızda kullanmak istediğiniz özel yazı tiplerini tanımlamak için kullanılan bir kuraldır. Tarayıcıya yazı tipinin nereye indirileceğini, yükleme sırasında nasıl gösterileceğini (font-display mülkü ile) bildirir ve hangi karakter alt kümesinin indirileceğini belirtir (unicode-range ile).

Buna karşılık font-family, bir öğeye belirli bir yazı tipini veya yazı tipi listesini atamak için CSS kuralında kullanılan bir CSS özelliğidir. font-family altında listelenen yazı tipleri web'de güvenli yazı tipleri, sistem yazı tipleri veya @font-face ile tanımlanan özel yazı tipleri olabilir.

Özetlemek gerekirse, @font-face bir yazı tipi tanımlayıp bu yazı tipine bir ad verir. font-family, bildirilen bu yazı tipini HTML öğelerine uygular.

Her ikisini de kullanan bir örneği aşağıda bulabilirsiniz:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

Bu örnekte @font-face, "ÖzelYazı"yı tanımlar ve tarayıcıya nerede bulacağını söyler. font-family özelliği, "CustomFont" kullanılamıyorsa yedek olarak Arial'ı kullanarak bu değeri body öğesine uygular.

Yazı tipini değiştirme

Tarayıcı desteği

Metin ve yazı

The CSS Podcast - 036: Text & Typography

@font-face kuralı

Söz dizimi

Tanımlayıcılar

Açıklama

Yazı tipi MIME türleri

@font-face ve font-family arasındaki fark

Yazı tipini değiştirme

Eğik ve eğik yazı tipleri kullanma

Metni kalın yap

Metnin boyutunu değiştirme

Satır aralığını değiştirme

Karakterler arasındaki boşluğu değiştirme

Kelimeler arasındaki boşluğu değiştirme

font kısaltma

Metindeki küçük/büyük harf düzenini değiştir

Metne alt çizgi, üst çizgi ve kesik çizgi ekleme

Metninize girinti ekleme

Taşkın veya gizli içeriklerle ilgili sorunları giderme

Boşlukları kontrol etme

Kelimelerin nasıl bölüneceğini kontrol etme

Metin hizalamasını değiştirme

Metnin yönünü değiştirme

Metnin akışını değiştirme

Metnin yönünü değiştirme

Metne gölge ekleme

Değişken yazı tipleri

Sözde öğeler

::first-letter ve ::first-line sözde öğeleri

::selection sözde öğe

font-variant

Öğrendiklerinizi test etme

Kaynaklar

`@font-face` kuralı

`font` kısaltma

`::first-letter` ve `::first-line` sözde öğeleri

`::selection` sözde öğe