In was genau übersetzt sich die Schriftgröße?

Ich habe eine 40-Pixel-Schrift, die ich versuche, in benutzerdefinierte Bilder zu übersetzen. Ich versuche, die Größe des Bildes genau anzupassen, habe jedoch einige Probleme, die richtige Größe zu ermitteln. Im Grunde kommt es darauf an. Was bedeutet das physikalisch, wenn eine Schriftart angibt, dass es sich um X Pixel handelt?

Dies ist eine ausgezeichnete Frage, die eine eher unbefriedigende Antwort hat.

Die Schriftgröße, egal ob in Pixeln, Punkten (1/72 ") oder Millimetern angegeben, ist die Höhe eines Quadrates, eines unsichtbaren Kästchens, das in der Regel etwas größer ist als der Abstand vom höchsten Aufstieg zum niedrigsten Abstieg.

Angesichts dessen ist dies eine etwas willkürliche Maßnahme, die

• ist abhängig von der genauen technischen Ausführung der Schrift
• kann nicht präzise aus einer gedruckten oder gerasterten Probe gemessen werden

es ist nicht sehr sinnvoll oder nützlich, außer als Annäherung.

Ermitteln Sie in Ihrem Fall durch Experimentieren, welche Größe Sie in Photoshop angeben müssen, um sie an das Rendering des Browsers anzupassen. Sie sollten feststellen, dass dies ein konstantes Verhältnis für jede Schriftart ist, aber ich würde nicht erwarten, dass dies der Fall ist, wenn Sie den Browser oder das Betriebssystem wechseln.

ASCII-Zeit! Stellen Sie sich vor, die beiden folgenden Kästchen seien Bleiteile aus dem Jahr 1900 oder so. Damals wurden Schriften in Blei gegossen (oder in Holz geroutet). Damit der Typ in eine Drucksperre eingesetzt werden konnte, mussten sie mit massiven Blöcken verbunden werden. Hier kommt die Dimension des Typs (in Punkten) her:

+--------------+  +-------------+  <----+
|              |  |             |       |
|      XX      |  |             |       |
|     X  X     |  |             |       |
|    XX  XX    |  |             |       |
|    XX  XX    |  |     X       |
|    XXXXXX    |  |    X X      |   Point size of the type
|   XX    XX   |  |    XXX      |
|   XX    XX   |  |   X   X     |       |
|  XX      XX  |  |   X   X     |       |
|  XX      XX  |  |             |       |
|              |  |             |       |
+--------------+  +-------------+  <----+

Beachten Sie, dass die beiden obigen Buchstaben unterschiedlich groß sind, ihr Begrenzungsrahmen jedoch identisch ist. Daher haben beide Schriftarten in Bezug auf die Punkte die gleiche Größe.

Heutzutage geben wir nicht viel Blei und Holz ein und das meiste davon ist digital. Das Konzept der Punktgröße besteht jedoch weiterhin darin, dass es für jeden Buchstaben, auf dem der Typ platziert ist, ein virtuelles Feld gibt, das dieselbe Höhe hat. Wieder ist es diese virtuelle Box, die die Punktgröße und nicht die physischen Abmessungen der Buchstabenformulare selbst definiert. Die tatsächliche Größe der Buchstabenformulare ist häufig kleiner als die Punktgröße (kann aber auch größer sein).

Das Messen von Pixeltypen funktioniert aus diesem Grund nicht. Sie können jedoch in CSS und ähnlichem den Pixeltyp festlegen. Der Browser übersetzt so gut es geht zwischen der angegebenen px-Größe. Aber es ist immer eine unscharfe Schätzung.

Letztendlich gibt es keine genaue Möglichkeit, zwei Schriftarten mit genau der gleichen Größe zu erhalten, wenn man sie nicht visuell betrachtet und ihre Größe ändert, bis man sie als gleich groß ansieht.

Die "Schriftgröße" einer Schrift bezieht sich auf die "em-Höhe" der Schrift, die nicht unbedingt mit der Höhe bestimmter Zeichen in der Schrift übereinstimmt.

Normalerweise entspricht die em-Höhe einer Schrift derselben Grundidee - sie wird grob auf den Abstand zwischen dem niedrigsten Abstieg (z. B. dem unteren Rand des Buchstabens g) und dem höchsten Aufstieg (z. B. dem oberen Rand des Buchstabens h) festgelegt:

Wie Sie sehen, deckt keiner der einzelnen Buchstaben die gesamte Spanne ab.

Bei digitalen Schriftarten wird die "em-Höhe" einer Schrift vom Schriftdesigner festgelegt und muss dieser Konvention überhaupt nicht entsprechen: Ein Designer für digitale Schriftarten kann eine beliebige Grundlage für seine em-Größe auswählen. Schriften halten sich jedoch nach wie vor zumindest grob an die oben beschriebene Konvention. In alten Zeiten, als der Typ aus Metallblöcken bestand, war die "em-Höhe" die Höhe eines dieser Blöcke, die nicht nur für ein Zeichen in dieser Schriftart, sondern auch für Auf- und Abwärtsbewegungen und Akzente hoch genug sein musste.

Viele moderne Schriften enthalten jetzt auch Akzente in Großbuchstaben (wie z. B. Ć) - diese Akzente erstrecken sich über den traditionellen typografischen Ascender hinaus, sodass diese (und möglicherweise auch andere Sonderzeichen) außerhalb des oberen Bereichs des "em" stehen. Aus historischen Gründen passen wir die Em-Größe nicht an, um dies zuzulassen. Wir behalten die Em-Größe bei und lassen nur diese erweitern. Jeder Typograf, der solche Akzente verwendet, muss sicherstellen, dass Platz für sie vorhanden ist, obwohl in der Regel die Zeilenabstand ist im Fließtext ausreichend.

Die Linie Lücke im Fließtext ist ein Raum zwischen dem Abseilgerät einer Textzeile und dem ascender der Zeile darunter links - das heißt, die „Schriftgröße“ nicht über diese Linie Spaltmessung umfassen. Es kann durch das CSS-Feld beeinflusst werden line-height, wo1.4bedeutet, dass der Zeilenabstand das 0,4-fache der em-Höhe beträgt und somit eine gesamte Zeile des Haupttextes das 1,4-fache der em-Höhe einschließlich des Zeilenabstands einnimmt. In anderen Anwendungen kann die Zeilenlücke anders angegeben werden: Textverarbeitungsprogramme geben häufig ein Vielfaches des "einzelnen" Zeilenabstands an, aber anders als in CSS bedeutet "einzelner" Abstand normalerweise keine Zeilenlücke, sondern eine bestimmte "Standard" -Linie Lücke, in der die Anwendung versucht, einen Standard basierend auf den Metadaten in der Schriftartdatei zu finden. Es gibt mehrere Standards für die Angabe von Metriken in der Schriftart (z. B. bei Truetype gibt es unterschiedliche Mac- und Windows / OS2-Standards), sodass die Standardzeilenlücke zwischen Anwendungen und Betriebssystemen variieren kann.

Nun, selbst wenn ein Designer hat eine vorhersehbare Konvention für ihre em Höhe folgen, dies immer noch nicht sagen, die Größe von Großbuchstaben (Cap-Höhe) oder die Größe sagen , einer o(x-Höhe oder Mittellinie) , da diese variieren können frei zwischen den Schriften in Bezug auf die Höhe des Aufsteigers. Innerhalb einer Schriftfamilie sind diese jedoch in der Regel konsistent. So haben z. B. Times New Roman Bold und Times New Roman Regular die gleichen Zeichengrößen für die gleiche em-Größe, einschließlich Auf- und Absteigend, Ober- und X-Höhe.

Versuchen Sie, das vertikale Strichzeichen ('|') einzugeben, und messen Sie dies. Wenn ich Ihre Situation korrekt dupliziert habe und Ihr Antialiasing sie nicht zu sehr verwischt, sollte es 22px sein.

22px repräsentiert die Höhe des Blocktyps. Aber jedes Zeichen füllt den Block anders aus. Ein 'g' oder 'q' wird den unteren Bereich dieser 22px belegen, während Groß- und Kleinbuchstaben wie 'b' oder 'd' die oberen Teile belegen. '|' ist eines der wenigen (wenn nicht das einzige) Zeichen, das den 22px-Raum vollständig ausfüllt.

Ich weiß nicht, wie ich mit Ihren CSS-Einstellungen vergleichen soll, aber das erklärt, wie Photoshop die Texthöhe interpretiert.

Sind Sie sicher, dass Ihre Schrift in Pixel gemessen wird? Die meiste Zeit werden Schriftarten in Punkten gemessen. Ein Punkt ist 1/72 Zoll. Eine 40-Punkt-Schrift ist also 40/72 "oder 5/9" groß. Der Kicker ist, dass dies die Abmessung von der Oberseite der Aufsteiger bei hohen Buchstaben bis zur Unterseite der Absteiger bei Buchstaben ist, die unterhalb der Grundlinie hängen. Aus diesem Grund wird manchmal die x-Höhe verwendet, wie oben erwähnt. Das ist die Höhe der Kleinbuchstaben, die nicht oben oder unten stehen.

In jedem Fall sind die Maße leider nie exakt. Sie müssen nur einige Messungen und Berechnungen (und / oder Versuche und Irrtümer) durchführen, um das zu erreichen, was Sie versuchen.