CSS'de yazı tipi boyutu -% veya em?

112

CSS'de yazı tiplerinin boyutunu ayarlarken, yüzde değeri ( %) emmi kullanmalıyım? Avantajı açıklayabilir misin?

css fonts font-size

— Minderleri
kaynak

1

Bence 2016 yılında em ile% arasında bir fark yok. İ girdi 1.2 hepsini modern tarayıcılar i% 120 kullanmış ve örneğin ben 0,7 em tüm modern tarayıcılarda i% 70 kullandık düşünüyor kullanırsanız düşünüyorsa ... Bu şimdiye CSS yaşamış budur

— Mehdi Jazini

79

A List Apart'ta web tipografisi hakkında gerçekten güzel bir makale var .

Sonuç:

Metni ve satır yüksekliğini, gövdede belirtilen bir yüzdeyle (ve Safari 2 için isteğe bağlı bir uyarı) boyutlandırmanın, bugün yaygın olarak kullanılan tüm tarayıcılarda doğru, yeniden boyutlandırılabilir metin sağladığı gösterildi. Bu, kit çantanıza koyabileceğiniz ve hem tasarımcıları hem de okuyucuları tatmin eden CSS'deki metni boyutlandırmak için en iyi uygulama olarak kullanabileceğiniz bir tekniktir.

— Glenn Slaven
kaynak

29

Aslında hiçbir birim olmadanline-heights daha iyi yazılır . Buna şartname izin veriyor ve satır yükseklikleri söz konusu olduğunda, gerçekten sinir bozucu bazı tarayıcı tuhaflıklarını tamamen ortadan em

— kaldırıyor

16

İnsanları bu makalenin 2007 yılına ait olduğu konusunda bilgilendirmek istiyorum. O zamandan beri modern tarayıcılar daha yaygın hale geldi ve modern tarayıcılar varsayılan olarak yazı tipi boyutunu artırmak yerine genellikle yakınlaştırma yapıyor. Bu nedenle, 'px' daha yaygın hale geldi ve bence daha iyi bir yaklaşım. Elbette bu tartışmalı ama ben şahsen projelerde yuvalanması nedeniyle sorunlarla karşılaştım.

— Mohag519

5

@ Mohag519 onların iç içe geçmesi tehlikeli bir tuzaktır. :)

— Vishnudev K

@ Mohag519 px, yüksek piksel yoğunluğuna sahip mobil cihazlarda amaçlanandan çok daha küçük bir şey vermeyecek mi? Sitelerimizin tam olarak masaüstü gibi olmasını ancak mobil cihazlarda çok küçük olmasını istediğimizi sanmıyorum;)

— johnb003

@ johnb003 Bu tür mobil cihazlar, daha büyük bir cihaz piksel oranına sahiptir 1. Örneğin, iPhone 4'ün fiziksel ekran genişliği 640px'dir, ancak 320 "CSS" pikseli olarak görünür (DPR = 2). Yani web sitesi daha küçük görünmüyor!

— Benjamin

14

Http://archivist.incutio.com/viewlist/css-discuss/1408 adresinden

%: Bazı tarayıcılar yazı tipi boyutu yüzdesini işlemez ancak% 150'yi 150px olarak yorumlar. (Örneğin, bazı NN4 sürümleri.) IE'nin iç içe geçmiş elemanlarda da yüzde ile sorunları var. Görünüşe göre IE, ana öğeye göre değil, görüntü alanına göre yüzde kullanıyor. Yine başka bir sorun (W3C özelliklerine göre doğru olsa da), Moz / Ns6'da, yüksekliği / genişliği belirtilmemiş elemanlara göre yüzde kullanamazsınız.

em: Bazen tarayıcılar yanlış referans boyutunu kullanır, ancak ilgili birimler arasında en az sorunlu olanıdır. Yine de bazen piksel olarak yorumlandığını görebilirsiniz.

pt: Çözünürlükler arasında büyük ölçüde farklılık gösterir ve görüntüleme için kullanılmamalıdır. Yine de baskı kullanımı için oldukça güvenlidir.

px: Ekrandaki tek güvenilir mutlak birim. Baskıda yanlış yorumlanabilir, çünkü bir nokta genellikle birkaç pikselden oluşur ve bu nedenle her şey gülünç derecede küçülür.

— Galwegian
kaynak

Pt şey hakkında. / Konusunda harika bir tartışmam vardı. bunun hakkında (ve kayıp). Seninle aynı bakış açısına sahiptim, birinin bu pov'u paylaştığını bilmek güzel :)

— Vincent McNabb

12

Yazı tipi boyutları için yüzdeler kullanırsam, bazı Netscape Navigator 4 kullanıcılarının sayfamı doğru görüntüleyemeyeceğini gerçekten mi söylüyorsunuz?

— newbie

4

Alıntı yapılan tartışma 2002'den. Bu hala geçerli mi? Em veya% bugs ile aktif olarak kullanılan tarayıcılar var mı?

— Beni Cherniavsky-Paskin

1

Tarayıcılarda 20 yıllık hatalardan alıntı yapmak faydalı bir cevap değildir.

— d512

7

Her ikisi de yazı tipi boyutunu eskisine göre ayarlar. 1.5em% 150 ile aynıdır. Tek avantaj okunabilirlik gibi görünüyor, hangisini en rahat ediyorsanız seçin.

— Liam
kaynak

Birisi bana bunun neden reddedildiğini açıklayabilir mi? Em ve yüzde arasındaki farkı tam olarak bu şekilde anladım. Günümüzde birini diğerine göre kullanmanın hiçbir avantajı yok. Önemli olan, temel yazı tipi boyutuna göre bir boyut kullanmanızdır.

— Lee Theobald

1

Teşekkürler Lee, bunu IE6, IE7, Firefox 3, Safari 3, Opera 9.5 ve Google Chrome'da test ettim, hepsi Windows'da ve hepsi bana aynı görünüyor! <p style = "font-size: 0.6em;"> bu bir testtir </p> <p style = "font-size: 60%;"> bu bir testtir </p>

— Liam

7

Yazı tipi boyutları için kullanmadığınızda asıl fark ortaya çıkıyor. Bir ayarlama paddingait 1emaynı değildir 100%. emher zaman yazı tipi boyutuna bağlıdır. Ama %yazı tipi boyutu, genişliği, yüksekliği ve muhtemelen bilmediğim diğer şeylerle ilgili olabilir.

— Björn Tantau
kaynak

5

(Neredeyse?) Tüm tarayıcılar artık, tıpkı Metin yerine, bir bütün olarak önceki sorunları sayfasını yeniden boyutlandırmak göz önüne alındığında pxvs %vsem erişilebilir yazı yeniden boyutlandırma açısından ler oldukça tartışma vardır.

Yani cevap, muhtemelen önemli olmadığıdır. Size uygun olanı kullanın.

% güzeldir çünkü göreli yeniden boyutlandırmaya izin verir.

px güzel çünkü kullanırken beklentileri yönetmek oldukça kolaydır.

em metin boyutuyla ilgili orantılı boyutlandırmaya izin verebileceğinden, mizanpaj öğeleri için de kullanıldığında yararlı olabilir.

— DA.
kaynak

Özellikle CSS hakkında fazla bir şey bilmeyenler için yanıltıcı cevap. CSS'nin mantıksal pikselleri tanımladığı gerçeğini göz ardı ederek, on yıl önce CSS özellikli mobil cihazların saldırısına uyum sağlama konusunda şüphesiz aceleci bir karara dayanan korkunç bir fikirdi, pikseller varsayılan yazı tipi boyutuna göre tamamen tarayıcıların ve kullanıcıların takdirine bağlıdır. , en azından. Buna ek olarak, artık widly farklı ekran boy oranları (ve her zaman cihazların sahip olan bir ekran) ve 240p den 2400p kadar çözünürlükleri. CSS'de pikselleri JavaScript olmadan kullanmak neredeyse işe yaramaz.

— amn

@amn peki, bu cevabın 8 yaşında olduğuna dikkat edin. İnternet saatinde bu UZUN bir süredir. Bununla birlikte, ideal değilse pikseller hala iyidir. Çoğu (tümü?) Tarayıcı, belirli cihazda piksel yazı tipi boyutlandırmasını uygun şekilde barındırır. Yine de bugün, ölçü birimim olarak genellikle rem kullanırdım.

— DA.

Belki bir şeyi kaçırıyorum, ancak birinin piksel uzunluklarına sahip olması ne fayda sağlar? Neden "iyi" veya "ideal"? Karşı em, örneğin. Bunun yanı sıra, SO ile ilgili yanıtların zamandan bağımsız olmaya çalışması gerektiğini düşünüyorum - sonuçta bu bir bilgi tabanı. Programlama Wikipedia :) Wikipedia gerçekleri yansıtacak şekilde güncellendiğinden, benim mütevazı görüşüme göre SO yanıtları da aynı şekilde olmalıdır.

— amn

@amn İdeal olduklarını veya gerçekten büyük bir faydası olduğunu söylemedim. Sadece OP'nin sorusunu yanıtlıyordum. Zamansız olmak için çabalamaya gelince, 8 yıl sonra web'in geleceğini tahmin edebiliyorsanız, size daha fazla güç! Ancak, burada verdiğim on yıllık cevaplarımı sürekli güncelleyecek vaktim yok. Umarım insanlar cevaplardaki zaman damgalarına bakacak ve bunu dikkate alacak kadar bilgi sahibidir.

— DA.

0

Css birimleri arasındaki farkla ilgili olarak %ve em.

Bildiğim kadarıyla anladığım kadarıyla bu iki ünite yani çarpma senin eğer eşdeğerdir (teorik / kavramsal, ama muhtemelen bu iki ünite tarayıcılarda uygulanabileceği değil nasıl en az) emile değer 100ve sonra değiştirin emile% bunun aynı şey olmalıdır?

Em ve% arasında gerçekten gerçek bir fark varsa, o zaman birisi bunu açıklayabilir (veya bir açıklamaya bağlantı sağlayabilir)?

(Bu "Liam, answered Sep 25 '08 at 11:21"yorumumu ait olduğu yere eklemek istedim, yani cevabın hemen altına girintili olarak cevabının neden olumsuz oy verildiğini de bilmek istiyorum, ancak yorumumu oraya nasıl koyacağımı bilemedim ve bu nedenle yazmak zorunda kaldım bu "konu genel" yanıtı)

— user743436
kaynak

-1

Galwegian'ın da belirttiği gibi px, web tipografisi için en güvenilir olanıdır, çünkü sayfada yaptığınız diğer her şey çoğunlukla bir bilgisayar monitörüne referansla düzenlenmiştir. Mutlak boyutlarla ilgili sorun, bazı tarayıcıların (IE) bir web sayfasındaki piksel değeri öğelerini ölçeklendirmemesidir, bu nedenle yakınlaştırmaya / uzaklaştırmaya çalıştığınızda , bu öğeler dışındaki her şey ayarlanır.

IE8'in bunu düzgün bir şekilde ele alıp almadığını bilmiyorum, ancak diğer tüm tarayıcı satıcıları pikselleri gayet iyi kullanıyor ve bu, kullanıcının metni büyütmesi / küçültmesi gereken bir azınlık durumu (SO'daki bu metin kutusu belki de istisnadır). Gerçekten kirlenmek istiyorsanız, metin boyutunuzu büyütmek için her zaman bir javascript işlevi ekleyebilir ve kullanıcıya "küçük" / "daha büyük" bir düğme sunabilirsiniz.

— Christian P.
kaynak

1

IE7, yakınlaştırmayı kullanırsanız piksel değerlerini iyi ölçeklendirir. IE6'da yakınlaştırma yoktu, yalnızca metin boyutu vardı. Sayfanın metin boyutu değişiklikleriyle yeniden akmasına izin vermek yerine sabit piksel ölçekleri kullanan tasarımcılar nedeniyle yakınlaştırma bir gereklilik haline geldi.

— Mike Dimmick

Hala IE6 ile ilgili bir sorun, ancak yine de HER ŞEY hala IE6 ile ilgili bir sorun. Geçmişte bu nedenle pikselden kaçınmış olsam da, bir bütün olarak web sayfasını yakınlaştırma kavramı (metne kıyasla) standart hale geldi ve kendimi çok daha sık piksel kullanırken buldum.

— DA.

-1

Yahoo Kullanıcı Arayüzü kitaplığı ( http://developer.yahoo.com/yui/ ), tarayıcıya özgü ayarları "sıfırlamak" için kullanılan güzel bir temel css sınıfları kümesine sahiptir, böylece siteyi görüntülemenin temeli herkes için aynıdır (desteklenen) tarayıcılar.

YUI ile birinin yüzdeleri kullanması gerekiyor.

— kosoant
kaynak

YUI sıfırlamayı kullanıyorum, ancak daha sonra tarayıcının metin boyutu ayarlarının ÇALIŞMAYIN! Metin boyutu ayarlarını bozduğundan gövdede piksel ayarınız varsa,% kullanımında herhangi bir nokta görmeyin.

— Jason