Sercan Aslan Kişisel Blog
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ı


body {
	margin:0;
	padding:0
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Regular.eot');
    src: url('fonts/MOpenSans-Regular.eot') format('embedded-opentype'),
         url('fonts/OpenSans-Regular.woff2') format('woff2'),
         url('fonts/OpenSans-Regular.woff') format('woff'),
         url('fonts/OpenSans-Regular.ttf') format('truetype'),
         url('fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
		 font-weight:400
}

.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