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?
serif
monospace
italic
italic
, font-style
için geçerli bir anahtar kelimedir, font-family
için geçerli değildir.sci-fi
fantasy
, font-family
için geçerli bir genel yedek.sans-serif
helvetica
"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-spacing
leading
baseline-distance
line-height
Kaynaklar
- 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.