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

Yüzde boyutlu ve diğer boyutlu yazı tipleri hakkında birçok makale ve soru vardır . Ancak, yüzde değerinin referansının ne olması gerektiğini bulamıyorum. Bunun 'tüm tarayıcılarda aynı boyutta olduğunu' anlıyorum. Bunu da okudum, örneğin:

Yüzde (%): Yüzde birimi "em" birimine çok benzer, birkaç temel fark için tasarruf edin. Her şeyden önce, mevcut yazı tipi boyutu% 100'e eşittir (yani 12pt =% 100). Yüzde birimini kullanırken metniniz mobil cihazlar ve erişilebilirlik için tamamen ölçeklenebilir durumda kalır.

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

Ama "yani 12 pt =% 100" derseniz, o zaman önce tanımlamanız gerekir font-size: 12pt. Bu şekilde mi çalışıyor? Öncelikle mutlak ölçüdeki bir boyutu tanımlarsınız ve sonra buna '% 100' denir? Birçok numunenin koymanın faydalı olduğunu söylediği gibi çok mantıklı değil:

body {
  font-size: 100%;
}

Peki bunu yaparak , yazı tipi boyutu neye göre değişir ? Ekranımda gördüğüm boyutun her yazı tipi için farklı olduğunu fark ettim. Arial, örneğin Times New Roman'dan çok daha büyük görünüyor. Ayrıca, sadece bunu yaparsam, vücut büyüklüğü =% 100, bu tüm tarayıcılarda aynı olacağı anlamına mı gelir? Veya sadece mutlak bir değer tanımlarsam?

GÜNCELLEME, SAT TEMMUZ 23 TEMMUZ

Oraya geliyorum, ama lütfen bana katlan.

Bu nedenle, doğru anladıysam% değeri varsayılan tarayıcı yazı tipi boyutu ile ilgilidir. Güzel, ama yine bir kaç soru daha veriyor:

1. Bu standart boyut her tarayıcı sürümü için her zaman aynı mıdır, yoksa sürümler arasında farklılık gösterir mi?
2. BEN ! Google Chrome ayarlarını buldum (daha önce buna hiç bakmadım!) ve standart "serif", "sans-serif" ve "tek boşluk" ayarlarını görüyorum. Ancak bunu diğer yazı tipleri için nasıl yorumlayabilirim? Diyelim ki font: 100% Georgia;tarayıcının boyutu ne olacak? Serif için standart boyuta bakacak mı yoksa "Georgia" yazı tipine tarayıcı için standart boyut var mı
3. Çeşitli web siteleri ben okumak şeyler gibi 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. Ama şimdi öğrendiğim kadarıyla, yeniden boyutlandırılabilir metin (bu alıntıda önerdikleri gibi% veya em kullanarak) veya 'tarayıcılarda doğru, tutarlı yazı tipi boyutlarına' sahip olmanız (px veya baz olarak pt). Bu doğru mu?

Google Ayarları:

Bu, mutlak değerlerde boyutu tanımlamazsanız, işlerin nasıl görünebileceğini düşünüyorum .

Firefox için 16pt gibi bir tarayıcı varsayılanı, Firefox seçeneklerine giderek, İçerik sekmesini tıklayıp yazı tipi boyutunu kontrol ederek kontrol edebilirsiniz. Aynı işlemi diğer tarayıcılar için de yapabilirsiniz.

Şahsen web sitelerimin varsayılan yazı tipi boyutunu kontrol etmek istiyorum, bu nedenle her sayfada bulunan bir CSS dosyasında BODY varsayılanını aşağıdaki gibi ayarlayacağım:

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

Şimdi tüm HTML etiketlerimin yazı tipi boyutu 14 piksel yazı tipi boyutunu devralacak.

Diyelim ki tüm div'ler gövdeden% 10 daha büyük bir font büyüklüğüne sahip olmak istiyorum, sadece şunu yapıyorum:

div {
    font-size: 110%
}

Artık sayfalarımı görüntüleyen herhangi bir tarayıcı, tüm div'leri 15.4px gibi bir şey olması gereken gövdeye göre% 10 daha büyük hale getirecek.

Tüm div yazı tipi boyutu% 10 daha küçük olmasını isterseniz, ben:

div {
    font-size: 90%
}

Bu, tüm div'lerin yazı tipi boyutunun 12,6 piksel olmasını sağlar.

Ayrıca, yazı tipi boyutu devralındığından, her iç içe div öğesinin yazı tipi boyutunda% 10 oranında azalacağını bilmeniz gerekir:

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

İç div'in yazı tipi boyutu 11.34 piksel (12.6 pikselin% ​​90'ı) olabilir ve bu amaçlanmamış olabilir.

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

Anladığım kadarıyla, yazı tipi aşağıdaki gibi ayarlandığında

body {
  font-size: 100%;
}

tarayıcı yazı tipini o tarayıcı için kullanıcı ayarlarına göre oluşturur.

Spesifikasyon% olarak işlendiğini söylüyor

üst öğenin yazı tipi boyutuna göre

http://www.w3.org/TR/CSS1/#font-size

Bu durumda, tarayıcının ayarlandığı şeyi kastediyorum.

Değerindeki bir yüzdesi font-sizeözelliğine göre olan ana elemanın yazı tipi boyutu . CSS 2.1 bunu belirsiz ve kafa karıştırıcı bir şekilde söylüyor (“miras alınan yazı tipi boyutu” na atıfta bulunarak), ancak CSS3 Text bunu çok açık bir şekilde söylüyor .

bodyÖğenin üst öğesi kök öğedir, yani htmlöğedir. Stil sayfasında ayarlanmadığı sürece, kök öğenin yazı tipi boyutu uygulamaya bağlıdır. Genellikle kullanıcı ayarlarına bağlıdır.

font-size: 100%Herhangi bir stil sayfası kendi yazı tipi boyutunu ayarlamadıysa , bir öğe üst öğesinin yazı tipi boyutunu (aynı sonuca götürür) devraldığından, ayar birçok durumda anlamsızdır. Ancak, diğer stil sayfalarındaki (tarayıcı varsayılan stil sayfaları dahil) ayarları geçersiz kılmak yararlı olabilir.

Örneğin, bir inputöğenin tarayıcı stil sayfasında genellikle varsayılan yazı tipi boyutunu kopya metninden daha küçük yapan bir ayar vardır. Yazı tipi boyutunu aynı yapmak istiyorsanız,

girdi {font-size: 100%}

İçin bodyeleman, mantıksal olarak gereksiz ayar font-size: 100%o (muhtemelen artık önemini kaybetmiş olduğunu tarayıcılarda) bazı tarayıcı hataları karşı yardım inanılıyor olarak, oldukça sık kullanılır.

Pt veya px olarak bir değerle geçersiz kılmadığınız sürece varsayılan tarayıcı yazı tipi boyutuna göredir.

Partiye geç kaldığım için üzgünüm, ancak düzenlemenizde font: 100% Georgia, diğer cevapların yanıt vermediği hakkında bir yorum yapıyorsunuz .

Arasında bir fark vardır font: 100% Georgiave font-size:100%; font-family:'Georgia'. Tüm stenografi yöntemi bu olsaydı, yazı tipi boyutu parçası anlamsız olurdu. Ancak, varsayılan değerlerine de birçok özellik ayarlar: satır yüksekliği normal(veya yaklaşık 1.2), stil (italik olmayan) ve ağırlık (kalın olmayan) için aynen olur .

Bu kadar. Diğer cevaplar daha önce bahsettiğimiz her şeyden bahsetti.

İkna edici bir şekilde gösterdiğiniz gibi font-size: 100%;, tüm tarayıcılarda aynı görünmeyecektir. Ancak, yazı tipi yüzünüzü CSS dosyanızda ayarlayacaksınız, böylece bu tüm tarayıcılarda aynı (veya bir geri dönüş) olacaktır.

Tabanlı tasarımla font-size: 100%;birleştirirken çok yararlı olabileceğine inanıyorum em. Gibi bu makale gösterileri, bu çok esnek bir web sitesi oluşturmak olacaktır.

Bu ne zaman faydalıdır? Sitenizin ziyaretçilerin isteklerine uyum sağlaması gerektiğinde. Örneğin, varsayılan yazı tipi boyutunu 24 piksele yerleştiren yaşlı bir adamı ele alalım. Ya da büyük bir çözünürlüğü olan ve varsayılan yazı tipi boyutunu artıran küçük bir ekrana sahip biri, aksi takdirde şaşı olması gerekir. Çoğu site bozulur, ancak em tabanlı siteler bu durumlarla başa çıkabilir.

Bu yazı tipiyle tanımlanan varsayılan boyuta göre.

Birisi sayfanızı bir web tarayıcısında açarsa, kullandığı varsayılan yazı tipi ve yazı tipi boyutu vardır.

Anladığım kadarıyla, içeriğinizin yazı tipi ailesi ve yazı tipi boyutlarının farklı değerleriyle uyum sağlamasına yardımcı olur. Yazı tipi boyutunu devralma konusuna gelince, öğe için belirli bir yazı tipi boyutu vererek her zaman geçersiz kılabiliriz.

1996'YA GERİ DÖNEN TÜM ÖZELLİKLERE göre , yüzde değerleri font-sizeüst öğenin (hesaplanan) yazı tipi boyutunu gösterir.

<style>
div {
  font-size: 16px;
}
span {
  font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>

İşte bu kadar kolay.

Ya s, ya da daha da kötüsü, başka bir yüzde divgibi göreli bir yazı tipi boyutu bildirirse em?? Bkz . Yukarıdaki “hesaplanmış” . Mutlak birim ne olursa olsun, bağıl birim dönüştürülür.

Geriye kalan tek soru, kök öğede üst öğesi olmayan bir yüzde değeri kullandığınızda ne olacağıdır:

html {
  font-size: 62.5%; /* 62.5% of what? */
}

Bu durumda, bu sorunun “kopyası” na bakın . TLDR: kök öğedeki yüzdeler, kullanıcı başına farklı olabilecek tarayıcının varsayılan yazı tipi boyutunu belirtir.

Referanslar:

• CSS 1 spec (1996)
• CSS 2.1 spec (2011)
• CSS Yazı Tipleri Level 3 spec (2013)
• CSS Fonts Level 3 Editörün Taslağı (2017)