0Pricing
CSS Academy · Ders

Yazı Tipi Ailesi ve Web Güvenli Yazı Tipleri

Yazı tipi ailelerini ayarlayın ve tüm tarayıcılarda güvenle kullanılabilecek yazı tiplerini anlayın.

Yazı Tipi Ailesi ve Web Güvenli Yazı Tipleri, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

font-family Özelliği

font-family özelliği, bir öğenin yazı tipini belirler. Bir yazı tipi yığını sağlarsınız: en çok tercih edilenden en aza doğru sıralanan, virgülle ayrılmış yazı tipi adları listesi; listenin sonunda genel bir aile bulunur.

<p>This text renders in the page's body font stack.</p>

Genel Yazı Tipi Aileleri

CSS, yedek seçenek olarak beş genel aile tanımlar:

  • serif — süslemeli çizgilere sahip yazı tipleri (Times, Georgia)
  • sans-serif — çizgileri olmayan sade yazı tipleri (Arial, Helvetica)
  • monospace — sabit genişlikli yazı tipleri (Courier, Consolas)
  • cursive — el yazısı tarzı yazı tipleri
  • fantasy — dekoratif görüntüleme yazı tipleri

Web Uyumlu Yazı Tipleri

Web uyumlu yazı tipleri, neredeyse tüm işletim sistemlerinde önceden yüklüdür. Harici bir yazı tipi dosyası yüklemeden bunlara güvenebilirsiniz:

  • Sans-serif: Arial, Helvetica, Verdana, Trebuchet MS
  • Serif: Georgia, Times New Roman
  • Monospace: Courier New, Consolas

Boşluk İçeren Yazı Tipi Adları

Boşluk içeren yazı tipi adları tırnak içine alınmalıdır:

<p class="serif-example">"Times New Roman", Times, serif</p>
<p class="sans-example">"Open Sans", sans-serif</p>

Yazı Tipi Yığınları İçin En İyi Uygulama

Yazı tipi yığınınızı şu şekilde oluşturun:

  1. Tercih ettiğiniz yazı tipi (yüklü olmayabilir)
  2. Bir veya iki benzer yedek seçenek
  3. Son çare olarak genel bir aile
<p class="font-stack">Georgia &rarr; Palatino Linotype &rarr; serif fallback</p>

Sistem Arayüzü Yazı Tipleri

Modern tasarımlarda çoğu zaman sistem yazı tipleri kullanılır — işletim sisteminin yerel arayüz yazı tipidir. Bu, yerel bir görünüm sağlar ve hiç indirme gerektirmez:

<p class="system-ui-text">This uses your OS's native UI font.</p>

Kod İçin Sabit Genişlikli Yığınlar

Kod düzenleyicileri ve terminallerin sabit genişlikli bir yazı tipi yığınına ihtiyacı vardır:

<p>Inline <code>const x = 1;</code> code.</p>
<pre>function hello() {
  return "world";
}</pre>

font-family Kalıtımı

Çoğu öğe font-family değerini üst öğesinden devralır. Bazı form öğeleri (<input>, <textarea>) bazı tarayıcılarda varsayılan olarak devralmaz; bu öğeleri açıkça ayarlayın:

<input type="text" placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
<select><option>Select</option></select>
<button>Button</button>

Kullanılabilir Yazı Tiplerini Denetleme

Bir sistem yazı tipinin kullanılabilir olup olmadığını @font-face içindeki local() işleviyle denetleyebilirsiniz. Tarayıcılar indirme yapmadan önce yerel yazı tipini dener.

<p class="my-font-text">Text using MyFont (local match or fallback)</p>

Unicode Aralığına Göre Alt Kümeleme

Yazı tiplerini yüklerken, yalnızca ihtiyaç duyduğunuz karakter aralıklarını yüklemek ve çok dilli sitelerde indirme boyutunu azaltmak için @font-face içinde unicode-range kullanın.

<p class="inter-text">Basic Latin text (U+0000&ndash;00FF range)</p>

Değişken Yazı Tiplerine Genel Bakış

Değişken yazı tipleri, yazı tipi değişim eksenlerini kullanarak tek bir dosyada bütün bir aileyi (kalınlıklar, genişlikler, stiller) barındırır. Tipografi açısından zengin tasarımlarda HTTP isteklerini büyük ölçüde azaltır.

Hızlı Kontrol

Sans-serif yazı tipi yığını için son yedek seçenek olarak hangi genel yazı tipi ailesini kullanmalısınız?

Özet

font-family özelliği, genel bir aileyle biten bir yazı tipi yığını alır. Web uyumlu yazı tipleri yükleme gerektirmeden her yerde çalışır. Sistem arayüzü yığınları, HTTP maliyeti olmadan yerel bir görünüm sağlar. Boşluk içeren yazı tipi adlarını her zaman tırnak içine alın.

Sıkça Sorulan Sorular

“Yazı Tipi Ailesi ve Web Güvenli Yazı Tipleri” dersi ücretsiz mi?

Evet — “Yazı Tipi Ailesi ve Web Güvenli Yazı Tipleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Yazı Tipi Ailesi ve Web Güvenli Yazı Tipleri” dersinde ne öğreneceğim?

Yazı tipi ailelerini ayarlayın ve tüm tarayıcılarda güvenle kullanılabilecek yazı tiplerini anlayın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Yazı Tipi Ailesi ve Web Güvenli Yazı Tipleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Yazı Tipi Ailesi ve Web Güvenli Yazı Tipleri
  2. Yazı Tipi Boyutu, Ağırlığı ve Stili
  3. Metin Hizalama, Süsleme ve Aralıklandırma
  4. Google Fonts ve @font-face
← CSS Academy Sayfasına Dön