Sercan Aslan
Altın 4 Altın IV
Html5 & Css3

CSS Font Face Kullanarak Sayfaya Yazı Tipi Ekleme ve Tipografi Özellikleri

Web sayfalarında tipografi oldukça önemlidir. Kodlama yaparken elbette çizilen tasarıma bağlı kalmak esastır. Bu başlıkda bahsettiğimiz tipografi tasarım yaparken uygulanmış olan font özelliklerini CSS’e nasıl aktarabileceğimizle ilgili olacak. Örneğin karakterler arası boşluk veya satırlar arasındaki boşlukları CSS ile nasıl yapabiliriz bunu göstermeye çalışacağım.

@font-face CSS’in sayfaya yazı tipi eklemek için kullanılan özelliğidir.

Sayfaya uygun bir yazı tipi ekledikten sonra birkaç spesifik tipografi için kullanılan CSS kodlarından bahsedelim.

letter-spacing Karakterler arası boşluk oluşturmak için kullanılır. “letter-spacing: 2px” şeklinde bir kullanımı vardır. Piksel olarak vereceğiniz değer doğrultusunda karakterler arası boşluk artacaktır.

line-height Satırların yükseklik değerini belirlememiz için kullanılan CSS kodudur. Bu kodu aynı zamanda satır aralığını ayarlamak için kullanmak oldukça ideal bir yöntemdir. “line-height: 20px” gibi bir kullanımı vardır. Aynı şekilde piksel cinsinden değer arttıkça satır yüksekliği de aynı oranda artar ve dolayısıyla satırlar arası boşluk artmış olur.

Kullandığım html kodları

<!doctype html>
<html lang="tr">
<head>
    <title>LOREM IPSUM</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="LOREM IPSUM">
    <meta name="author" content="SitePoint">
    <meta name="keywords" content="LOREM IPSUM">
    <link type="text/css" rel="stylesheet" href="style.css">

</head>
<body>

    <div class="box">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    
    <div class="box2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    
</body>
</html>

Kullandığım CSS kodları

.box {
	font-size:13px;
	font-family: Arial;
	width:800px;
	border:1px solid #f1f1f1;
	margin:0 auto;
	margin-top:40px
}

.box2 {
	font-family: Open Sans;
	font-size:13px;
	padding:30px;
	color:#444;
	width:800px;
	border:1px solid #f1f1f1;
	margin:0 auto;
	margin-top:100px;
	font-weight:400;
	line-height: 28px
}

Demoİndir

İlgili Bağlantılar

Bir Cevap Yazın

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

Sadece css kullanılarak açılır menü yapımı için internette epey kaynak var aslında. Ben vid

09:30 // 0 Yorum Karanlığa Işık Tut

Videoda nth-child ve benzeri birkaç css seçicisinden bahsettim. Benim sık sık kullandığım se

09:27 // 0 Yorum Karanlığa Işık Tut

Sadece css kullanılarak açılır menü yapımı için internette epey kaynak var aslında. Ben vid

09:24 // 0 Yorum Karanlığa Işık Tut

İzlediğim başarı hikayelerinin konu edildiği bazı filmleri sizler için derledim. 10 adet film

09:17 // 0 Yorum Karanlığa Işık Tut