Yazı tipi boyutu - CSS Hileleri

font-sizeMülkiyet tipi boyutunu veya yüksekliğini belirtir. font-sizeyalnızca uygulandığı yazı tipini etkilemekle kalmaz, aynı zamanda em, rem ve ex uzunluk birimlerinin değerini hesaplamak için de kullanılır.

p ( font-size: 20px; )

font-sizeanahtar kelimeleri, uzunluk birimlerini veya yüzdeleri değer olarak kabul edebilir. Bununla birlikte, fontstenografi özelliğinin bir parçası olarak ilan edildiğinde font-sizezorunlu bir değer olduğuna dikkat etmek önemlidir . Stenoya dahil edilmemişse, satırın tamamı yok sayılır.

Uygulanan uzunluk değerleri (ör. Px, em, rem, ex, vb.) font-sizeNegatif olamaz.

Mutlak anahtar kelimeler ve değerler

.element ( font-size: small; )

Aşağıdaki mutlak anahtar kelime değerlerini kabul eder:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Bu mutlak değerler, tarayıcı tarafından hesaplandığı şekliyle belirli yazı tipi boyutlarıyla eşleştirilir. Ancak, ana öğenin yazı tipi boyutuna göre iki anahtar sözcük değeri de kullanabilirsiniz.

Diğer mutlak değerler arasında mm(milimetre), cm(santimetre), in(inç), pt(nokta) ve pc(pikalar) bulunur. Bir nokta 1/72 inç'e eşitken bir pika 12 noktaya eşittir - bu değerler tipik olarak basılı belgeler için kullanılır.

Göreli anahtar kelimeler

.element ( font-size: larger; )

• larger
• smaller

Örneğin, ana elemanın yazı tipi boyutu ise small, tanımlanmış göreceli boyutu olan bir alt eleman larger, yazı tipi boyutunu mediumalt eleman için eşit hale getirecektir .

Yüzde değerleri

.element ( font-size: 110%; )

Yazı tipi boyutunu% 110 olarak ayarlamak gibi yüzde değerleri, aşağıdaki demoda gösterildiği gibi ana öğenin yazı tipi boyutuna da bağlıdır:

CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem qdbELL'e bakın.

Em ünitesi

.element ( font-size: 2em; )

Em birimi, ana öğenin yazı tipi boyutunun hesaplanan değerine dayalı göreceli bir birimdir. Bu, alt öğelerin yazı tipi boyutlarını ayarlamak için her zaman üst öğelerine bağımlı oldukları anlamına gelir. Örneğin:

 
This is a heading
This is some text.

.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )

Yukarıdaki örnekte, paragrafın yazı tipi boyutu 16px olacaktır çünkü 1 x 16 = 16px, başlık ise 2 x 16 = 32px olduğu için 32px olacaktır. Ana öğenin yazı tipi boyutuna bağlı olarak yazıyı ölçeklendirmenin birçok avantajı vardır, yani öğeleri bir kap içinde sarabilir ve tüm alt öğelerin her zaman birbirine göre olacağını biliriz:

CodePen'de em biriminin CSS-Tricks (@ css-tricks) ile nasıl çalıştığını anlamaya bakın.

Rem ünitesi

Bununla birlikte, rem birimleri durumunda, yazı tipi boyutu kök öğenin (veya htmlöğenin) değerine bağlıdır .

html ( font-size: 16px; ) p ( font-size: 1.5rem; )

Yukarıdaki örnekte, rem birimi 16px'e eşittir (çünkü html/ root öğesinden miras alınmıştır ) ve bu nedenle tüm paragraf öğeleri için yazı tipi boyutu 24px (1.5 x 16 = 24) olarak hesaplanacaktır. Em birimlerinden farklı olarak paragraf, kökün yanı sıra tüm üst öğelerinin stilini göz ardı eder.

Bu birim aşağıdaki tarayıcılar tarafından desteklenmektedir:

Krom	Safari	Firefox	Opera	IE	Android	iOS
İşler	İşler	İşler	İşler	10+	İşler	İşler

Eski birim

.element ( font-size: 20ex; )

Eski birimler için, 1ex, kök öğenin küçük harfli x harfinin hesaplanan yüksekliğine eşit olacaktır. Dolayısıyla, aşağıdaki örnekte htmlöğe olarak ayarlanmıştır 20pxve diğer tüm yazı tipi boyutları, söz konusu yazı tipinin x yüksekliğiyle belirlenir.

CodePen'de eski birimin CSS-Tricks (@ css-tricks) ile nasıl çalıştığını anlamaya bakın.

Diğer yazı tipi boyutlarının nasıl değiştiğini görmek font-familyiçin htmlöğenin üzerinde olanı değiştirmemin üzerindeki demoyu deneyin .

Görüntü alanı birimleri

.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )

Gibi Görünüm birimleri, vwve vhgörünüm boyutlarına bir eleman nisbetle yazı tipi boyutunu belirlemek:

• 1vw = görüntü alanı genişliğinin% 1'i
• 1vh = görüntü alanı yüksekliğinin% 1'i

Öyleyse aşağıdaki örneği ele alırsak:

.element ( font-size: 100vh; )

Daha sonra bu, öğenin yazı tipi boyutunun her zaman görüntü alanının yüksekliğinin% 100'ü olması gerektiğini belirtir (50vh% 50, 15vh% 15 vb. Olur). Aşağıdaki demoda, yazı tipini izlemek için örneğin yüksekliğini yeniden boyutlandırmayı deneyin:

CodePen'de CSS-Tricks (@ css-tricks) tarafından vh birimleriyle Kalem Boyutlandırma türüne bakın.

vw birimler, harf biçimlerinin yüksekliğini görüntü alanının genişliğine göre ayarlaması bakımından farklıdır, bu nedenle aşağıdaki demoda bu değişiklikleri görmek için tarayıcı penceresini yatay olarak yeniden boyutlandırmanız gerekir:

CodePen'de CSS-Tricks (@ css-tricks) tarafından vw birimleriyle Kalem Boyutlandırma türüne bakın.

Bu birimler aşağıdaki tarayıcılar tarafından desteklenmektedir:

Krom	Safari	Firefox	Opera	IE	Android	iOS
31+	7+	31+	27+	9+	4.4+	7.1+

Başka iki görüntü alanı birimi olduğunu unutmamak önemlidir: vminve vmax. İlk değerlerini bulacaksınız vhve vwve iken iki küçük olarak font-boyutunu belirlemek vmaxbu iki değerin büyük için setler font-size.

Ch ünitesi

.element ( font-size: 24ch; )

chBirim benzer exbu yazı 0 (sıfır) glif genişliğine göre bir elemanın yazı tipi boyutunu ayarlamak ki birim:

CodePen'de CSS-Tricks (@ css-tricks) tarafından ch birimleriyle Kalem Boyutlandırma türüne bakın.

Bu birim aşağıdakiler tarafından desteklenmektedir:

Krom	Safari	Firefox	Opera	IE	Android	iOS
27+	İşler	10+	İşler	9+	İşler	İşler