如何使用Sans-serif字體進行完美的文本對齊？

-2

我的工作在本頁面： enter image description here 如何使用Sans-serif字體進行完美的文本對齊？

正如你所看到的，「是」稍微不「同」左對齊（它是在更廣泛的屏幕更明顯）。 headline，head1或head2上沒有填充或邊距。並且跨度中的所有內容都是text-align:left。我使用fittext.js，但我甚至嘗試使用整數作爲字體大小。字體只是一個基本的：font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

代碼涉及：

<div class="headline"> 
    <span class="head1" style="font-size: 84.7058823529412px;">be important</span> 
    <span class="head2" style="font-size: 28.8px;">with a 1:19 professor to student ratio</span> 
</div>

CSS參與

.slide .headline { 
    text-transform: uppercase; 
    width: 100%; 
} 
.important_slide .headline span { 
    text-align: left; 
} 
.slide .headline span { 
    width: 100%; 
    display: block; 
    color: white; 
    line-height: 0.8; 
} 
.important_slide .headline .head2 { 
    margin-top: 18px; 
}

來源

2015-07-20 thegreyspot

漂亮的圖片。請在您的問題中發佈您的代碼。 – j08691

請同時顯示head1和head2以及標題的css。 – michaelbahr

通常，這只是字體字形的方式......它包含空格。 –

您所看到的字體是如何設計的假象。

例如，如果使用襯線字體，「b」上的左上角襯線與span的左邊緣對齊，「w」的左邊緣也對齊。

但是，如果您使用無襯線字體，則「b」沒有襯線，並且從span的左邊緣略微偏離。

除此之外，沒有辦法解決這個問題，只能選擇一個字體族，所有字符都與字形框左邊緣對齊。

span { 
 
    display: block; 
 
    border: 1px dotted gray; 
 
} 
 
.ex1 { 
 
    font-family: serif; 
 
} 
 
.ex2 { 
 
    font-family: sans-serif; 
 
} 
 
b { 
 
    display: inline-block; 
 
    font-family: monospace; 
 
    margin-top: 10px; 
 
}

<div class="headline ex1"> 
 
    <b>Ex1:</b> 
 
    <span class="head1" style="font-size: 84.7058823529412px;">be important</span> 
 
    <span class="head2" style="font-size: 28.8px;">with a 1:19 professor to student ratio</span> 
 
</div> 
 
<div class="headline ex2"> 
 
    <b>Ex2:</b> 
 
    <span class="head1" style="font-size: 84.7058823529412px;">be important</span> 
 
    <span class="head2" style="font-size: 28.8px;">with a 1:19 professor to student ratio</span> 
 
</div>

來源

2015-07-20 18:52:34

感謝您的詳細解釋。我會找到一個新的字體。 – thegreyspot

第一跨度後面添加一個分行標記。

<div class="headline"> 
<span class="head1" style="font-size: 84.7058823529412px;">be important</span><br /> 
<span class="head2" style="font-size: 28.8px;">with a 1:19 professor to student ratio</span>

來源

2015-07-20 18:36:39

如何使用Sans-serif字體進行完美的文本對齊？

回答

相關問題