CSS: 100% font size-100% of what?
Istnieje Wiele artykuły i pytania o wielkości procentowe vs inne wielkości czcionki. Nie mogę jednak dowiedzieć się, jaka powinna być wartość procentowa. Rozumiem, że jest to "ten sam rozmiar we wszystkich przeglądarkach". Czytam też to, na przykład:
Procent ( % ): Jednostka procentowa jest podobna do jednostki "em", z wyjątkiem kilku podstawowych różnic. Przede wszystkim obecny rozmiar czcionki jest równy 100% (tj. 100%). Podczas korzystania z jednostki procentowej tekst pozostaje w pełni skalowalny dla urządzeń mobilnych i dostępności.
Źródło: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
Ale jeśli powiesz " ie 12 pt = 100%", oznacza to, że najpierw musisz zdefiniować font-size: 12pt. Tak to działa? Najpierw definiujesz rozmiar w miarze bezwzględnej, a następnie określasz go jako " 100%"? Nie ma to większego sensu, ponieważ wiele próbek twierdzi, że jest to przydatne do umieścić:
body {
font-size: 100%;
}
Więc robiąc to, jaki jest rozmiar czcionki względem? Zauważyłem, że rozmiar, który widzę na ekranie, różni się dla każdej czcionki. Arial wygląda na znacznie większego niż Times New Roman, na przykład. Ponadto, jeśli po prostu to zrobić, body size = 100%, czy że oznacza, że będzie to takie samo na wszystkich przeglądarkach? Czy tylko wtedy, gdy najpierw zdefiniuję wartość bezwzględną?
UPDATE, SOB LIP 23
Dochodzę do tego, ale proszę o cierpliwość.
Więc, wartość % odnosi się do domyślnego rozmiaru czcionki przeglądarki, jeśli dobrze rozumiem. No to fajnie ale daje mi jeszcze kilka innych pytań:
- czy ten standardowy rozmiar jest zawsze taki sam dla każdej wersji przeglądarki, czy różnią się one między wersjami? Ja ! znalazłem (patrz obrazek poniżej) ustawienia dla Google Chrome (nigdy nie patrzyłem na to wcześniej!), i widzę standardowe ustawienia "serif", "sans-serif" i "monospace". Ale jak zinterpretować to dla innych czcionek? Say I define
- na kilku stronach internetowych i przeczytać rzeczy jak
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 uczę, uważam, że powinieneś wybrać między tekstem zmieniającym rozmiar (używając % lub em, jak to, co zalecają w tym cytacie) lub "dokładnymi, spójnymi rozmiarami czcionek w różnych przeglądarkach" (używając px lub pt jako bazy). Czy to prawda?
font: 100% Georgia;, jaki rozmiar przyjmie przeglądarka? W przeciwieństwie do większości przeglądarek internetowych, w przeglądarce nie jest dostępna wersja standardowa.]}
Google Ustawienia:
Tak myślę rzeczy mogą wyglądać, jeśli nie zdefiniujesz wielkości w wartościach bezwzględnych.
9 answers
Domyślna przeglądarka, która jest czymś w rodzaju 16pt dla Firefoksa, możesz sprawdzić, przechodząc do opcji Firefoksa, klikając kartę zawartość i sprawdzając rozmiar czcionki. To samo możesz zrobić również w innych przeglądarkach.
Osobiście lubię kontrolować domyślny rozmiar czcionki na moich stronach, więc w pliku CSS, który jest zawarty na każdej stronie, ustawię domyślną treść, Tak:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px
}
Teraz rozmiar czcionki wszystkich moich znaczników HTML będzie dziedziczył rozmiar czcionki 14px.
Powiedz, że chcę a wszystkie divy mają rozmiar czcionki 10% większy niż body, po prostu robię:
div {
font-size: 110%
}
Teraz każda przeglądarka, która przegląda moje strony, automatycznie zrobi wszystkie divy o 10% większe niż ciało, które powinno być jakieś 15.4 px.
Jeśli chcę, aby rozmiar czcionki wszystkich div był o 10% mniejszy, robię to:
div {
font-size: 90%
}
Spowoduje to, że wszystkie divy będą miały rozmiar czcionki 12,6 px.
Powinieneś również wiedzieć, że Ponieważ rozmiar czcionki jest dziedziczony, każdy zagnieżdżony div zmniejszy rozmiar czcionki o 10%, więc:
<div>Outer DIV.
<div>Inner DIV</div>
</div>
Wewnętrzny div będzie miał rozmiar czcionki 11,34 px (90% z 12,6 px), co może nie być zamierzone.
To może pomóc w wyjaśnieniu: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-05 20:49:43
Rozumiem, że gdy 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 renderowane
Względem rozmiaru czcionki elementu nadrzędnego
Http://www.w3.org/TR/CSS1/#font-size
W tym przypadku rozumiem, że oznacza to, na co jest ustawiona przeglądarka.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-23 20:22:35
Procent wartości właściwości font-size jest względem rozmiaru czcionki elementu nadrzędnego . CSS 2.1 mówi to niejasno i myląco (odnosząc się do "odziedziczonego rozmiaru czcionki"), ale tekst CSS3 mówi bardzo wyraźnie.
Rodzicem elementu body jest element root, czyli element html. Rozmiar czcionki elementu głównego zależy od implementacji, chyba że jest ustawiony w arkuszu stylów. Zazwyczaj zależy to od ustawień użytkownika.
Ustawienie font-size: 100% jest nie ma sensu w wielu przypadkach, ponieważ element dziedziczy rozmiar czcionki rodzica (co prowadzi do tego samego wyniku), jeśli żaden arkusz stylów nie ustawi własnego rozmiaru czcionki. Przydatne może być jednak nadpisanie ustawień w innych arkuszach stylów(w tym domyślnych arkuszach stylów przeglądarki).
Na przykład element input zazwyczaj ma ustawienie w arkuszu stylów przeglądarki, co powoduje, że jego domyślny rozmiar czcionki jest mniejszy niż rozmiar kopiowanego tekstu. Jeśli chcesz, aby rozmiar czcionki był taki sam, możesz ustawić
Input { font-size: 100% }
Dla elementu body, logicznie nadmiarowe ustawienie font-size: 100% jest dość często używane, ponieważ uważa się, że pomaga w walce z niektórymi błędami przeglądarki (w przeglądarkach, które prawdopodobnie straciły na znaczeniu).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-21 20:07:56
Jest względny do domyślnego rozmiaru czcionki przeglądarki, chyba że Nadpisz ją wartością w pt lub px.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-23 20:14:51
Przepraszam za spóźnienie się na imprezę, ale w swoim edytorze robisz uwagę na temat font: 100% Georgia, na które Inne odpowiedzi nie odpowiedziały.
Istnieje różnica między font: 100% Georgia i font-size:100%; font-family:'Georgia'. Gdyby to była tylko metoda skrótu, część o rozmiarze czcionki byłaby bez znaczenia. Ale ustawia również wiele właściwości na ich domyślne wartości: wysokość linii staje się normal (lub około 1.2), podobnie dla stylu (nie kursywa) i wagi (nie pogrubienie).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-13 16:19:03
Jak pokazałeś przekonująco, font-size: 100%; nie będzie renderować tego samego we wszystkich przeglądarkach. Jednak ustawisz twarz czcionki w pliku CSS, więc będzie to takie samo (lub awaryjne) we wszystkich przeglądarkach.
Uważam, że font-size: 100%; może być bardzo przydatny przy łączeniu go z konstrukcją opartą na em. Jak pokazuje Ten artykuł, stworzy to bardzo elastyczną stronę internetową.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-13 16:30:59
Względem domyślnego rozmiaru zdefiniowanego dla tej czcionki.
Jeśli ktoś otworzy Twoją stronę w przeglądarce internetowej, istnieje domyślna czcionka i rozmiar czcionki, której używa.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-23 20:15:55
Jeśli chodzi o moje zrozumienie, pomaga dostosować treść za pomocą różnych wartości rodziny czcionek i rozmiarów czcionek.Dzięki temu Twoja zawartość jest skalowalna. Co do kwestii inhering font size zawsze możemy nadpisać, podając konkretny rozmiar czcionki dla elementu.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-24 12:44:28
Zgodnie z wszystkie specyfikacje datowane na rok 1996, wartości procentowe na font-size odnoszą się do rozmiaru czcionki elementu nadrzędnego (obliczonego).
<style>
div {
font-size: 16px;
}
span {
font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>
Co jeśli div deklaruje względny rozmiar czcionki, np. em s, lub co gorsza inny procent?? Zobacz "obliczony" powyżej. Niezależnie od jednostki absolutnej Jednostka względna konwertuje do.
Pozostaje tylko pytanie, co się dzieje, gdy użyjesz wartości procentowej na elemencie głównym, który nie ma rodzica:
html {
font-size: 62.5%; /* 62.5% of what? */
}
W takim przypadku patrz "duplikat" tego pytania. TLDR: procenty na elemencie głównym odnoszą się do domyślnego rozmiaru czcionki przeglądarki, który może być inny dla każdego użytkownika.
Bibliografia:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-15 04:48:24