CSS: 100% rozmiaru czcionki - 100% czego?

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:

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

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

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.

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).

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

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ć.

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.

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.

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.

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:

• Specyfikacja CSS 1 (1996)
• Specyfikacja CSS 2.1 (2011)
• Specyfikacja czcionek CSS poziomu 3 (2013)
• Wersja robocza redaktora czcionek CSS poziomu 3 (2017)