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ń:
- 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?
- 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 - 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.
font-size
za pomocą jednostki względne, takie jakem
,rem
lub%
. Użyciepx
spowoduje nadpisanie domyślnego rozmiaru czcionki przeglądarki! Wielu użytkowników określa niestandardowy rozmiar czcionki, aby ułatwić czytanie tekstu.Rozumiem, że kiedy czcionka jest ustawiona w następujący sposób
przeglądarka wyrenderuje czcionkę zgodnie z ustawieniami użytkownika dla tej przeglądarki.
Specyfikacja mówi, że% jest renderowany
http://www.w3.org/TR/CSS1/#font-size
W tym przypadku rozumiem, że oznacza to ustawienie przeglądarki.
źródło
body
jesthtml
. więcbody { font-size: 100%; }
będzie to 100%html
rozmiaru czcionki, a nie domyślna przeglądarka. Zwykle jednak są one takie same, więc masz właściwie rację. Ale czasami zobaczyszhtml { font-size: ??? }
regułę.Procent wartości
font-size
wł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
body
elementu jest element główny, czylihtml
element. 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
input
element 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
body
elementu ustawienie logicznie redundantnefont-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).źródło
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 ...Jest względny w stosunku do domyślnego rozmiaru czcionki przeglądarki, chyba że zastąpisz go wartością w pt lub pikselach.
źródło
body
, a nie arbitralnie zagnieżdżony element, więc odpowiedź jest poprawna z małą gwiazdką :)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% Georgia
ifont-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 wynosinormal
(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ć.
źródło
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 zem
projektowaniem 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.
źródło
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.
źródło
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.
źródło
Zgodnie z ALL THE SPECS DATING BACK TO 1996 , procentowe wartości
font-size
odnoszą się do (obliczonego) rozmiaru czcionki elementu nadrzędnego .To jest takie proste.
Co jeśli
div
deklaruje względny rozmiar czcionki, na przykładem
s, 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:
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:
źródło