如何使用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字体进行完美的文本对齐？

回答

相关问题