| |
11-05-2008, 21:31:01
| |||
| |||
 Css Font Özellikleri  Css de font özellikleri web sayfamızın en önemli yeridir hangi fontu kullanacağımızı boyutu özelliği ve stili olmak üzere çeşitli bir çok özelliği bulunuyor. Bunlar nelerdir bir görelim: font-family: font-family sitemizin yada herhangibi bir elementin hangi fontu kullanacağını belirler ama bu font kullanımının bazı şartları vardır bunlar nelerdir nasıl kullanılır. family-ismi bizim belirlediğimiz yazı tipidir generic-family bizim belirlediğimiz yazı tipinin ailesidir örnek: Kod: p{font-family: arial, sans-serif;} generic-family font ailesinin isimleri şöyledir 'serif' 'sans-serif' 'cursive' 'fantasy' 'monospace' generic-family font tipinin son ayağıdır nedeni ise bizim belirlediğimiz fontlar yazılan karakteri desteklemiyorsa bir sonrakine atlar oda desteklemez ise son çare olarak generic-family yani soysal font gösterilir Not: generic-family soysal yazı tipi ailesi tırnak içerisinde yazılmaz font-family de tırnak kullanımı örnek: p{font-family: arial, "lucida console", sans-serif;} üstteki kodda dikkat ederseniz "lucida console" fontunu tırnakla belirttik bunun nedeni font isminin boşluklu olması yani font isminde boşluk içeren isimler tırnak içerisinde yazılır. Aynı şey kod içerisinde css kullanımda da geçerlidir fakat çift (") tırnak yerine tek tırnak kullanılır (') örnek: Kod: <p style="font-family: arial, 'lucida console', sans-serif"> font-size: font-size font büyüklüğünü küçüklüğünü belirlememize sağlar Temel Komutlar Kullanabilir yada numara ile boyut verebiliriz örnek kullanım Kod: body { font-size: x-large;} xx-small => html boyutu 1 x-small small => html boyutu 2 medium => html boyutu 3 large => html boyutu 4 x-large => html boyutu 5 xx-large => html boyutu 6 Numara olarak font boyutu vermek için px, pt, cm, mm, em, ex, pc, inc ve % kullanılabilir örnek Kod: p {font-size: 260%}
p {font-size: 14px}
p {font-size: 2.6em} smaller => göreceli en küçük değer larger => göreceli en büyük değer length => göreceli normal değer font-size-adjust: font-size-adjust Özelliği çok fazla kullanılmasada aslında güzel bir özelliktir çok fazla kullanılmamasının başlıca sebebi İE6 Ve İE7 Bu özelliği desteklemiyor ne yazıkki. Bu özellikl font-size ile verlmiş Değeri Daha Okunaklı Olarak Gösterir Örnek Olrak "times Roman" fontu küçültüldüğünde "verdana" fontuna nazaran daha okunaksız bir hal alır ont-size-adjust özelliği yazıtipi kapsam oranının bir katsayı ile çarparak düzeltmesini sağlar örnek kullanım Kod: h1 {font-size-adjust: 0.3;} font-stretch: font-stretch malesef Tarayıcılar tarafından deteklenmeyen bir özellik olduğu için anlatmadan geçiyorum ( Tarayıcılar Desteklendiği an güncellenecek) font-style: font-style fontumuzun yatık, eğik olarak belirlememizi sağlar örnek normal => normal görünüm italic => italic görünüm oblique => eğik görünüm kullanımı alttaki şekildedir Kod: h1 {font-style: italic}
h2 {font-style: normal}
h3 {font-style: oblique} font-variant: font-variant özelliği küçük harfleri büyük gösterir ama büyük harflerden daha büyük değillerdir örnek kullanım Kod: p {font-variant: small-caps} font-weight: Bu Özellik Yazı Tipi nin Tonunu belirler yada koyuluk derecesini diyebiliriz Göreceleri Değerler normal => sayısal değeri 400 bold => sayısal değeri 700 bolder => sayısal değeri 900 lighter => sayısal değeri 100 Sayısal değerler 100 den 900 e kadardır ve ve her değer bir diğerinden bir ton koyudur 100 200 300 400 500 600 700 800 900 Göreceli ve sayısal değerlerin Kullanımı Kod: p {font-weight: normal}
p {font-weight: bold}
p {font-weight: 900} @font-face: Font-face şuan kullanılmasa da anlatmakta yarar var Font face ile sitemize özel font ekleyebiliriz yanlız şuanda bildiğim kadarıyla hiç bir tarayıcı desteklemiyor fakat yinede bir gün tarayıcılar desteklemesini ümit ediyoruz öncelikle Fontumuzu Sitemizin FTP adresine yüklememiz gerekiyor Yüklemiş olduğumuzu varsayarsak örnek kodlarımıza geçelim Fontu Çağırma Örnek Kod: @font-face {
font-family: "Bana Ozel"; /* Fontumun İsmini Belirliyoruz */
src: url("fonts/ozel.ttf"); /* Fontun Yolunu Yazıyoruz*/
} Kod: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Font test</TITLE>
<STYLE TYPE="text/css" MEDIA="screen, print">
@font-face {
font-family: "Bana Ozel";
src: url("font/ozel.ttf")
}
H1 { font-family: "Bana Ozel ", serif }
</STYLE>
</HEAD>
<BODY>
<H1>Bana Özel Fontum </H1>
</BODY>
</HTML> Font Uzantıları birden fazladır eklemek istediğimiz fontlarda uzantı girmemiz gerekmez örnek Kod: @font-face {
font-family: "Bana Ozel"; /* Fontumun İsmini Belirliyoruz */
src: url("fonts/ozel"); format("opentype") /* Fontun Yolunu yazıyoruz Ve Formatını Belirliyoruz */
} "truedoc-pfr" TrueDoc™ Portable Font Resource .pfr "embedded-opentype" Embedded OpenType .eot "type-1" PostScript™ Type 1 .pfb, .pfa "truetype" TrueType .ttf "opentype" OpenType, TrueType Open dahil .ttf "truetype-gx" GX eklentili TrueType "speedo" Speedo "intellifont" Intellifont  |
|
11-05-2008, 21:38:23
| ||||
| ||||
| Cevap: Css Font Özellikleri Bütün css konularını bi konuda toplarsanız daha güzel olacak. |
|
11-05-2008, 21:55:22
| |||
| |||
| Cevap: Css Font Özellikleri Daha güzel olacaktan kastınız nedir acaba? Bence böyle daha uygun. Üyeler bir sayfa içerisinde sayfalarca yer kaplayacak yazılar arasında aradıklarını bulamayabilirler. Her CSS yi farklı bir başlık altında vererek aradıklarını daha rahat bulurlar Teşekkürler... |
 |
| Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir) | |
| Seçenekler | |
| Stil | |
| |
Benzer Konular | ||||
| Konu | Konuyu Başlatan | Forum | Cevaplar | Son Mesaj |
| CSS Link Özellikleri | OmAr | HTML CSS DHTML | 0 | 11-05-2008 21:26:19 |
| Mybb 1.4 Özellikleri | network | MyBB | 1 | 04-03-2008 10:25:18 |
| Java Özellikleri iptal | 1Dizayn | Vbulletin | 0 | 28-04-2007 12:41:27 |
Normal
