W jaki sposób przeglądarki przekształcają czcionkę opartą na punktach na piksele?

Question

Jeśli przeglądarka ma do czynienia z poniższymi kodami CSS: font-size: 12pt;, w jaki sposób oblicza rzeczywisty rozmiar na ekranie? Czy może znać rozdzielczość ekranu (przez jakąś funkcję systemu operacyjnego), czy jest to tylko przybliżenie?

Jeśli jest to przybliżenie - czy zawsze jest ten sam (12pt = 16px)?

Czy jakiś programista w przeglądarce pisze o tym? (Odniesienie byłoby świetne)

Answer 1

CSS oferuje wiele różnych jednostek do wyrażania długości. Niektóre mają swoją historię w typografii, takich jak Point (pt) i pica (pc), inni są znane z codziennego użytku, takich jak centymetr (cm) i cala (w). Istnieje również "magiczna" jednostka, która została wynaleziona specjalnie dla: CSS: px. Czy to oznacza, że ​​różne właściwości wymagają różnych jednostek ?

Nie, urządzenia nie mają nic wspólnego z właściwościami, ale wszystko z materiałem wyjściowym: ekranem lub papierem.

Nie ma ograniczeń, w których jednostkach można używać. Jeśli właściwość akceptuje wartość w px (margin: 5px), przyjmuje również wartość w calach lub w centymetrach (margines: 1,2 cala, margines: 0,5 cm) i na odwrót.

Zależność pomiędzy jednostkach bezwzględnych jest następujący: 1 cal = 2,54 cm = 25,4 mm = 72pt = 6pc

Tzw jednostkach bezwzględnych (Cm mm, PT iszt.) oznacza to samo w przypadku CSS, jak wszędzie indziej, , ale tylko wtedy, gdy urządzenie wyjściowe ma wysoką rozdzielczość wystarczającą . Na drukarce laserowej 1 cm powinno wynosić dokładnie 1 centymetr. Ale na urządzeniach o niskiej rozdzielczości, takich jak ekrany komputerów, nie wymaga tego CSS. I rzeczywiście, wynik jest inny niż z jednego urządzenia na drugie iz jednej implementacji CSS na drugą. Lepiej jest rezerwować te urządzenia dla urządzeń o wysokiej rozdzielczości oraz w szczególności dla wydruków o numerach . Na ekranach komputerowych i przenośnych urządzeniach prawdopodobnie nie dostaniesz tego, czego oczekujesz.

Także dlatego jednostki w pt można przyrównać jedynie na ekranie (z powyższego tekstu) nie jest zalecany do stosowania na nośnikach ekranem.

Źródło: EM, PX, PT, CM, IN…

Answer 2

Najbardziej wyraźne oświadczenia zostały znalezione w tym artykule: http://www.w3.org/Style/Examples/007/units.en.htm (Dzięki @Amit.)

W przeszłości CSS wymagał, aby implementacje wyświetlały poprawnie jednostki bezwzględne nawet na ekranach komputerowych. Ponieważ liczba nieprawidłowych implementacji przewyższyła ilość poprawnych poprawek, a sytuacja nie uległa poprawie, CSS zrezygnował z tego wymogu w 2011 r. Obecnie jednostki bezwzględne muszą działać poprawnie tylko na wydrukach i urządzeniach o wysokiej rozdzielczości.

W rzeczywistości CSS wymaga, aby 1 piksel wynosił dokładnie 1/96 cala na wszystkich wydrukach. CSS uważa, że ​​drukarki, w przeciwieństwie do ekranów, nie muszą mieć różnych rozmiarów dla px, aby drukować ostre linie. Na nośnikach drukowanych piksele nie tylko mają ten sam wygląd z jednego urządzenia do drugiego, ale w rzeczywistości są wymiernie takie same (tak jak cm, pt, mm, in i pc, jak wyjaśniono powyżej).

i stąd: w3.org/TR/css3-values/#absolute-lengths (Dzięki @Alexey)

one [bezwzględne jednostki długości], są przede wszystkim przydatne, gdy środowisko wyjściowe jest znana.

W przypadku urządzenia CSS wymiary te są zakotwiczone (i) przez powiązanie jednostek fizycznych z ich fizycznymi pomiarami lub (ii) przez powiązanie jednostki piksela z pikselem referencyjnym. W przypadku nośników druku i podobnych urządzeń o wysokiej rozdzielczości jednostka kotwicząca powinna być jedną ze standardowych jednostek fizycznych (cale, centymetry, itp.). W przypadku urządzeń o niższej rozdzielczości i urządzeń o nietypowych odległościach oglądania zaleca się, aby jednostka zakotwiczająca była jednostką pikselową. W przypadku takich urządzeń zaleca się, aby jednostka pikselowa odnosiła się do całkowitej liczby pikseli urządzenia, która jest najbardziej zbliżona do piksela referencyjnego.