SORU
23 Temmuz 2011, CUMARTESİ


CSS: 100% yazı tipi boyutu - 100% neler?

13* articles * percentage-sized vs other-sized yazı tipleri hakkında questions vardır. Ancak, yüzde değeri referans olması gereken şey öğrenebilirim. Bu anladığım kadarıyla tüm tarayıcılarda aynı boyutta'. Ben de, örneğin: bu okuyun

Yüzde (%): yüzde birim kadar“”, birkaç temel farklılıklar için kaydedin. ünite em gibidir Her şeyden önce, mevcut font-size 100% (= 100% yani 12pt) eşittir. Yüzde birimi kullanırken, metin erişilebilirlik için mobil cihazlar için ve tamamen ölçeklenebilir kalır.

Kaynak: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Ama eğer dersen ki "yani 12 pt = 100%", sonra ilk font-size: 12pt tanımlamak zorunda anlamına gelir. Bu işler böyle mi yürüyor? İlk mutlak bir ölçü boyutu tanımlamak, ve sonra bu gibi bakın '100%'? Birçok örnekleri koymak için yararlıdır dediğin gibi pek mantıklı değil:

body {
  font-size: 100%;
}

Yani bunu yaparakNEyazı tipi boyutu ile orantılı mı? Benim ekranda gördüğüm her yazı tipi boyutu için farklı olduğunu fark ettim. Arial çok daha büyük, Times New Roman daha, örneğin görünüyor. Eğer sadece bunu yapmak istiyorum, ayrıca, vücut = 100%, boyutubutüm tarayıcılarda aynı olacak yani? Ya ben ilk mutlak değer tanımlarsan?

GÜNCELLEME, SAT JUL 23

Orada alıyorum, ama lütfen beni mazur görün.

Yani, % değeri eğer doğru anladıysam varsayılan tarayıcı yazı tipi boyutu ile ilgilidir. İyi, güzel ama bana yine diğer bazı sorular: verir

  1. Bu standart boyutu her zaman her tarayıcı sürümü için aynıdır, ya da sürümleri arasında değişir?
  2. Ben ! (aşağıdaki resme bakın) Google Chrome (daha önce hiç bu az önce baktım!), ayarlarını tespit ve standart görüyorum"", "sans-serif" ve "tek aralıklı" ayarlar. serif Ama nasıl diğer yazı tipleri için bu yorumlarım?? Tarayıcı ne alacak font: 100% Georgia;, define söyleyebilir miyim? Serif standart boyut bakacaktır, yoksa "Georgia" tarayıcı için standart bir yazı tipi boyutu
  3. Çeşitli web siteleri üzerinde 18 ** Sizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide **accurate, resizable text across all browsers** in common use today gibi şeyler. Ama ne öğreniyorum şimdi düşünüyorum da bu aslında seçim arasında ya da yeniden boyutlandırılabilir metin (kullanarak % ya da em, ne tavsiye ediyorlar bu alıntı), ya da 'doğru, tutarlı yazı tipi boyutları arasında tarayıcıları' (kullanarak px veya pt gibi bir taban). Bu doğru mu?

Google Ayarları:

Google Chrome Settinsg

İşte böyledüşünüyorumşeylerolabilireğer mutlak değer boyutu tanımlarsanız değil gibi görünüyor.

enter image description here

CEVAP
23 Temmuz 2011, CUMARTESİ


16pt gibi bir şey olduğu varsayılan tarayıcınızı Firefox için, Firefox seçenekler girmeden, İçerik sekmesini tıklatın ve yazı tipi boyutunu kontrol ederek kontrol edebilirsiniz. Diğer tarayıcılar için aynı şeyi yapabilirsiniz.

Şahsen benim web sitelerinin varsayılan yazı tipi boyutunu kontrol etmek gibi, her sayfada bulunan CSS dosyası içinde VÜCUT varsayılan, yani ben.

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px
}

Şimdi tüm HTML etiketlerinin yazı tipi boyutu yazı tipi boyutunu 14px bir miras olacak.

Tüm divs bir yazı tipi boyutu, vücudun  dan daha büyük olsun istiyorum ki, sadece yapın:

div {
    font-size: 110%
}

Şimdi benim sayfaları, herhangi bir tarayıcı autmoatically tüm divs 15.4 px gibi bir şey olması gereken vücudun, daha 10% daha büyük gösterir.

Eğer yazı tipi boyutu tüm div.  daha az olmasını istediğim için, ben yapmak:

div {
    font-size: 90%
}

Bu tüm divs yazı tipi boyutu 12.6 px bir hale getirecek.

Ayrıca yazı tipi boyutu beri her iç içe div 10% boyutu: yazı tipi azalacağı miras olduğunu bilmeli

<div>Outer DIV.
    <div>Inner DIV</div>
</div>

İç div amaçlı olabilir hangi 11.34 piksel (px 12.6 ), yazı tipi boyutu var.

Bu açıklama yardımcı olabilir: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • HTC Tutorials

    HTC Tutorial

    21 EYLÜL 2010
  • michellefeng's channel

    michellefeng

    26 Kasım 2006
  • Semantic Mastery

    Semantic Mas

    30 EKİM 2013