Yazar: Samed GÖZÜTOK

CSS3 hanging-punctuation

hanging-punctuation :

Asılı-noktalama özelliği bir noktalama işareti başlangıcında ya da metnin tam bir satır sonunda, hat kutunun dışında yerleştirilebileceğini belirtir.

Örnek

.font {
     hanging-punctuation: first;
}

Css Sözdizimi

Değer Açıklama
none Değer almaz.
first Noktalama ilk satırın başlangıç kenarından dışında askıda kalabilir.
last Noktalama son satırın bitiş kenarından dışında askıda kalabilir
allow-end Noktalama tüm çizgilerin uç kenarı dışında askıda kalabilir.
force-end Noktalama tüm çizgilerin uç kenarı dışında askıda kalabilir.
İnital
İnherit

Tarayıcı Desteği
Desteklenmiyor Desteklenmiyor Desteklenmiyor Desteklenmiyor Desteklenmiyor
Posted on by Samed GÖZÜTOK 0

CSS font-weight

font-weight :

Metnin kalın yada ince olarak gözükmesini sağlar.

Örnek

.font {
  font-weight: bold;
  font-size: 45px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
normal Metin kendi font özelliklerinde görünür.
bold Metin kalın görünür.
bolder Metin kalın görünür.
lighter Metin hafif kalınlıkta görünür.
100
200
300
400
500
600
700
800
900 		Sıralama inceden kalına doğrudur.
İnital
İnherit

Tarayıcı Desteği
2.0 1.0 4.0 1.3 3.5
Posted on by Samed GÖZÜTOK 0

CSS font-variant

font-variant :

Küçük harflere sahip metinin küçük harflerini büyütür. Fakat normal büyük harfinden biraz daha küçük olur.

Örnek

.font {
  font-variant: small-caps;
}

Codepen Ön izleme

 

Css Sözdizimi

http://www.w3tr.com/css/css-referans/css-font-variant/

Değer Açıklama
normal Metin normal gözükmesini sağlar..
small-caps Küçük yazılmış harflerin büyük gözükmesini sağlar.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 4.0 1.0 3.5
Posted on by Samed GÖZÜTOK 1

CSS font-style

font-style :

Metnin yazı tipi stilini belirler.

Örnek

.font {
  font-style: italic;
  font-size: 50px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
normal Yazı stilini normal olarak ayarlamak için kullanılır.
İtalic Yazı stilini italik olarak ayarlamak için kullanılır.
ablique Tarayıcı eğik bir yazı stili görüntüler.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 4.0 1.0 7.0
Posted on by Samed GÖZÜTOK 0

CSS3 font-stretch

font-stretch :

Bu font özelliği metni daha geniş veya dar yapmanıza olanak verir.

Örnek

.font {
  font-stretch: condensed;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
ultra-condensed Metni ultra daraltır.
extra-condensed Metni extra daraltır.
condensed Metni daraltır.
semi-condensed Metni normalden biraz daha daraltır.
normal Metne normal değerini verir.
semi-expanded Metni normal değerden biraz daha genişletir.
expanded Metni genişletir.
extra-expanded Metni extra genişletir.
ultra-expanded Metni ultra genişletir.
İnital
İnherit

Tarayıcı Desteği
Desteklenmiyor Desteklenmiyor Desteklenmiyor Desteklenmiyor Desteklenmiyor
Posted on by Samed GÖZÜTOK 0

CSS3 font-size-adjust

font-size-adjust :

Web tarayıcısı ilk fontu okumadığı zaman ikinci fonta geçer ve font boyutunda önemli ölçüde değişimlere neden olabilir. Bu durumu önlemek için bu özellik her font un aynı boyutta gözükmesini sağlar.

Örnek

.font1 {
  font-family: 'arial',sans-serif;
  font-size-adjust : 1.0;
}
.font2 {
    font-family: 'verdana',sans-serif;
     font-size-adjust : 1.0;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
number Alacağı değeri belirlemek için kullanılır.
none Değer almaz.
İnital
İnherit

Tarayıcı Desteği
desteklenmiyor 3.0 desteklenmiyor desteklenmiyor desteklenmiyor
Posted on by Samed GÖZÜTOK 0

CSS font-size

font-size :

Yazının boyutunu ayarlar.

Örnek

.font {
  font-size: 45px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
medium Orta boy metin tanımlamak için kullanılır. Varsayılan değerdir.
xx-small Ekstra ekstra küçük boy metin tanımlamak için kullanılır.
x-small Ekstra küçük boy metin tanımlamak için kullanılır.
small Küçük boy metin tanımlamak için kullanılır.
large Büyük boy metin tanımlamak için kullanılır.
x-large Ekstra büyük boy metin tanımlamak için kullanılır.
xx-large Ekstra ekstra büyük boy metin tanımlamak için kullanılır.
smaller Küçük boy metin serisi tanımlamak için kullanılır.
larger Büyük boy metin serisi tanımlamak için kullanılır.
length Sabir bir değer tanımlamak için kullanılır.(12px, 1.5em, 100% gibi)
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 5.5 1.0 7.0
Posted on by Samed GÖZÜTOK 0

CSS font-family

font-family :

Bir eleman için yazı ailesini belirtir. Birden çok yazı fontu içerisine yazabilirsiniz. Bu sayede tarayıcı birinci fontu desteklemiyorsa bir sonrakine geçer.

Örnek

.font{
  font-family: 'arial',sans-serif;
}

Codepen Ön  izleme

 

Css Sözdizimi

Değer Açıklama
family-name
generic-family		 Birincisi ana font olarak alınır sonrakiler ise bağlı olduğu aileden farklı fontlardır.
flex-basis Flex-basis de flex-grow gibi boyutlandırma yapar,ama bu px gibi değer alarak yapar.
flex-shrink Flex-shrink değeri kadar o element diğerlerine göre fazladan daralacaktır.Varsayılan değeri 1 dir
auto ayarı 1 1 e otomatik olarak ayarlar.
none ayarı 0 0 a otomatik olarak ayarlar.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 4.0 1.0 3.5
Posted on by Samed GÖZÜTOK 1

CSS3 @font-face

@font-face :

Her web sayfasının bir font’a ihtiyacı vardır. Tanımlanmadığı durumlarda bunu her web tarayıcısı farklı yorumlayabilir. Burada örnekte göreceğiniz ilk değer geçerli olan fonttur. O fontun web tarayıcısı tarafından okunamadığı yada tanımlanamadığı durumlarda ikinci font devreye girecektir.

Örnek

 @font-face {
    font-family: 'robotomedium';
    src: url('http://www.w3tr.com/file/roboto-medium_0-webfont.eot');
    src: url('http://www.w3tr.com/file/roboto-medium_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.w3tr.com/file/roboto-medium_0-webfont.woff2') format('woff2'),
         url('http://www.w3tr.com/file/roboto-medium_0-webfont.woff') format('woff'),
         url('http://www.w3tr.com/file/roboto-medium_0-webfont.ttf') format('truetype'),
         url('http://www.w3tr.com/file/roboto-medium_0-webfont.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;

  }

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
font-family Gerekli. Yazının adını tanımlar.
src Gerekli. yazının bulunduğu konumu belirtmek için kullanılır.
font-stretch Yazı tipi renginin nasıl olması gerektiğini belirtmek için kullanılır. Varsayılan değer “normal” dir.
font-style Yazı tipi stilinin nasıl olacağını belirtmek için kullanılır. Varsayılan değer “normal” dir.
font-weight Fontun kalınlığını belirlemek için kullanılır. Varsayılan değer “normal” dir.
unicode-range Yazı karakter aralığını belirtmek için kullanılır. Varsayılan değer “U+0-10FFFF” dir.
İnital
İnherit

Tarayıcı Desteği
TTF/OTF 4.0 3.5 9.0 3.1 10.0
WOFF 5.0 3.6 9.0 5.1 11.1
WOFF2 36.0 35.0 desteklenmiyor desteklenmiyor 26.0
SVG 4.0 desteklenmiyor desteklenmiyor 3.2 9.0
EOT desteklenmiyor desteklenmiyor 6.0 desteklenmiyor desteklenmiyor
Posted on by Samed GÖZÜTOK 0

CSS font

font :

Font özellikleri sayfalarımızdaki metinlerin font ailesini, kalınlık ayarlarını, boyutunu, büyük-küçük harf olmasını ve stilini değiştirmemizi sağlar.

Örnek

.font{
     font: italic bold 20px/24px arial, serif;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
font-variant Metnin küçük/büyük harf ile gösterilmesini belirler.
Font-weight Font un kalınlık incelik durumunu belirler. 100(ince)-900(kalın) arasında bir değer alabildiği gibi bold ve normal değerlerini de alır.
Font-style Metnin italik olup olmayacağını belirlemek için kullanılır.
Font-size Metnin boyutunu ayarlamak için kullanılır.
Line-height Satır yüksekliğini ayarlamak için kullanılır.
Font-family Metinlerde kullanacağımız font ailesini belirlemek için kullanılır. Birden fazla font ailesi kullanılırsa aralarına virgül konur.
icon İcon lar tarafından kullanılan yazı tipini kullanır.
Menu Açılan menüler tarafından kullanılan yazı tipini kullanır.
Message-box İletişim kutuları tarafından kullanılan yazı tipini kullanır.
Status-bar Durum çubuğu tarafından kullanılan yazı tipini almak için kullanılır.
caption Kontroller tarafında kullanılan yazı tipini kullanır. (like buttons, drop-downs, etc.)
small-caption caption yazı tipi nin küçük bir versiyonudur.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 4.0 1.0 3.5
Posted on by Samed GÖZÜTOK 0