Próbuję znaleźć to, co odpowiada wartości ustawionej w właściwości CSS font-size.Co naprawdę odpowiada rozmiarowi czcionki?
Aby podać kontekst, chcę uzyskać w CSS rozmiar w em części czcionki (powyżej wysokości kapitału i poniżej linii bazowej), które znam z danych OS/2. Jednostka em jest odniesiona do podanej wartości font-size, a metryki OS/2 odnoszą się do kwadratu em.
Czego się spodziewać
Moje oczekiwania są oparte na następujących odniesieniach. Nie znalazłem nic bardziej klarownego ani dokładnego.
Według W3C reference for
font-sizein CSS2.1 i cytowany we wszystkich pytaniach przepełnienie stosu znalazłem na ten temat (here, here i here):Rozmiar czcionki odpowiada placu fireta, koncepcja stosowana w typografii. Zauważ, że niektóre glify mogą krwawić poza swoimi kwadratami em.
Po kilku knowledges mam w typografii,
em squarejest cały plac metryk czcionek, w których rosnąco, malejąco, luki, (etc ...) linie są zdefiniowane. W metryce OS/2,em squarejest wielkością samej czcionki (często 1000 lub 2048 UPM).
Jedynym wyjaśnieniem znalazłem z W3C jest w old reference from 1997 for CSS1 i jest spójna z nowoczesnym cyfrowym definicji
em squareużywam:pewnych wartości, takich jak szerokość metryki są wyrażone w jednostkach, które są względem kwadratu abstrakcyjnego, którego wysokość jest zamierzoną odległością między liniami typu w tym samym rozmiarze. Ten kwadrat nazywa się kwadratem EM. (...) Typowe wartości to 250 (Intellifont), 1000 (Typ 1) i 2048 (TrueType).
Więc jeśli dobrze rozumiem te odniesienia, wartość określone w font-size powinny być wykorzystywane do generowania cały em square czcionki, a my powinniśmy być w stanie obliczyć wielkość części czcionki z rozmiaru czcionki i danych.
Na przykład, z ...
.my-letter {
font-family: 'Helvetica Neue';
font-size: 100px;
text-transform: uppercase;
}
... powinniśmy mieć em square z 100px, a ponieważ Helvetica Neue ma wysokość Stołeczne 714/1000 (sCapHeight w tabeli OS/2), kapitał wysokość 71.4px.
Co właściwie się dzieje.
Wygenerowany jest większy niż font-size (testowany na najnowszych wersjach przeglądarki Chrome, Firefox i Safari dla komputerów Mac). Na początku pomyślałem, że przeglądarka ma inną definicję em square i tworzyła część z litery równej font-size, ale nie znalazłem żadnych danych OS/2 (z lub bez wznoszenia, malejąco, przerw ...), który pasuje do tego.
Można również zobaczyć this CodePen. Zauważ, że używam line-height: 1;, aby podświetlić spodziewany rozmiar, ale moim problemem jest font-size ("renderowany atrament"), a nie line-height ("pole kolizji"). To jest coś, co muszę sprecyzować, ponieważ wielokrotnie byłem już źle rozumiany. line-height nie jest problemem.
Więc mam trzy pytania:
- Czy dobrze zrozumiałam odniesień W3C, czy jestem przy założeniu, że rzeczy te odniesienia nie powiedział?
- Jeśli nie, dlaczego wygenerowana czcionka ma kwadrat em większy niż
font-size? - Najważniejsze: Skąd wiadomo rozmiar renderowanego kwadratu em (w stosunku do
font-size)?
Dziękuję za pomoc.
Masz rację. Oznacza to, że: ** 1: ** Ascent i malejąco są poza kwadratem em. ** 2: ** x wysokość i wysokość kapitału w rzeczywistości pozostają niezmienione. ** 3: ** Mogę odliczyć odległość między górą/dołem skrzyni kolizyjnej a górną krawędzią/linią bazową. ** 4: ** Nie ma metryk w czcionce (przynajmniej dla Helvetica Neue), które mogłem użyć, aby poznać prawdziwe wejście (na przykład małe litery "l" lub "h"). Mam rację? – ncoden
@ncoden - mniej więcej tak. Wznoszenie i zniżanie są * niezależne * od kwadratu em. Oznacza to, że dla dowolnej czcionki ich suma może być większa, równa lub mniejsza niż em-kwadrat, więc niekoniecznie są one "poza" kwadratem em, chociaż wydaje się, że suma być większa niż em-kwadrat – Alohci
Warto zauważyć, że chociaż metryki czcionek zawierają wznoszenie, zniżanie i wysokość kapitału, poszczególne glify nie muszą być zgodne z tymi metrykami - na przykład rzeczywisty kapitał "A" może być wyższy lub krótszy niż wysokość kapitału i małe litery "o" najniższy punkt mogą być narysowane powyżej lub poniżej linii podstawowej. – Alohci