Wie erarbeite ich die Schriftgrößeneinstellung durch Zählen der Pixel?

Ich habe ein Bild von einer vorgeschlagenen Website.

Wie berechne ich durch Zählen der Pixel, auf welchen px-Schriftgrößenwert der Text eingestellt werden soll?

ZB habe ich eine Schriftgröße: 14px (in Arial), aber wenn ich von der Spitze eines "L" bis zum Ende eines "p" zähle, zähle ich 10 Pixel auf dem "L", mit zusätzlichen 3 am Ende von das "p". Was mir offensichtlich nicht 14 gibt.

Gibt es eine Möglichkeit, den Schriftgrößenwert durch zuverlässiges Zählen von Pixeln zu ermitteln?

Das allgemeine Problem wird so ziemlich beantwortet durch Was bedeutet die Schriftgröße genau? - dh die Größe bedeutet eigentlich nichts sehr Spezifisches.

Da Sie jedoch mit einer bekannten bestimmten Schriftart arbeiten, sollten Sie in der Tat in der Lage sein, eine Pixelanzahl in Ihrem Modell in die nominale Pixelgröße zu übersetzen - Sie müssten ein wenig experimentieren, um das Verhältnis zu ermitteln.

Aber ich würde vorschlagen, dass dies im Vergleich viel einfacher ist, dh ändern Sie einfach die Größe Ihrer Webseite, bis sie mit dem Modell übereinstimmt, und überlagern Sie gegebenenfalls einen Screenshot, um dies zu überprüfen. Beachten Sie jedoch, dass die Schriftwiedergabe Ihres Browsers wahrscheinlich nicht genau mit der Photoshop-Darstellung oder der Browser-Darstellung auf einer anderen Plattform übereinstimmt.

Bei typischen Textgrößen haben die meisten Schriftarten von oben bis unten 1 bis 4 Pixel Puffer.

Normalerweise können Sie die Pixelgröße, die Sie beim Kompilieren verwendet haben, direkt auf Ihr CSS anwenden. IOW, wenn Photoshop / Illustrator 14px bei 130% Vorsprung sagt, würde Ihr CSS sagen

font-size:14px
line-height:1.3em

Ich denke nicht, dass das Zählen von Pixeln zuverlässig ist. Grund dafür ist, dass beim Durchlaufen von Schriftarten, beispielsweise in Photoshop, diese immer in zufälligen Größen angezeigt werden. Ich weiß, dass PS nicht das Web ist, aber dies zeigt, dass 14px in einer Schriftart viel größer sein kann als in einer anderen Schriftart.

Ich hatte Erfolg damit, den Screenshot in Photoshop aufzunehmen und auszurichten. Natürlich müssen Sie sicherstellen, dass Ihr Screenshot 100% war und dass Sie dieselbe Schriftart haben.

Der beste und schnellste Weg, um festzustellen, welche Schriftgröße eine Webseite verwendet, ist das Anzeigen der Webseitenquelle. Wenn es nicht style="font-size: 14px;"irgendwo im Tag erwähnt wird, befindet es sich im Stylesheet (mehr als wahrscheinlich). Suchen Sie nach dem Link oben im Seitencode, der mit .css endet, und besuchen Sie diesen Link. Suchen Sie nach den font-sizeund font-familyErklärungen. Hier erfahren Sie, welche Schriftart verwendet wird und wie groß die verschiedenen Elemente der Webseite sind.