Make Schrift tatsächlich Höhe in Pixeln übereinstimmen

Gibt es eine Möglichkeit, Text in CSS tatsächlich die Höhe entsprechen, die ich gebe es?Make Schrift tatsächlich Höhe in Pixeln übereinstimmen

Was ich meine ist, wenn Sie eine Schriftart auf 14px, ist es nicht wirklich 14px groß, wenn Sie es messen. Es ist mehr wie 10px.

Hier ist ein JSFiddle zu veranschaulichen, was ich meine: https://jsfiddle.net/bbtk986d/2/

Beachten Sie, wie der Text tatsächlich nicht über die Ränder der Grünflächen berühren. Es ist ein paar Pixel aus, obwohl es genau richtig sein sollte.

Das Problem ist, wenn Sie versuchen, einem Style Guide (wie Google Materials) zu folgen, sagen sie etwas wie 14px, aber 14px ist eigentlich zu klein, weil sie genau 14px bedeuten. Ich würde gerne ändern können, wie es gerendert wird, um es genau zu bekommen, also muss ich nicht jeden letzten Wert optimieren.

Fiddle Code:

HTML:

<div> 
    <span></span> 
    <span></span> 
    <span></span> 
    <p> 
    Text 
    </p> 
</div> 
<div> 
    <span></span> 
    <span></span> 
    <span></span> 
    <p class="b"> 
    Text 
    </p> 
</div> 
<div> 
    <span></span> 
    <span></span> 
    <span></span> 
    <p class="c"> 
    Text 
    </p> 
</div> 
<div> 
    <span></span> 
    <span></span> 
    <span></span> 
    <p class="d"> 
    Text 
    </p> 
</div>

CSS:

div { 
    position: relative; 
    width: 300px; 
    margin-bottom: 10px; 
} 

span { 
    width: 100%; 
    background: #FCC; 
    height: 20px; 
    display: block; 
} 

span:nth-child(2) { 
    background: #CFC; 
    height: 40px; 
} 

p { 
    position: absolute; 
    top: -40px; 
    left: 50%; 
    transform: translateX(-50%); 
    opacity: .5; 
    text-transform: uppercase; 
    display: block; 
    padding: 0 10px; 
    font-size: 40px; 
    line-height: 80px; 
} 

p.b { 
    font-family: Arial; 
} 

p.c { 
    font-family: "Comic Sans MS" 
} 

p.d { 
    font-family: monospace; 
}

Quelle

2016-06-08 samanime

Sie auf [diese einen Blick darauf werfen kann ] (http://i.stack.imgur.com/ntg5f.png) – Trix

http://stackoverflow.com/questions/18581657/how-to-deal-with-line-height-while-coding-a-pixel -perfect-design/18582190 # 18582190 –

@Trix Danke. Ich wusste das alles, dachte aber, dass der Google-Materialführer px height = exakte Höhe der Glyphe verwendet, weil meine Schaltflächen so unterschiedlich aussahen, obwohl ich sie genau übereinstimmte. Allerdings habe ich in Fireworks die Schaltfläche "Google-Materialien" gemessen (wo ich Boxen erstellen kann, um genaue Maße zu erhalten) und festgestellt, dass meine Schaltflächen übereinstimmen. Meine Augen spielten mir nur Streiche. – samanime

Es stellt sich heraus, es ist nicht möglich.

In der Google Materials-Formatvorlage werden Pixel jedoch nicht als exakte Glyphenhöhen verwendet. Sie verwenden Pixel als Pixel. Meine Augen spielten mir nur Streiche. Ich habe die Google Material-Schaltfläche in Fireworks gemessen und es stellt sich heraus, dass ihr 14px auch eine tatsächliche Zeichenhöhe von 10px hat.

Hier wird die Seite über ihre Tasten sprechen: https://material.google.com/components/buttons.html#buttons-button-types

Für Interessenten, hier ist die CSS für die Grund Taste:

@import url(https://fonts.googleapis.com/css?family=Roboto:500); 

.button { 
    background: #9CF; 
    border-radius: 2px; 
    line-height: 36px; 
    font-size: 14px; 
    display: inline-block; 
    text-decoration: none; 
    padding: 0 16px; 
    text-transform: uppercase; 
    font-family: Roboto; 
    color: #FFF; 
}

https://jsfiddle.net/jzqd56nn/

Quelle

2016-06-08 23:59:02 samanime

Make Schrift tatsächlich Höhe in Pixeln übereinstimmen

Antwort

Verwandte Themen