Halimclskn
cssders4
Ders 4: Fontlar
Bu derste yazı tipleri hakkında ve bunların nasıl CSS kullanılarak uygulanır öğreneceksiniz. Biz de yazı web sitesine erişmek için kullanılan PC yüklenip yüklenmediğini bir web sitesi için seçilen özel yazı tipleri yalnızca görülebileceği soruna nasıl bakacağız.Aşağıdaki CSS özellikleri tarif edilecektir:
Yazı ailesi [font-family]
Mülkiyet font-family Belli bir eleman veya web sayfasını görüntülemek için kullanılacak yazı tiplerinin öncelik listesini ayarlamak için kullanılır. Listedeki ilk yazı sitesine erişmek için kullanılan bilgisayarda yüklü değilse uygun bir yazı bulunana kadar, listedeki bir sonraki yazı yargılanacak.
Aile adları ve genel aileleri: yazı kategorize etmek için kullanılan isimlerinin iki çeşidi vardır. İki terimler aşağıda açıklanmıştır.
- Aile adı
- Bir aile adı (genellikle "yazı" olarak bilinir) örnekleri örneğin "Arial", "Times New Roman" veya "Tahoma" olabilir.
- Genel aile
- Genel ailelerin iyi üniformalı görünümlere sahip aile adı grupları olarak tanımlanabilir. Örnek bir "ayak" olmadan yazı bir koleksiyon sans-serif vardır.
Farkı da bu gibi gösterilebilir:
Web sitesi için yazı tiplerini listelemek zaman, doğal olarak bazı alternatif yazı tipleri takip en çok tercih edilen yazı ile başlar. Bu genel bir font ailesi ile listeye tamamlamak için tavsiye edilir. Bu şekilde belirtilen yazı hiçbiri varsa en azından sayfa aynı ailenin bir yazı tipi kullanılarak gösterilecektir.
Fontların bir öncelik listesi örneği şu şekilde olabilir:
h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}
Ile işaretlenmiş Başlıkları <h1> yazı tipi "Arial" ile gösterilir. Bu yazı tipi kullanıcının bilgisayarında yüklü değilse, "Verdana" yerine kullanılır. Bu yazı hem kullanılamıyorsa, bir yazı tipi sans-serif aile başlıklarını göstermek için kullanılır.
Yazı tipi adını "Times New Roman" boşluk içerir ve bu nedenle tırnak işaretleri kullanılarak listelenir dikkat edin.
Yazı stili [font-style]
Mülkiyet font-style ya seçilen yazı tipi tanımlar , normal , italik ya da eğik . Aşağıdaki örnekte, işaretlenmiş tüm başlıkları<h2> italiklerle gösterilmiştir edilecektir.
h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic; }
Yazı varyantı [font-variant]
Mülkiyet font-variant arasında seçim için kullanılır , normal veya küçük-büyük harf , bir yazı varyantları. Bir küçük-büyük harf yazı tipi küçük ölçekli harfle harfleri (büyük harf) yerine küçük harf kullanan bir yazı tipidir. Aklınız mı karıştı? Bu örnekler bir göz atın:
Eğer font-variant ayarlanır , küçük-büyük harf ve hiç de küçük-büyük harf yazı mevcuttur tarayıcı büyük olasılıkla yerine büyük metin gösterecektir.
h1 {font-variant: small-caps;} h2 {font-variant: normal;}
Yazı [font-weight]
Mülkiyet font-weight bir yazı nasıl sunulacağını kalın ya da "ağır" anlatılmaktadır. Bir yazı tipi olabilen , normal veya kalın .Bazı tarayıcılar bile yazı ağırlığı tarif etmek için 100-900 arasındaki numaralar kullanımı (yüzlerce) destekler.
p {font-family: arial, verdana, sans-serif;} td {font-family: arial, verdana, sans-serif; font-weight: bold; }
Yazı boyutu [font-size]
Bir yazı tipi boyutu özelliği ile ayarlanan font-size .
Font boyutları tanımlamak için seçebileceğiniz birçok farklı birimler (örneğin piksel ve yüzdeler) vardır. Bu yazıda en yaygın ve uygun birimler üzerinde durulacak. Örnekleri şunlardır:
h1 {font-size: 30px ;} h2 {font-size: 12pt ;} h3 {font-size: 120% ;} p {font-size: 1em; }
Yukarıda dört birimleri arasında bir temel fark var. Birimleri ' px 've' pt 'while', yazı tipi boyutunu mutlak hale % 've' em Eş o / o uygun gördüğünüz gibi kullanıcı yazı tipi boyutunu ayarlamak için izin verir. Birçok kullanıcı devre dışı bırakılır, sadece yaşlı veya görme veya kötü kaliteli bir monitör muzdarip. web erişilebilir kılmak için herkes için, bu tür 'olarak ayarlanabilir birimleri kullanmalıdır % 'ya da' em '.
Aşağıda Mozilla Firefox ve Internet Explorer metin boyutunu ayarlamak için nasıl bir örnek görebilirsiniz. Kendiniz deneyin - özellik düzgün, değil mi?
[Font] Derleme
Kullanarak yazı kısa el özellik ise tek bir özelliği tüm farklı yazı tipi özelliklerini karşılamak mümkündür.
Örneğin, yazı tipi-özelliklerini tanımlamak için kullanılan kod bu dört satırları hayal <p> :
p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }
Kısa el özelliğini kullanarak, kod basitleştirilmiş olabilir:
p { font: italik, kalın 30px arial, sans-serif; }
Değerlerinin sırayla yazı şöyledir:
font-style | font-variant | font-weight | font-size | font-family
Özet
Artık yazı ile ilgili olasılıklar bazıları hakkında öğrendim. Yazı tiplerini belirtmek için CSS kullanarak en önemli avantajlarından biri herhangi bir zamanda, sadece birkaç dakika içinde bütün bir internet sitesinde yazı tipini değiştirebilir olduğunu unutmayın. CSS zaman tasarrufu ve hayatınızı kolaylaştırır. In sonraki derste biz metin bakacağız.
