Yazı Tipi Boyutu, Ağırlığı ve Stili
font-size ile metin boyutunu, font-weight ile ağırlığını ve font-style ile stilini denetleyin.
Yazı Tipi Boyutu, Ağırlığı ve Stili, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. 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-size
font-size, gliflerin yüksekliğini ayarlar. Herhangi bir uzunluk birimini kabul eder. Ölçeklenebilir ve erişilebilir tipografi için rem kullanılması önerilir.
<h1>Heading (2.5rem)</h1>
<p>Body text (1rem)</p>
<small>Fine print (0.75rem)</small>
Anahtar Sözcükle Belirtilen Yazı Tipi Boyutları
CSS ayrıca mutlak anahtar sözcük boyutları (xx-small ile xx-large arası) ve üst öğenin yazı tipi boyutuna göre belirlenen göreli anahtar sözcükler (smaller, larger) sağlar.
<p class="note">Smaller note text</p>
<p class="big">Extra large text</p>
font-weight
font-weight, metnin kalınlığını ayarlar. Sayısal değerleri (100'lük artışlarla 100–900 arası) veya anahtar sözcükleri kullanın:
<p class="thin">Thin weight (100)</p>
<p>Normal body weight (400) with <strong>bold strong text (700)</strong></p>
<p class="heavy">Heavy weight (900)</p>
font-weight ve Değişken Yazı Tipleri
Değişken yazı tiplerinde herhangi bir tam sayı kalınlık değeri (örneğin font-weight: 550) geçerlidir ve yazı tipi, tanımlanan eksenler arasında değerleri enterpolasyonla hesaplar. Bu, tipografi üzerinde ayrıntılı denetim sağlar.
font-style
font-style, italik ve eğik görüntülemeyi denetler:
<p>This has <em>italic emphasis</em> inline.</p>
<p class="normal">Normal style text</p>
<p class="oblique">Oblique 20deg text</p>
font-variant
font-variant, küçük büyük harfler gibi tipografik özellikleri etkinleştirir:
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> abbreviation uses small-caps.</p>
font Kısa Gösterimi
font kısa gösterimi; stil, varyant, kalınlık, boyut, satır yüksekliği ve aile değerlerini bir araya getirir:
<p>Shorthand font: italic bold 1.1rem/1.6 Roboto.</p>
Duyarlı Yazı Tipi Boyutu Ölçekleme
Minimum ve maksimum boyut arasında yumuşak biçimde ölçeklenen akışkan tipografi oluşturmak için clamp() kullanın:
<h1>Resize the window — this heading scales fluidly.</h1>
Okunabilirlik için line-height
line-height, satırlar arasındaki dikey aralığı ayarlar. Birimsiz değer (örneğin 1.5) önerilir; bu değer, alt öğelerin yazı tipi boyutuna göre ölçeklenir.
<h1>Tight Heading Line Height</h1>
<p>Body copy with relaxed 1.5 line-height wraps across multiple lines for comfortable reading, demonstrating the effect of the line-height property on paragraph text blocks.</p>
letter-spacing ve word-spacing
letter-spacing, karakterler arasına boşluk ekler; word-spacing ise sözcükler arasına boşluk ekler. Yazı tipi boyutuyla birlikte ölçeklenmeleri için em birimlerini kullanın.
<h2 class="heading">Spaced Out Heading Text</h2>
Erişilebilir Yazı Tipi Boyutlandırma
html veya body öğesinde font-size değerini hiçbir zaman px olarak ayarlamayın. Bu, tarayıcının kullanıcı tarafından belirlenen yazı tipi boyutu tercihini geçersiz kılar. Bunun yerine tarayıcı varsayılanını temel alan rem birimlerini kullanın.
Hızlı Kontrol
Hangi font-weight sayısal değeri bold anahtar sözcüğüne eşdeğerdir?
Özet
Kullanıcı tercihlerini dikkate almak için font-size değerinde rem kullanın. font-weight, 100–900 arasındaki değerleri veya anahtar sözcükleri kabul eder. font kısa gösterimi birden çok özelliği bir araya getirir. Akışkan tipografi için clamp(), tutarlı aralık için birimsiz line-height kullanın.
Sıkça Sorulan Sorular
“Yazı Tipi Boyutu, Ağırlığı ve Stili” dersi ücretsiz mi?
Evet — “Yazı Tipi Boyutu, Ağırlığı ve Stili” 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 Boyutu, Ağırlığı ve Stili” dersinde ne öğreneceğim?
font-size ile metin boyutunu, font-weight ile ağırlığını ve font-style ile stilini denetleyin. 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 2. dersidir.
“Yazı Tipi Boyutu, Ağırlığı ve Stili” 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
- Yazı Tipi Ailesi ve Web Güvenli Yazı Tipleri
- Yazı Tipi Boyutu, Ağırlığı ve Stili
- Metin Hizalama, Süsleme ve Aralıklandırma
- Google Fonts ve @font-face