Css Yazı Tipleri

Merhaba arkadaşlar bu yazımda sizlere css yazı tiplerini anlaymaya çalışacağım. Bir web sitesi yaprken yazı fontunu iyi bir şekilde kullanmak çok önemlidir. Bazı başarılı web sitelerinin altındada bu yatmaktadır. Birçok yazı ekleme türü vardır. Bunların başında javascript gelir istediğiniz yazı tipini javascript sayesinde kullanabilirsiniz ama uzun ve uğraştırıcı yollar gerektirir sitenizi yorma olasılığı yüksektir. Bu yüzden nasıl kullanılır yazmayacağım google’da arar iseniz bir çok kaynak bulabilirsiniz.

En güzel ve en kolay yazı ekleme yöntemi google fonts’dur. Google fonts sayesinde yüzlerce yazı tipi arasından istediğiniz fontu seçerek sitenizde kullanabilirsiniz. Birazdan yazının devamında nasıl kullanılır onu göstereceğim ama ondan önce standart css yazı tipleri ile ilgili kısa kısa bilgiler vereceğim.

 font-family: Yazı Tipi Belirlemek;

h1 { font-family: Times New Roman; }
p { font-family: Times New Roman, Arial, Helvatica; }
a { font-family: Sans-serif; }

font-size: Yazının Büyüklüğü

  • % : yüzde olarak belirtmek
  • in : inç olarak belirtmek
  • cm : santim olarak belirtmek
  • mm : milimetre olarak belirtmek
  • em : varsayılan yazı büyüklüğüne göre oranlamak
  • pt : punto olarak belirtmek
  • px : piksel olarak belirtmek
h2 { font-size: 12pt; }

h2 { font-size: 14px; }

h2 { font-size: 1.5em; }

h2 { font-size: 150%; }

 font-style: İtalik (Sağa Yatık) Yazmak

h2 { font-style: italic; }

 font-weight: Kalın Yazmak

Eğik Yazmak İçim;
h2 { font-weight: bold; }
Normal Yazmak İçin;
h2 { font-weight: normal; }

 Google Fonts Kullanarak Yazı Tipi Kullanmak;

İlk olarak Google Fonts Sitesine gidiyoruz ve yazı tipimizi seçiyoruz. quick use static Css Yazı Tipleri (Quick Use) bu simgeye tıklıyoruz ardından ise açılan sayfada bize sorulan sorulara uygun olarak font bilgilerimizi oluşturuyoruz.

1. Choose the styles you want:

Bu soruda bize hangi yazı stilini kullanmak istediğimizi soruyor istediğimizi seçiyoruz.

2. Choose the character sets you want:

Bu soruda ise bize hangi karakter setini kullanmak istediğimizi soruyor ne kadar çok set o kadar yavaşlama anlamına gelmektedir.

3. Add this code to your website:

Burada ise bize verilen kodu web sitemize eklememiz gerektiğini söylüyor. Google’ın fonta özel oluşturduğu kodu sitenizde <head> </head> tagları arasına eklemeniz gerekiyor.

<link href='http://fonts.googleapis.com/css?family=Sonsie+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

 4. Integrate the fonts into your CSS

Bu adımda ise sitenizin nereseinde kullanacaksanız ona göre eklemeniz gereken kodu yazıyor size

font-family: 'Sonsie One', cursive;

Bu aşamaları tamamladığınızda dilediğiniz gibi bir site ortaya çıkacaktır.

Bu yazımında sonuna gelmiş bulunmaktayım. Umarım açıklayıcı bir şekilde anlatabilmişimdir.




Bir Cevap Yazın

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