webentwicklung-frage-antwort-db.com.de

Zeilenhöhe der benutzerdefinierten Schriftart mit CSS korrigieren

Bei der Verwendung einer benutzerdefinierten Schriftart für eine neue Webapp, an der ich gerade arbeite, ist ein seltsames Problem aufgetreten.

Diese benutzerdefinierte Schriftart (FF DIN) scheint eine natürlich vertikale, nicht zentrierte Linienhöhe zu haben, die mich dazu zwingt, einen Polsteraufsatz zu verwenden, um den oberen Platz auf Elementen wie Knopf und Eingabe zu kompensieren.

Beispiel: Die Schrift in grün (Helvetica Neue) ist korrekt ausgerichtet, wobei die von uns verwendete benutzerdefinierte Schriftart (FF DIN) vertikal nicht zentriert ist:

enter image description here

Gibt es eine bekannte Möglichkeit, dieses Zentrierungsproblem auf natürliche Weise in CSS zu beheben, um das Grundverhalten von Schriftarten zu erzwingen?

Vielen Dank.

16
kirkas

Am Ende habe ich die Schriftart manuell korrigiert und dazu die folgende Antwort verwendet: 

UIButton-Schriftart für vertikale Ausrichtung

2
kirkas

Hierbei geht es nicht um die Höhe der Linie, sondern um die vertikale Platzierung von Glyphen, insbesondere um die Position der Textbasislinie. Dafür hat sich der Schriftdesigner entschieden. Der Designer zeichnet Glyphen und platziert sie im em-Quadrat, dem konzeptionellen Gerät, dessen Höhe der Schrifthöhe entspricht (oder definiert wird). Insbesondere entscheidet der Designer, wie viel Platz sich unter der Grundlinie einerseits und über der Höhe von Großbuchstaben andererseits befindet. Normalerweise sind diese Räume gleich oder fast gleich, müssen aber nicht sein. Wenn sie sich wesentlich unterscheiden, ist die beabsichtigte Verwendung der Schriftart wahrscheinlich speziell und umfasst nicht die Verwendung wie die im Bild gezeigte. Dies legt nahe, dass die Wahl der Schriftart überarbeitet werden sollte, nehmen wir jedoch an, dass sie behoben wurde.

Es gibt mehrere Möglichkeiten, mit dem Problem umzugehen. Wenn unter den Buchstaben zu viel Platz ist, wird der Code verkleinert, der line-height verkleinert, aber auch den darüber liegenden Speicherplatz beeinflusst. Die obere Polsterung hilft in gewissem Sinne, erhöht jedoch die Gesamthöhe des Elements. Sie können auch mit vertical-align spielen, dies beeinflusst jedoch die Höhe der Zeilenfelder.

Der einfachste Ansatz ist wahrscheinlich die Verwendung von relative position , vorausgesetzt, das Problem betrifft einen einzeiligen Text. Bei der relativen Positionierung werden Inhalte lediglich auf eine bestimmte Weise verschoben, ohne dass das Layout anders beeinflusst wird. Sie benötigen dazu einen Wrapper, d. H. Ein Element, das den Text enthält, damit Sie nur den Text und nicht den Hintergrund verschieben können.

Die folgende Demo verwendet eine Google-Schriftart, Candal, die ein ähnliches Problem hat, jedoch in eine andere Richtung: Die Grundlinie ist zu niedrig. Modifikationen dieses Ansatzes, um das ursprüngliche Problem zu lösen, sollten offensichtlich sein, aber der genaue Betrag der Verschiebung muss empirisch bestimmt werden (oder aus Informationen, die aus der Zeichensatzdatei unter Verwendung eines Zeichensatzinspektors extrahiert werden). Natürlich sollte hier die Einheit em verwendet werden, auch wenn Sie die Schriftgröße in Pixeln oder Punkten festlegen (damit der Code nicht geändert werden muss, wenn die Schriftgröße irgendwann geändert wird).

<link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet'>
<style>
div { font-family: Candal }
div { background: lightgreen; font-size: 200%}
</style>
<p>What we have got initially:
<div>BRAKE HOSE AND AIR CHAMBER</div>
<p>Reducing line height (even “setting solid”) does not really help:
<div style="line-height: 1">BRAKE HOSE AND AIR CHAMBER</div>
<p>But displacing the text upwards by 0.1em does:
<div><span style="position: relative; bottom: 0.1em">
BRAKE HOSE AND AIR CHAMBER</span></div>

12

Ich hatte dieses Problem auch in der Vergangenheit, sogar verschiedene Browser gaben unterschiedliche Zeilenhöhen! Ich denke, es passiert bei der Verwendung des Webfont-Generators und kann, soweit ich weiß, nur mit unterschiedlicher Zeilenhöhe behoben werden.

Haben Sie Fontsquirrel ausprobiert? Es gibt einige Optionen mit unterschiedlichen Ergebnissen.

http://everythingfonts.com/font-face

http://www.font2web.com/

http://www.fontsquirrel.com/tools/webfont-generator

https://www.web-font-generator.com/

2
Marc

In Chrome habe ich festgestellt, dass Sie eine Font-Face-Deklaration verwenden. Sie können das Problem mit der Zeilenhöhe entweder mit einem style = "" - Aufruf des HTML-Codes lösen oder einfach die Zeilenhöhe NACH der Schriftdeklaration in Ihrem CSS deklarieren.

Ich denke, Chrome kann die Zeilenhöhe erst berechnen, wenn die benutzerdefinierte Schriftart gerendert wird.

1
chrisallick

Dies ist etwas, auf das ich kürzlich gestoßen bin. Die Grundlinie der Schriftarten, die ich aus irgendeinem Grund verwendete, wurde nicht ausgerichtet. Daher habe ich mich am unteren Rand ausgerichtet und die Zeilenhöhe erhöht, anstatt die Auffüllung hinzuzufügen. 

So habe ich mein Problem gelöst. Wenn Sie einen Link zu einem Code-Stift haben, kann ich überprüfen, ob es für Sie funktioniert oder ob eine andere Lösung besser wäre. 

p {

    vertical-align: text-bottom;
    line-height: 1.5;

}
1
Sara Mote