CSS: 100% rozmiaru czcionki - 100% czego?

138

Istnieje wiele artykułów i pytań dotyczących czcionek o rozmiarze procentowym w porównaniu z innymi rozmiarami . Nie mogę jednak dowiedzieć się, JAKIE ma być odniesienie do wartości procentowej. Rozumiem, że jest to „ten sam rozmiar we wszystkich przeglądarkach”. Czytałem też to, na przykład:

Procent (%): Jednostka procentowa jest podobna do jednostki „em”, z wyjątkiem kilku podstawowych różnic. Przede wszystkim aktualny rozmiar czcionki wynosi 100% (tj. 12 pkt = 100%). Używając jednostki procentowej, tekst pozostaje w pełni skalowalny pod kątem urządzeń mobilnych i ułatwień dostępu.

Źródło: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Ale jeśli powiesz „tj. 12 pt = 100%”, oznacza to, że najpierw musisz zdefiniować font-size: 12pt. Czy tak to działa? Najpierw określasz rozmiar w miarę bezwzględną, a następnie nazywasz to „100%”? Nie ma to większego sensu, ponieważ wiele próbek mówi, że warto umieścić:

body {
  font-size: 100%;
}

Więc robiąc to, JAKI jest rozmiar czcionki w stosunku do? Zauważyłem, że rozmiar, który widzę na ekranie, różni się dla każdej czcionki. Na przykład Arial wygląda na znacznie większy niż Times New Roman. Ponadto, gdyby po prostu to zrobić, rozmiar ciała = 100%, będzie to oznaczać, że będą takie same we wszystkich przeglądarkach? Czy tylko wtedy, gdy najpierw zdefiniuję wartość bezwzględną?

AKTUALIZACJA, SOB 23 LIPCA

Idę tam, ale proszę o wyrozumiałość.

Tak więc wartość% odnosi się do domyślnego rozmiaru czcionki przeglądarki, jeśli dobrze rozumiem. Cóż, to miłe, ale znowu daje mi kilka innych pytań:

  1. Czy ten standardowy rozmiar jest zawsze taki sam dla każdej wersji przeglądarki, czy też różni się w zależności od wersji?
  2. JA ! Znalazłem (patrz obrazek poniżej) ustawienia przeglądarki Google Chrome (nigdy wcześniej tego nie oglądałem!) i widzę standardowe ustawienia „szeryfowe”, „bezszeryfowe” i „monospace”. Ale jak mam to zinterpretować w przypadku innych czcionek? Powiedz, że zdefiniuję font: 100% Georgia;, jaki rozmiar będzie miała przeglądarka? Czy będzie wyszukiwać standardowy rozmiar szeryfowy, czy też czcionka „Georgia” będzie miała standardowy rozmiar przeglądarki
  3. Na kilku stronach internetowych czytam np 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. Ale z tego, czego się teraz dowiaduję, uważam, że w rzeczywistości powinieneś wybierać między tekstem o zmiennym rozmiarze (używając% lub em, jak zalecają w tym cytacie) lub posiadaniem `` dokładnych, spójnych rozmiarów czcionek w różnych przeglądarkach '' (używając px lub pt jako podstawa). Czy to jest poprawne?

Ustawienia Google:

Google Chrome Settinsg

To jak ja myśleć rzeczy mogłyby wyglądać, jeśli nie określają wielkości w wartościach bezwzględnych.

wprowadź opis obrazu tutaj

user852091
źródło

Odpowiedzi:

89

Domyślna przeglądarka, czyli około 16 punktów dla przeglądarki Firefox. Możesz to sprawdzić, przechodząc do opcji przeglądarki Firefox, klikając kartę Zawartość i sprawdzając rozmiar czcionki. Możesz zrobić to samo dla innych przeglądarek.

Osobiście lubię kontrolować domyślny rozmiar czcionki na moich stronach internetowych, więc w pliku CSS, który jest zawarty na każdej stronie, ustawię domyślną wartość BODY, na przykład:

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

Teraz rozmiar czcionki wszystkich moich tagów HTML będzie dziedziczyć rozmiar czcionki 14px.

Powiedz, że chcę, aby wszystkie elementy div miały rozmiar czcionki o 10% większy niż body, po prostu robię:

div {
    font-size: 110%
}

Teraz każda przeglądarka, która przegląda moje strony, automatycznie sprawi, że wszystkie elementy div o 10% będą większe niż te w treści, co powinno mieć około 15,4 piksela.

Jeśli chcę, aby rozmiar czcionki wszystkich elementów div był o 10% mniejszy, robię:

div {
    font-size: 90%
}

Dzięki temu wszystkie elementy DIV będą miały rozmiar czcionki 12,6 piksela.

Powinieneś także wiedzieć, że ponieważ rozmiar czcionki jest dziedziczony, każdy zagnieżdżony element div zmniejszy rozmiar czcionki o 10%, więc:

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

Wewnętrzny element div będzie miał rozmiar czcionki 11,34px (90% z 12,6px), co mogło nie być zamierzone.

Może to pomóc w wyjaśnieniu: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

b01
źródło
Dzięki! To sprawia, że ​​jest dużo jaśniejszy. Ale nadal zastanawiam się nad artykułami, które twierdzą, że są „dokładność” lub „spójność”, gdy używam%. Wydaje się, że to NIEPOPRAWNE, jeśli poprawnie zinterpretuję twoją odpowiedź. Zaktualizowałem pytanie o kilka dodatkowych pytań ...
user852091
3
Odpowiedź na zadane pytanie (100% czego?) Jest nieprawidłowa, jest kilka nieścisłości (nie wszystkie elementy dziedziczą rozmiar czcionki), są notatki i opinie w sprawach, o które nie pytano.
Jukka K. Korpela
Należy wziąć pod uwagę gęstość pikseli. Coś, co stanowi 100% strony na telefonie 4K, będzie myśleć, że ma tysiące pikseli w rozdzielczości poziomej i pionowej. W przypadku treści Flash z NO_SCALE, np. Aplikacji internetowych itp., Elementy sterujące będą niewielkie, zwłaszcza menu, na przykład na LG G3. Dotyczy to również niektórych treści HTML, które mają rozmiar odpowiadający pikselom. Tak czy inaczej, należy wziąć pod uwagę gęstość pikseli (piksele na cal), albo poprzez użycie całkowicie względnych jednostek, albo dynamiczną zmianę rozmiaru opartą na JavaScript.
Triynko,
1
Potwierdzono, że nowoczesne przeglądarki nadal domyślnie używają 12 punktów / 16 pikseli przy 96 pikselach na cal. Z drugiej strony możesz użyć „rem” zamiast „em”, aby zawsze skalować określony element względem katalogu głównego (element html lub domyślna przeglądarka). Może być przydatny w przypadku złożonej hierarchii elementów o stosunkowo dużych rozmiarach.
Beejor
Lepiej ustawić font-sizeza pomocą jednostki względne, takie jak em, remlub %. Użycie pxspowoduje nadpisanie domyślnego rozmiaru czcionki przeglądarki! Wielu użytkowników określa niestandardowy rozmiar czcionki, aby ułatwić czytanie tekstu.
mfluehr,
15

Rozumiem, że kiedy czcionka jest ustawiona w następujący sposób

body {
  font-size: 100%;
}

przeglądarka wyrenderuje czcionkę zgodnie z ustawieniami użytkownika dla tej przeglądarki.

Specyfikacja mówi, że% jest renderowany

w stosunku do rozmiaru czcionki elementu nadrzędnego

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

W tym przypadku rozumiem, że oznacza to ustawienie przeglądarki.

Jason Gennaro
źródło
w rzeczywistości rodzicem bodyjest html. więc body { font-size: 100%; }będzie to 100% htmlrozmiaru czcionki, a nie domyślna przeglądarka. Zwykle jednak są one takie same, więc masz właściwie rację. Ale czasami zobaczysz html { font-size: ??? }regułę.
chharvey
9

Procent wartości font-sizewłaściwości jest określony w stosunku do rozmiaru czcionki elementu nadrzędnego . CSS 2.1 mówi o tym w sposób niejasny i mylący (odnosząc się do „odziedziczonego rozmiaru czcionki”), ale CSS3 Text mówi to bardzo wyraźnie.

Rodzicem bodyelementu jest element główny, czyli htmlelement. O ile nie jest to ustawione w arkuszu stylów, rozmiar czcionki elementu głównego jest zależny od implementacji. Zwykle zależy to od ustawień użytkownika.

font-size: 100%W wielu przypadkach ustawienie jest bezcelowe, ponieważ element dziedziczy rozmiar czcionki swojego rodzica (prowadząc do tego samego wyniku), jeśli żaden arkusz stylów nie ustawia własnego rozmiaru czcionki. Jednak może być przydatne zastąpienie ustawień w innych arkuszach stylów (w tym domyślnych arkuszach stylów przeglądarki).

Na przykład inputelement zazwyczaj ma ustawienie w arkuszu stylów przeglądarki, dzięki czemu jego domyślny rozmiar czcionki jest mniejszy niż rozmiar kopiowanego tekstu. Jeśli chcesz, aby rozmiar czcionki był taki sam, możesz ustawić

wejście {font-size: 100%}

W przypadku bodyelementu ustawienie logicznie redundantne font-size: 100%jest używane dość często, ponieważ uważa się, że zapobiega niektórym błędom przeglądarki (w przeglądarkach, które prawdopodobnie straciły teraz na znaczeniu).

Jukka K. Korpela
źródło
3
font-size:100%Jedynym przypadkiem, w którym może służyć celowi, jest tryb Osobliwości, w którym rozmiary czcionek nie są dziedziczone w tabelach. W tym stylu tabele otrzymują rozmiar czcionki nadrzędnej. Oczywiście, nikt przy zdrowych zmysłach nie używa już trybu dziwactw ...
Pan Lister,
4

Jest względny w stosunku do domyślnego rozmiaru czcionki przeglądarki, chyba że zastąpisz go wartością w pt lub pikselach.

RocketR
źródło
Więc to się zmieniłoby, gdyby każda przeglądarka?
user852091
2
Tak, każda przeglądarka ma własne ustawienia domyślne, w tym rozmiar czcionki. Dlatego zwykle musisz użyć resetowania css.
RocketR
1
To jest niepoprawne. Jest to procent elementu nadrzędnego. Być może występuje procent domyślnego rozmiaru czcionki, ponieważ element nadrzędny odziedziczył domyślny rozmiar czcionki.
Zectbumo
@Zectbumo Racja, niezbyt precyzyjne. Ale pytanie wspomina body, a nie arbitralnie zagnieżdżony element, więc odpowiedź jest poprawna z małą gwiazdką :)
RocketR
: - / z wyjątkiem tego, że jest zagnieżdżony, ponieważ rodzicem <body> jest <html>
Zectbumo
4

Przepraszam, jeśli spóźnię się na imprezę, ale w swoim redagowaniu piszesz uwagę font: 100% Georgia, na którą inne odpowiedzi nie odpowiedziały.

Istnieje różnica między font: 100% Georgiai font-size:100%; font-family:'Georgia'. Gdyby to wszystko robiła metoda stenograficzna, część dotycząca rozmiaru czcionki byłaby bez znaczenia. Ale ustawia również wiele właściwości na ich wartości domyślne: wysokość linii wynosi normal(lub około 1,2), tak samo dla stylu (bez kursywy) i grubości (bez pogrubienia).

To wszystko. Pozostałe odpowiedzi już dotyczyły wszystkiego innego, o czym należało wspomnieć.

Panie Lister
źródło
3

Jak przekonująco pokazałeś, font-size: 100%;nie będzie renderować się tak samo we wszystkich przeglądarkach. Jednak ustawisz krój czcionki w pliku CSS, więc będzie to takie samo (lub rezerwowe) we wszystkich przeglądarkach.

Uważam, że font-size: 100%;może być bardzo przydatne w połączeniu z emprojektowaniem opartym na technologii. Jak pokazuje ten artykuł , stworzy to bardzo elastyczną stronę internetową.

Kiedy jest to przydatne? Kiedy Twoja witryna musi dostosować się do życzeń odwiedzających. Weźmy na przykład starszego mężczyznę, który ustawia domyślny rozmiar czcionki na 24 piksele. Lub ktoś z małym ekranem o dużej rozdzielczości, który zwiększa domyślny rozmiar czcionki, ponieważ w przeciwnym razie musi mrużyć oczy. Większość witryn by się zepsuła, ale witryny oparte na em są w stanie poradzić sobie w takich sytuacjach.

Tim
źródło
1

Względem domyślnego rozmiaru zdefiniowanego dla tej czcionki.

Jeśli ktoś otworzy Twoją stronę w przeglądarce internetowej, użyje domyślnej czcionki i rozmiaru czcionki.

Yochai Timmer
źródło
0

W moim rozumieniu pomaga to dostosować treść do różnych wartości rodziny czcionek i rozmiarów czcionek, dzięki czemu treść jest skalowalna. Jeśli chodzi o kwestię dziedziczenia rozmiaru czcionki, zawsze możemy nadpisać, podając konkretny rozmiar czcionki dla elementu.

Mith
źródło
0

Zgodnie z ALL THE SPECS DATING BACK TO 1996 , procentowe wartości font-sizeodnoszą się do (obliczonego) rozmiaru czcionki elementu nadrzędnego .

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

To jest takie proste.

Co jeśli divdeklaruje względny rozmiar czcionki, na przykład ems, lub co gorsza, inny procent? Zobacz „obliczone” powyżej. Bez względu na jednostkę bezwzględną, na którą jednostka względna jest konwertowana.

Pozostaje tylko pytanie, co się stanie, gdy użyjesz wartości procentowej w elemencie głównym, który nie ma rodzica:

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

W takim przypadku zobacz „duplikat” tego pytania. TLDR: wartości procentowe w elemencie głównym odnoszą się do domyślnego rozmiaru czcionki przeglądarki, który może różnić się w zależności od użytkownika.

Bibliografia:

chharvey
źródło