Yazı Tipleri
Yazı Tipi Biçimleri
- font-family
- font-size
- font-style
- font-weight
Font-Family
Tarayıcılarda standart yazı,metin görünüm biçimi olarak “Time News Roman” font’u atanır. Tarayıcıların desteklediği font türlerini seçip yazı stilimizi güzelleştirebiliriz.
Css
body{
font-family: 'Courier New', Courier, monospace;
}
span{
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
Google zenginleştirilmiş font kütüphane servisini sunmaktadır. Dilerseniz tercihinizi bu yönde yapabilirsiniz.
https://fonts.google.com/ sitesinden font belirledikten sonra ilgili linki siteye entegre edebiliriz.
Örnek link paylaşımı;
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
font-family: 'Open Sans', sans-serif;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fonts / Yazitipi</title>
<link rel="stylesheet" href="fonts.css"/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<h1>Font-Family Örneği 1</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.Et voluptatum tempora numquam eum, omnis natus?</p>
<h1>Font-Family Örneği 2</h1>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, quasi.</span>
</body>
</html>p{
font-family: 'Time News Roman', Courier, monospace;
font-size:18px;
font-style: oblique;
}
span{
font-family: 'Open Sans', sans-serif;
font-size: 2em;
font-style: italic;
}
Font-Size
Yazı boyutunu büyüklüğünü ayarlamak için kullanılır.
Değerler
- %:Yazı tipi boyutunu Yüzdesel belirlemek için kullanılır
- px: piksel olarak belirlemek için kullanılır
- em: varsayılan yazı büyüklüğüne göre oranlar
- in: inç olarak belirlemek için kullanılır
body{
font-family: 'Courier New', Courier, monospace;
font-size:18px;
}
span{
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 2em;
}
Font-Style
Eğik bir metin oluşturmak için kullanılır.
p{
font-family: 'Time News Roman', Courier, monospace;
font-size:18px;
font-style: oblique;
}
span{
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 2em;
font-style: italic;
}