CSS Podcast - 036: Metin ve Yazı
Metin, web'in temel yapı taşlarından biridir.
Bir web sitesi hazırlarken metninizin stilini ayarlamanız gerekmez. HTML aslında makul bir varsayılan stile sahiptir.
Ancak metin büyük olasılıkla web sitenizin büyük çoğunluğunu oluşturacağından, metni renklendirmek için stil eklemek yararlı 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 font-family, font-style, font-weight ve font-size gibi bazı temel CSS yazı tipi özelliklerine göz atacağız. Ardından, metin paragraflarını etkileyen text-indent ve word-spacing gibi özellikleri inceleyeceğiz. Modül, değişken yazı tipleri ve sözde öğeler gibi daha gelişmiş konularla sonlanır.
Yazı tipini değiştirme
Metninizin yazı tipini değiştirmek için font-family simgesini kullanın.
font-family özelliği, belirli veya genel yazı tipi ailelerine başvuruda bulunan, virgülle ayrılmış dize listesini kabul eder. Belirli yazı tipi aileleri "Helvetica", "EB Garamond" veya "Times New Roman" gibi tırnak içine alınmış dizelerdir. Genel yazı tipi aileleri serif, sans-serif ve monospace gibi anahtar kelimelerdir (seçeneklerin tam listesini MDN'de bulabilirsiniz). Tarayıcı sağlanan listedeki ilk kullanılabilir yazı tipini görüntüler.
font-family kullanırken, kullanıcının tarayıcısında tercih ettiğiniz yazı tiplerinin bulunmadığı durumlar için en az bir genel yazı tipi ailesi belirtmeniz gerekir. Genel olarak, yedek genel yazı tipi ailesi tercih ettiğiniz yazı tiplerine benzer olmalıdır: font-family: "Helvetica" (sans-serif yazı tipi ailesi) kullanıyorsanız yedeğiniz sans-serif olmalıdır.
İtalik ve eğik yazı tipleri kullanma
Metnin italik olup olmayacağını ayarlamak için font-style simgesini kullanın. font-style şu anahtar kelimelerden birini kabul eder: normal, italic ve oblique.
Metni kalın yap
Metnin "kalınlığını" ayarlamak için font-weight simgesini kullanın. Bu mülkte anahtar kelime değerleri (normal, bold), göreli anahtar kelime değerleri (lighter, bolder) ve sayısal değerler (100 - 900) kabul edilir.
normal ve bold anahtar kelimeleri, sırasıyla 400 ve 700 sayısal değerlerine eşdeğerdir.
lighter ve bolder anahtar kelimeleri üst öğeye göre hesaplanır. Bu değerin nasıl belirlendiğini gösteren pratik bir grafik için MDN Göreli Ağırlıkların Anlamı'na bakın.
Metin boyutunu değiştirme
Metin öğelerinizin boyutunu kontrol etmek için font-size aracını kullanın. Bu özellik, uzunluk değerlerini, yüzdeleri ve bir dizi anahtar kelime değerini kabul eder.
Uzunluk ve yüzde değerlerinin yanı sıra font-size, bazı mutlak anahtar kelime değerlerini (xx-small, x-small, small, medium, large, x-large, xx-large) ve birkaç göreli anahtar kelime değerini (smaller, larger) kabul eder. Göreli değerler üst öğenin font-size değerine bağlıdır.
Satırlar arasındaki boşluğu değiştirme
Bir öğedeki her satırın yüksekliğini belirtmek için line-height değerini kullanın. Bu mülkte bir sayı, uzunluk, yüzde veya normal anahtar kelimesi kabul edilir. Devralmayla ilgili sorunları önlemek için genellikle uzunluk veya yüzde yerine bir sayı kullanılması önerilir.
Karakterler arasındaki boşluğu değiştirme
Metninizdeki karakterler arasındaki yatay alan miktarını kontrol etmek için letter-spacing simgesini kullanın. Bu mülk em, px ve rem gibi uzunluk değerlerini kabul eder.
Belirtilen değerin, karakterler arasındaki doğal alan miktarını artırdığını unutmayın. Aşağıdaki demoda sinemaskop boyutunu ve letter-spacing ile nasıl değiştiğini görmek için tek bir harf seçmeyi deneyin.
Kelimeler arasındaki boşluğu değiştirme
Metninizdeki her kelime arasındaki boşluk uzunluğunu artırmak veya azaltmak için word-spacing simgesini kullanın. Bu mülk em, px ve rem gibi uzunluk değerlerini kabul eder. Belirttiğiniz uzunluğun, normal boşluğa ek olarak ek boşluk için olduğunu unutmayın. Bu durumda word-spacing: 0, word-spacing: normal ile eşdeğerdir.
font stenosu
Yazı tipiyle ilgili birçok özelliği tek seferde ayarlamak için font kısaltma özelliğini kullanabilirsiniz. Olası özelliklerin listesi şunlardır: font-family, font-size, font-stretch, font-style, font-variant, font-weight ve line-height.
Bu tesislerin sıralanmasıyla ilgili ayrıntılar için MDN'nin font makalesini inceleyin.
Metinde büyük/küçük harf kullanımını değiştirme
Temel HTML'yi değiştirmenize gerek kalmadan metninizdeki büyük harf kullanımını değiştirmek için text-transform kullanın. Bu mülk şu anahtar kelime değerlerini kabul eder: uppercase, lowercase ve capitalize.
Metne alt çizgi, üst çizgi ve üst çizgi ekleme
Metninize satır eklemek için text-decoration simgesini kullanın. Altı çizili en yaygın kullanılanıdır, ancak metninizin üst kısmına veya doğrudan içine satırlar eklemek mümkündür.
text-decoration özelliği, aşağıda ayrıntıları verilen daha spesifik özelliklerin kısaltmasıdır.
text-decoration-line mülkü underline, overline ve line-through anahtar kelimelerini kabul eder. Birden çok satır için birden çok anahtar kelime de belirtebilirsiniz.
text-decoration-color özelliği, text-decoration-line öğesindeki tüm süslemelerin rengini ayarlar.
text-decoration-style mülkü solid, double, dotted, dashed ve wavy anahtar kelimelerini kabul eder.
text-decoration-thickness özelliği, tüm uzunluk değerlerini kabul eder ve text-decoration-line öğesindeki tüm süslemelerin çizgi genişliğini ayarlar.
text-decoration özelliği, yukarıdaki tüm özelliklerin bir kısaltmasıdır.
Metninize girinti ekleme
Metin bloklarınıza girinti eklemek için text-indent simgesini kullanın. Bu özellik, uzunluğunu (örneğin, 10px, 2em) veya kapsayıcı bloğun genişliğinin belirli bir yüzdesini alır.
Taşan veya gizli içerikle baş etme
Gizli içeriğin nasıl gösterildiğini belirtmek için text-overflow değerini kullanın. İki seçenek vardır: Taşma noktasında metni kesen clip (varsayılan) ve taşma noktasında üç nokta (...) görüntüleyen ellipsis.
Boşlukları kontrol et
white-space özelliği, bir öğedeki boşlukların nasıl ele alınacağını belirtmek için kullanılır. Daha fazla bilgi için MDN ile ilgili white-space makalesine göz atın.
white-space: pre, ASCII art veya dikkatlice girintilendirilmiş kod blokları oluşturmak için yararlı olabilir.
Kelimelerin nasıl bölüneceğini kontrol etme
Kelimelerin satırdan taşacakları zaman nasıl "bozulacağını" değiştirmek için word-break değerini kullanın. Varsayılan olarak tarayıcı kelimeleri bölmez. word-break için break-all anahtar kelime değerinin kullanılması, tarayıcıya kelimeleri gerekirse ayrı karakterlerde bölme talimatı verir.
Metin hizalamasını değiştirme
Bir blok veya tablo hücresi öğesindeki metnin yatay hizalamasını belirtmek için text-align kullanın. Bu mülk left, right, start, end, center, justify ve match-parent anahtar kelime değerlerini kabul eder.
left ve right değerleri, metni sırasıyla bloğun sol ve sağ taraflarıyla hizalar.
Mevcut yazma modunda bir metin satırının başlangıç ve bitiş konumunu göstermek için start ve end kullanın. Bu nedenle start, İngilizcede left ile, sağdan sola yazılmış (RTL) Arapçada ise right ile eşlenir. Bunlar mantıksal hizalamalardır. Daha fazla bilgiyi mantıksal özellikler modülünde bulabilirsiniz.
Metni bloğun ortasına hizalamak için center tuşunu kullanın.
justify değeri, metni düzenler ve kelime aralıklarını otomatik olarak değiştirir. Böylece metin, bloğun hem sol hem de sağ kenarlarıyla hizalanır.
Metnin yönünü değiştirme
Metninizin yönünü ayarlamak için ltr (soldan sağa, varsayılan) veya rtl (sağdan sola) direction simgesini kullanın. Arapça, İbranice veya Farsça gibi bazı diller sağdan sola yazıldığından direction: rtl kullanılmalıdır. İngilizce ve soldan sağa diğer tüm diller için direction: ltr değerini kullanın.
Metin akışını değiştirme
Metnin akış ve düzenlenme şeklini değiştirmek için writing-mode simgesini kullanın. Varsayılan değer horizontal-tb'dir, ancak yatay olarak aktarmak istediğiniz metin için writing-mode değerini vertical-lr veya vertical-rl olarak da ayarlayabilirsiniz.
Metnin yönünü değiştirme
Metninizdeki karakterlerin yönünü belirtmek için text-orientation simgesini kullanın. Bu özellik için geçerli değerler mixed ve upright şeklindedir. Bu özellik yalnızca writing-mode, horizontal-tb dışında bir değere ayarlandığında geçerlidir.
Metne gölge ekleme
Metninize gölge eklemek için text-shadow simgesini kullanın. Bu özellikte üç uzunluk (x-offset, y-offset ve blur-radius) ve bir renk olması gerekir.
Daha fazla bilgi edinmek için Gölgeler ile ilgili modülümüzün text-shadow bölümüne göz atın.
Değişken yazı tipleri
“Normal” yazı tipleri genellikle yazı tipinin farklı sürümleri (ör. kalın, italik veya sıkıştırılmış) için farklı dosyaların içe aktarılmasını gerektirir. Değişken yazı tipleri, tek bir dosyada bir yazı tipinin birçok farklı varyantını içerebilen yazı tipleridir.
Daha fazla ayrıntı için Değişken Yazı Tipleri ile ilgili makalemize göz atın.
Sözde-öğeler
::first-letter ve ::first-line sözde öğe
::first-letter ve ::first-line sözde öğeleri, sırasıyla bir metin öğesinin ilk harfini ve ilk satırını hedefler.
::selection sözde öğe
Kullanıcı tarafından seçilen metnin görünümünü değiştirmek için ::selection sözde öğesini kullanın.
Bu sözde öğe kullanılırken yalnızca belirli CSS özellikleri kullanılabilir: color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.
font-variant
font-variant özelliği, small-caps ve slashed-zero gibi yazı tipi varyantlarını seçmenize olanak tanıyan çeşitli CSS özelliklerinin kısaltmasıdır. Bu kısaltmanın içerdiği CSS özellikleri: font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures ve font-variant-numeric. Kullanımıyla ilgili daha fazla ayrıntı için her bir mülkteki bağlantılara göz atın.
Öğrendiklerinizi sınayın
Web'de tipografiyle ilgili bilginizi test edin
Aşağıdaki anahtar kelimelerden hangisi genel yedek olarak font-family kullanılabilir?
serifmonospaceitalicitalic, font-style için geçerli bir anahtar kelimedir, font-family için geçerli değildir.sci-fifantasy, font-family için geçerli bir genel yedek.sans-serifhelvetica"Helvetica", genel bir anahtar kelime değil, belirli bir yazı tipi ailesini ifade ediyor.Her kelimenin ilk harfini büyük harfe dönüştürmek için hangi ifade kullanılır? ör. This is a sentence. ➡ This Is A Sentence.
text-capitalize: true;text-case: capitalize;text-transform: capitalize;font-style: capitals;font-variant: capitalize;Doğru/Yanlış: Metni sola, sağa veya ortaya hizalamak için text-orientation kullanın.
text-orientation bir satırdaki harflerin yönünü değiştirir.text-orientation bir satırdaki harflerin yönünü değiştirir. Metni sola, sağa veya ortaya (ve daha fazlasına!) hizalamak için text-align tuşunu kullanın.Metin satırları arasındaki boşluğu değiştirmek için hangi CSS özelliği kullanılabilir?
line-spacingleadingbaseline-distanceline-heightKaynaklar
- Yazı tipi en iyi uygulamaları yazı tiplerini içe aktarma, yazı tiplerini oluşturma ve yazı tiplerini web'de kullanmaya yönelik diğer en iyi uygulamaları ele alır.
- MDN Temel metin ve yazı tipi stili.