Metin ve yazı

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ı metin oluşturacağından, metninize stil eklemek faydalı olacaktır. Birkaç temel özelliği değiştirerek kullanıcılarınız için 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üklenmiş 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
İnme metriğini ayarlayarak referans çizginin 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 açı aralıklarını destekleyen yazı tipi stilini tanımlar.
font-weight
Yazı tipinin ağırlığını veya kullanılabilen 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 sağlar.
line-gap-override
Yazı tipinin varsayılan satır aralığını geçersiz kılar.
size-adjust
Yazı tipinin ana hatlarına ve metriklerine bir ölçeklendirme faktörü uygular.
src
Yerel veya uzak olup olmadığına bakılmaksızın 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, tasarımcıların özel yazı tipleri kullanmasına olanak tanıyarak "web'de kullanıma uygun" yazı tiplerinin kısıtlamalarından kurtulmasını sağlar. 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 Açık Yazı Tipi Biçimi font/woff
Web Open Font Format 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ı tipini nereye indireceğini, yükleme sırasında nasıl gösterileceğini (font-display mülkü ile) ve hangi karakter alt kümesinin indirileceğini (unicode-range ile) belirtir.

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

Özetlemek gerekirse @font-face bir yazı tipi tanımlar ve ona bir ad verir, font-family ise bu tanımlanmış 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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Metninizin yazı tipini değiştirmek için font-family simgesini kullanın.

font-family mülkü, belirli veya genel yazı tipi ailelerine atıfta bulunan, virgülle ayrılmış bir dize listesi kabul eder. Belirli yazı tipi aileleri tırnak içine alınmış dizelerdir (ör. "Helvetica", "EB Garamond" veya "Times New Roman"). 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österir.

font-family kullanırken, kullanıcının tarayıcısında tercih ettiğiniz yazı tipleri bulunmaması ihtimaline karşı 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ılıyorsa yedek yazı tipi sans-serif olmalıdır.

Eğik ve eğik yazı tipleri kullanma

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Metnin italik olup olmayacağını ayarlamak için font-style simgesini kullanın. font-style, aşağıdaki anahtar kelimelerden birini kabul eder: normal, italic ve oblique.

Metni kalın yapma

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Metnin "kalınlığını" ayarlamak için font-weight simgesini kullanın. Bu özellik anahtar kelime değerlerini (normal, bold), göreli anahtar kelime değerlerini (lighter, bolder) ve sayısal değerleri (100 ile 900 arasında) kabul eder.

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 kullanışlı bir grafik için MDN'nin Göreceli Ağırlıkların Anlamı başlıklı makalesine bakın.

Metnin boyutunu değiştirme

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Metin öğelerinizin boyutunu kontrol etmek için font-size öğesini kullanın. Bu mülk, uzunluk değerlerini, yüzdeleri ve birkaç anahtar kelime değerini kabul eder.

font-size, uzunluk ve yüzde değerlerine ek olarak bazı mutlak anahtar kelime değerlerini (xx-small, x-small, small, medium, large, x-large, xx-large) ve birkaç göreceli anahtar kelime değerini (smaller, larger) kabul eder. Göreceli değerler, üst öğenin font-size değerine göredir.

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Bir öğedeki her satırın yüksekliğini belirtmek için line-height öğesini kullanın. Bu mülk sayı, uzunluk, yüzde veya normal anahtar kelimesini kabul eder. Genellikle, devralmayla ilgili sorunları önlemek için uzunluk veya yüzde yerine bir sayı kullanılması önerilir.

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Metninizdeki karakterler arasındaki yatay alan miktarını kontrol etmek için letter-spacing simgesini kullanın. Bu özellik, em, px ve rem gibi uzunluk değerlerini kabul eder.

Belirtilen değerin, karakterler arasındaki doğal boşluk miktarını artırdığını unutmayın. Aşağıdaki demoda, posta kutusunun boyutunu ve letter-spacing ile nasıl değiştiğini görmek için tek bir mektup seçmeyi deneyin.

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Metninizdeki her kelimenin arasındaki boşluk uzunluğunu artırmak veya azaltmak için word-spacing simgesini kullanın. Bu özellik, em, px ve rem gibi uzunluk değerlerini kabul eder. Belirttiğiniz uzunluğun, normal boşluklara ek olarak ek boşluk için olduğunu unutmayın. Bu, word-spacing: 0'ün word-spacing: normal ile eşdeğer olduğu anlamına gelir.

font kısaltma

Yazı tipiyle ilgili birçok özelliği aynı anda ayarlamak için kısaltma font özelliğini kullanabilirsiniz. Olası özellikler şunlardır: font-family, font-size, font-stretch, font-style, font-variant, font-weight ve line-height.

Bu özelliklerin nasıl sıralanacağına dair ayrıntılar için MDN'nin font makalesine göz atın.

Metinde büyük/küçük harf kullanımını değiştirme

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Temel HTML'yi değiştirmenize gerek kalmadan metninizin büyük harf kullanımını değiştirmek için text-transform öğesini kullanın. Bu özellik aşağıdaki anahtar kelime değerlerini kabul eder: uppercase, lowercase ve capitalize.

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Metninize satır eklemek için text-decoration simgesini kullanın. Alt çizgiler en yaygın olarak kullanılan yöntemdir ancak metninizin üzerine veya içine çizgi ekleyebilirsiniz.

text-decoration mülkü, aşağıda ayrıntılı olarak açıklanan daha spesifik mülkler için kısaltmadır.

text-decoration-line mülkü underline, overline ve line-through anahtar kelimelerini kabul eder. Birden fazla satır için birden fazla anahtar kelime de belirtebilirsiniz.

text-decoration-color mülkü, 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 mülkü tüm uzunluk değerlerini kabul eder ve text-decoration-line'dan itibaren tüm süslemelerin çizgi genişliğini ayarlar.

text-decoration mülkü, yukarıdaki tüm mülkler için kısa bir ifadedir.

Metninize girinti ekleme

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Metin bloklarınıza girinti eklemek için text-indent simgesini kullanın. Bu mülk, bir uzunluk (ör. 10px, 2em) veya kapsayıcı bloğun genişliğinin yüzdesini alır.

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3.

Source

Gizli içeriğin nasıl temsil edileceğini belirtmek için text-overflow öğesini kullanın. İki seçenek vardır: Metni taşma noktasında kısaltan clip (varsayılan) ve taşma noktasında üç nokta (…) gösteren ellipsis.

Boşlukları kontrol etme

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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'deki white-space makalesine göz atın.

white-space: pre, ASCII resimleri veya dikkatlice girintili kod blokları oluşturmak için yararlı olabilir.

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

Source

Satırı aştığında kelimelerin nasıl "bölüneceğini" değiştirmek için word-break simgesini kullanın. Tarayıcı varsayılan olarak kelimeleri bölemez. word-break için break-all anahtar kelime değeri kullanıldığında tarayıcı, gerekirse kelimeleri tek tek karakterlere ayırma talimatı alır.

Metin hizalamasını değiştirme

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Bir blok veya tablo hücresi öğesindeki metnin yatay hizalamasını belirtmek için text-align öğesini kullanın. Bu özellik, 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ına hizalar.

Mevcut yazma modunda bir metin satırının başlangıç ve bitiş konumunu temsil etmek için start ve end karakterlerini kullanın. Bu nedenle start, İngilizcede left ile, sağdan sola (RTL) yazılan Arap alfabesinde ise right ile eşlenir. Bunlar mantıksal hizalamalardır. Mantıksal özellikler modülümüzde daha fazla bilgi edinebilirsiniz.

Metni bloğun ortasına hizalamak için center simgesini kullanın.

justify değeri, metni düzenler ve kelime aralığını otomatik olarak değiştirir. Böylece metin, bloğun hem sol hem de sağ kenarıyla hizalanır.

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

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Metninizin yönünü ayarlamak için direction simgesini kullanın. ltr (soldan sağa, varsayılan) veya rtl (sağdan sola) seçeneklerinden birini belirleyin. Arapça, İbranice veya Farsça gibi bazı diller sağdan sola yazılır. Bu nedenle direction: rtl kullanılmalıdır. İngilizce ve soldan sağa diğer tüm diller için direction: ltr kullanın.

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

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

Metnin akış şeklini ve düzenlenme şeklini değiştirmek için writing-mode simgesini kullanın. Varsayılan değer horizontal-tb'tür ancak yatay olarak akmasını istediğiniz metinler için writing-mode'yi vertical-lr veya vertical-rl olarak da ayarlayabilirsiniz.

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

Browser Support

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 14.

Source

Metninizdeki karakterlerin yönünü belirtmek için text-orientation simgesini kullanın. Bu özellik için geçerli değerler mixed ve upright'tır. Bu özellik yalnızca writing-mode horizontal-tb dışında bir değere ayarlandığında geçerlidir.

Metne gölge ekleme

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

Metninize gölge eklemek için text-shadow simgesini kullanın. Bu özellik üç uzunluk (x-offset, y-offset ve blur-radius) ve bir renk bekler.

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

Genellikle "normal" yazı tipleri, 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.

Genişlik ve Ağırlık'ın rastgele kombinasyonlarında Roboto Flex

Daha fazla bilgi için değişken yazı tipleri hakkındaki makalemizi inceleyin.

Sözde öğeler

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

::first-letter ve ::first-line sözde öğeleri, bir metin öğesinin sırasıyla ilk harfini ve ilk satırını hedefler.

::selection sözde öğe

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 1.1.

Source

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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'dir. Kullanımıyla ilgili daha fazla ayrıntı için her mülkün bağlantılarına göz atın.

Öğrendiklerinizi test etme

Web'de yazımla ilgili bilginizi test edin

Aşağıdaki anahtar kelimelerden hangisi font-family genel yedek olarak kullanılabilir?

monospace
italic
sci-fi
sans-serif
serif
helvetica

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.

font-variant: capitalize;
text-case: capitalize;
text-transform: capitalize;
font-style: capitals;
text-capitalize: true;

Doğru veya Yanlış: Metni sola, sağa veya ortalamak için text-orientation simgesini kullanın.

Yanlış
Doğru

Metin satırları arasındaki boşluğu değiştirmek için hangi CSS mülkü kullanılabilir?

leading
baseline-distance
line-height
line-spacing

Kaynaklar