Css

CSS Temel – CSS Yazı Tipleri (Fonts)

  Css    4 Mart 2019
Yorum Yok

CSS yazı tipi özellikleri, bir metnin yazı tipini, boyutunu ve kalınlığını, varyantını vb. Beğendiğiniz yazı tipleri için çeşitli stiller ayarlamanıza olanak tanır.

Yazı Tipi Özellikleri

CSS gibi metin içeriğinin yazı stil için çeşitli özelliklerini sağlar: font-familyfont-stylefont-variantfont-weight ve font-size. Aşağıdaki bölüm de, bu özelliklerin her birini tek tek tanımlayacaktır.

Font Ailesi (font-family)

Bir metnin yazı tipi ailesi “font-family” özelliği ile ayarlanır. “font-family” özelliği kullanılırken yedek olarak bir kaç font ailesi daha eklemek tedbir bakımından iyi olur. Eğer tarayıcı ilk font ailesini desteklemiyorsa, bir sonra ki font ailesini kullanır.

Not: Eğer bir font ailesinin adı bir kelimeden fazla ise tırnak işaretleri içine alınmalıdır ve font aileleri virgül ile ayrılmalıdır.

See the Pen morVMv by Antrode Toprak (@antrode-toprak) on CodePen.dark

Yazı Stili (font-style)

font-style Nitelik bir elemanın metin içeriği için yazı tipi stilini ayarlar.

Bu özellik için olası değerler şunlardır: normalitalic veya oblique.

Yazı Boyutu (font-size)

font-size Nitelik bir elemanın metin içeriği için yazı tipi boyutunu ayarlar.

Yazı tipi boyutu değerlerini, örneğin anahtar kelimeler, pikseller veya ems ile belirtmenin birkaç yolu vardır.

Anahtar Kelimelerle Yazı Tipi Boyutunu Ayarlama

Gövde öğesinde bir anahtar kelime yazı tipi boyutu ayarlayarak, sayfanın başka bir yerinde göreceli yazı tipi boyutlandırma ayarlayarak, yazı tipini tüm sayfada uygun şekilde yukarı veya aşağı kolayca ölçekleyebilmenizi sağlar. : Mutlak büyüklüğü aşağıdaki anahtar kelimelerden birini kullanarak belirtilir xx-smallx-smallsmallmediumlargex-largexx-large.

Aşağıdaki anahtar kelimelerden biri kullanılarak göreceli bir boyut belirtilir: smallerlarger.

Yazı Tipi Boyutunun Pikselle Ayarlanma

Yazı tipi boyutunu piksel değerlerinde (örneğin, 12px, 16px vb.) ayarlamak, piksel doğruluğuna ihtiyacınız olduğunda iyi bir seçimdir. Ancak, benzer etkiyi elde etmek için farklı algoritmalar kullandıkları için sonuçlar tarayıcılar arasında bir dereceye kadar değişebilir.

Yüzde ve Em Kombinasyonunu Kullanma

Tüm tarayıcılarda benzer etkiyi elde etmenin çözümü font-size, gövde elemanı için yüzde olarak bir varsayılan belirlemektir. Popüler bir teknik, font-size vücudu  62.5% (varsayılan 16px’in % 62.5’idir), yani 10px’e veya 0.625em’e ayarlamaktır.

Kolay hatırlanması dönüşüm, em birimlerini kullanarak herhangi elemanları px tarafından bu şekilde  10px = 1em12px = 1.2em14px = 1.4em16px = 1.6emvb, vb.  dönüştürülebilir.

İpucu: World Wide Web konsorsiyumun (W3C) daha sağlam ve ölçeklenebilir düzenleri oluşturmak amacıyla em veya yüzde (%) değerleri kullanmanızı önerir.

Yazı Tipi Ağırlığı (font-weigh)

font-weight Mülkiyet yazı ağırlığını veya cesaret belirtir.

Font-style özelliğinin Olası değerler şunlardır: normalboldbolderlighter100200300400500600700800900

  • Sayısal değerler 100– 900 arasında her sayının öncekinden daha koyu bir ağırlığı (kalınlığını) temsil ettiği font ağırlıklarını (kalınlığını) belirtin.

Yazı tiplerinin çoğu yalnızca sınırlı sayıda ağırlıkta bulunduğundan; genellikle sadece normal ve bold renkte bulunurlar . Yazı tipi belirtilen ağırlıkta mevcut değilse, en yakın uygun ağırlıkta bir alternatif seçilecektir.

Yazı Tipi Varyantı (font-variant)

font-variant Mülkiyet metin özel küçük kapaklar varyasyon görüntülenmesini sağlar.

Bir öğenin font değişkeninin nasıl ayarlanacağını gösterir. Olası değerler normal ve small-caps.

 

0 okunma

Etiketler : , , , , ,

  Benzer Yazılar


  Yorumlar

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu yazıya henüz yorum yapılmamıştır, yazı hakkındaki düşüncelerinizi paylaşmaktan çekinmeyin.