Welcome, Visitor!

Hello, we are really happy that you have reached us. However, since you are viewing the forum as a visitor, you cannot benefit from many features of the forum. How about taking advantage of all the features exclusive to our members by registering? You can register right now, taking just 2 minutes of your time. We would love to see you among us.

CSS Font Kullanımı

S

Shiva

Manager
Thread Starter
Admin
Joined
Jul 31, 2019
Messages
4,049
Reaction score
9,138
Points
113
Location
Berlin
CSS, sayfadaki metnin görünümünü ve biçimini düzenlemek için birçok farklı özellik sunar. Bu özelliklerden biri de yazı tipleridir. Renkten sonra, yazı tipi muhtemelen bir sayfanın en temel özelliğidir. Yazı tipi, belirli bir stilde ve boyutta yazdırılabilir veya görüntülenebilir metin karakteri setidir. Yazı kümesi türü tasarımı yazı tipi ve bu tasarımın varyasyonları yazı tipi ailesi oluşturmaktadır. CSS font özelliklerinin kullanımında çoğunun başında font-ifadesi bulunur.

font-family : Font Ailesi
font-family Özelliği ile görüntülenecek olan metnin yazı tipini seçmenize olanak verir.

CSS:
<!DOCTYPE html>
<html>
<head>
<style>
    p.bir {
        font-family:sans-serif;
    }
 
    p.iki {
        font-family:monospace;
    }
</style>
</head>
<body>
 
<h1>CSS font-family Özelliği</h1>
    <p class="bir">Bu yazıda Sans-Serif fontu kullanılmıştır.</p>
    <p class="iki">Bu yazıda Monospace fontu kullanılmıştır.</p>
 
</body>
</html>

1575917158095.png

font-family özelliğinin kullanımında dikkat edilmesi gereken bazı hususlar vardır;

1 – Bir font ailesi adı birden fazla sözcükten meydana geliyorsa, tırnak(” “) işareti içine alınmalıdır, örneğin: “Times New Roman”.

CSS:
p {
    font-family: "Times New Roman";
}

2 – Tek bir font kullanmak yerine birkaç alternatif font kullanmanız her zaman tavsiye edilir. Sitenizde özel fontları kullanmak isteyebilirsiniz. Tüm fontlar tüm bilgisayarlarda bulunmadığından (binlerce yazı tipi vardır ve çoğu ücretsiz değildir), CSS bir geri dönüşüm sistemi sunar. Tarayıcı tarafından görüntülenemeyen bir font kullanılmışsa web’in güvenilen fontlarından birini seçerek yazının sunulmasında problem çıkartmaz. Varsayılan olarak, her bilgisayarda, tablette, akıllı telefonda veya diğer web tarama özellikli cihazlarda önceden yüklenmiş birkaç yazı tipi bulunur. Her cihazda zaten yüklü olan bu yazı tiplerini, web sitelerimizde özgürce kullanabiliriz; Bu yazı tipleri “web-güvenli fontlar” olarak bilinir hale gelmiştir. Önce istediğiniz yazı tipini, sonra kullanılamıyorsa ilk dolduracak yazı tiplerini ve en son web güvenli fontlarından birini tercih etmelisiniz. Web güvenli fontları ;

  • serif
  • sans-serif
  • cursive
  • monotype
  • fantasy
Örnek ;

Web’in bu en güvendiği font stillerine bir göz atalım;

CSS:
<!DOCTYPE html>
<html>
<head>
<style>
    p.bir {
        font-family: serif;
    }
 
    p.iki {
        font-family: sans-serif;
    }
    p.uc {
        font-family: monospace;
    }
    p.dort {
        font-family: cursive
    }
    p.bes {
        font-family: fantasy;
    }
</style>
</head>
<body>
 
<h1>CSS font-family Özelliği</h1>
    <p class="bir">Bu yazıda Serif fontu kullanılmıştır.</p>
    <p class="iki">Bu yazıda Sans-Serif fontu kullanılmıştır.</p>
    <p class="uc">Bu yazıda Monospace fontu kullanılmıştır.</p>
    <p class="dort">Bu yazıda Cursive fontu kullanılmıştır.</p>
    <p class="bes">Bu yazıda Fantasy fontu kullanılmıştır.</p>
 
</body>
</html>

1575917208793.png

Örnek ;

Aşağıda paragraflar için özel ve güvenli fontların bir arada kullanımı gösterilmiştir. Eğer tarayıcınız ilk fontu desteklemiyorsa, bir sonraki fontu deneyecektir

CSS:
<!DOCTYPE html>
<html>
<head>
<style>
    p.bir {
        font-family: "Times New Roman", Times, serif;
    }
 
    p.iki {
        font-family: Arial, Helvetica, sans-serif;
    }
    p.uc{
        font-family: Papyrus,"Sagoe UI",monospace;
    }
</style>
</head>
<body>
 
    <p class="bir">Bu paragraf yazısı Times New Roman fontu ile yazılmıştır.</p>
    <p class="iki">Bu paragraf yazısı Arial fontu kullanılarak yazılmıştır.</p>
    <p class="uc">Bu paragraf yazısı Papyrus fontu kullanılarak yazılmıştır.</p>
 
</body>
</html>

1575917234560.png

font-style: Yazı Stili
font-style Özelliği ile metni eğimli (italic) yapabilirsiniz. Alabileceği üç farklı değer vardır;

  • normal : Metin normal olarak gösterilir
  • italic : Metin italik olarak gösterilir
  • oblique : Metin “eğik” (eğik italikle çok benzer, ancak daha az desteklenmektedir).
Örnek ;

Aşağıdaki örnekte paragraflara farklı yazı stilleri uygulanmıştır.

CSS:
<!DOCTYPE html>
<html>
<head>
<style>
    p.normal {
        font-style: normal;
    }
 
    p.italic {
        font-style: italic;
    }
 
    p.oblique {
        font-style: oblique;
    }
</style>
</head>
<body>
 
    <p class="normal">Bu paragraf normal stilde yazılmışır.</p>
    <p class="italic">Bu paragraf italic stilde yazılmışır.</p>
    <p class="oblique">Bu paragraf oblique stilde yazılmışır.</p>
 
</body>
</html>

1575917256674.png

font-size: Yazı Boyutu
font-size Özelliği metnin boyutunu değiştirmenize olanak verir. Metin boyutunu yönetebilmek, web tasarımında önemlidir. Bununla birlikte, paragrafların başlıklar gibi görünmesini sağlamak için yazı tipi boyutu ayarlamalarını kullanmamalısınız veya başlıklar paragraflara benzemektedir.

<h1> – <h6> başlıklar ve <p> paragraflar için daima uygun HTML etiketleridir.

font-size değeri farklı türlerde belirtilebilir;

Piksel Ölçü birimi : Yazı tipi boyutunu piksel cinsinden verebilirsiniz.

Mutlak boyut : Bu mutlak değerler, tarayıcı tarafından hesaplanan belirli font boyutlarına eşlenir. Mutlak boyut, metnin tarayıcı üzerinde fiziksel boyutu biliniyorsa kullanımı yararlıdır.

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
Göreli boyut : Etrafındaki öğelere göre boyutu ayarlar.

  • larger
  • smaller
Yüzdeli Boyut : Bir yazı tipi boyutu yüzdelik değer olarak belirtebilirsiniz. Bu durumda bir üst öğenin yazı tipi boyutuna göre de boyutlandırma yapılmış olur.

em Ölçü Birimi : em birimi, üst öğenin yazı tipi boyutunun hesaplanan değerine dayalı göreceli bir birimdir. Bu, alt öğelerin yazı tipi boyutlarını ayarlamak için her zaman üst öğelerine bağımlı olduğu anlamına gelir.

Not: Bir yazı tipi boyutu belirtmezseniz, paragraflar gibi normal metin için varsayılan boyut 16 pikseldir (16 piksellik = 1em).
 
R

Rooster

only business
Super Moderator
Joined
Aug 10, 2019
Messages
3,209
Reaction score
3,144
Points
113
Location
Milano
Ellerine Sağlık Yararlı Olmuş :)
 
SPAM IS FORBIDDEN!
  • SPAMMERS ARE BANNED FROM THE FORUM AND CANNOT USE ANY OF THE CHEATS
  • For example: thanks, thx, very good, asdqwe, working, ty and so on!
  • For example: Writing the same message over and over. thanks, thx and so on!
  • Copying and copying someone else's message is prohibited.
  • It is forbidden to send messages to increase the number of comments on threads that you have no knowledge of.
  • Write your own opinion when commenting!
  • If you see spam message, please let us know with the REPORT button!

Theme editor

Top Bottom