|
|
||
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-size font-size-adjust font-stretch font-style font-variant font-weight @font-face 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: p{font-family: arial, sans-serif;} Burada Dikkat etmemiz gereken font ailesi ismi en sona yazılmalıdır ve her tekrar eden font isminin sonuna (,) virgül koyulmalıdır 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: <p style="font-family: arial, 'lucida console', sans-serif"> Ön İzleme Örnek 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 body { font-size: x-large;} Temel Yazım değerleri 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 p {font-size: 260%} p {font-size: 14px} p {font-size: 2.6em} Göreceli değerler smaller => göreceli en küçük değer larger => göreceli en büyük değer length => göreceli normal değer Ön İzleme Örnek 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 h1 {font-size-adjust: 0.3;} Ön İzleme Örnek 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 h1 {font-style: italic} h2 {font-style: normal} h3 {font-style: oblique} Ön İzleme Örnek 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 p {font-variant: small-caps} Ön İzleme Örnek 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ı p {font-weight: normal} p {font-weight: bold} p {font-weight: 900} Ön İzleme Örnek @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 @font-face { font-family: "Bana Ozel"; /* Fontumun İsmini Belirliyoruz */ src: url("fonts/ozel.ttf"); /* Fontun Yolunu Yazıyoruz*/ } üstteki kodda fontumuzu çağırdık bir elementte kullanmak istediğimizde sadece fontun ismini yazmamız ve font ailesinin ismini vermemmiz yeterli olacaktır örnek <!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> Örnek Kullanımı Bu Şekildedir fakat henüz tarayıcılar tarafından desteklenmemektedir. Font Uzantıları birden fazladır eklemek istediğimiz fontlarda uzantı girmemiz gerekmez örnek @font-face { font-family: "Bana Ozel"; /* Fontumun İsmini Belirliyoruz */ src: url("fonts/ozel"); format("opentype") /* Fontun Yolunu yazıyoruz Ve Formatını Belirliyoruz */ } Font formatları şu şekildedir "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 Temmuz 2010 12:41 6Serdar demiş ki: sitenizde kullandığınız yazı fontunu kendi sitemize nasıl uyarlayabiliriz. Sitenizin konu başlığı fontunu aradım fakat bulamadım |
||||
|
||||
8 Ağustos 2009 19:12 5Astech demiş ki: Artık Kullanılımaıo Dedınya Tarayıcı Desteklemıo Dıye Hayır Desteklıyor Tarayıcılar Cesıt Fontu Ben Fırefox 3.5 Kullanıyorum Oluo Ftp Ye attıp Kullandım Olyor |
||||
|
||||
24 Ekim 2008 04:37 4byesrarengiz demiş ki: evet anlatımı buldun ama css ile özel font katamazsın sisteme.Ancak php ile biraz dolambaçlarla font ekleyebilirsin.css için font include şimdilik desteklenmiyor.Blackincide zaten yukarıdaki konuda aralarda şimdilik böle birşeyin desteklenmediğini söylemiş bulunuyor. |
||||
|
||||
14 May 2008 21:28 3RizeliGenc89 demiş ki: Blackinci hele şükür güzel bir anlatım bulabildim.. Farklı font kullanımı için (özel font) Çok saolasın.. Başarılar.. |
||||
| Son Yapılan 10 Yorum | ||
|
||
|
Yukarı
İletişim
RSS Takip
İstatistikler
Site İçeriği
Copyright © 2007 - 2010 DLE Blackinci Edition Seri 2 |