CSS 和版式：数字下降沿的统一垂直对齐

StackOverflow https://stackoverflow.com/questions/3054857

题

查看以下屏幕截图：http://www.jesserosenfield.com/beta/descenders.png

我的问题是，降序（如屏幕截图中的“7”）数字与跨度的底部垂直对齐，而其他数字则更靠近中间垂直对齐。有没有办法“均衡”所有数字的垂直对齐方式，无论上升/下降？

谢谢！

代码：

<div class="postDate">
     <span class="postDay"><?php the_time('j'); ?></span><br/>
     <span class="postMonth"><?php the_time('M'); ?></span>
</div> <!-- postDate -->

和CSS

.postDate {
    width: 99px;
    height: 74px;
    position: relative;
    left: -30px;
    font-family: Georgia, "times new roman", times, serif;
    background: url(images/dateFlag.png) no-repeat;
    text-align: center;
    color: #ffffcc;
    padding-top: 9px;
    }

.postDay {font-size: 42px; border: 1px solid red;}
.postMonth {font-size: 17px; text-transform: uppercase}
有帮助吗？

解决方案

使用不同的字体。宋体把它的数字的所有底部上相同的基线。所以，做微软无衬线。所以呢投石机。所以，对于这个问题，确实Times New Roman字体。

事实上，数字具有不同的伸部和下伸取决于字体。什么排印做的是中央的依据是什么，他们认为好看的多的“身体”，然后向上或从那里下来。通常的变化在上衬线字体，但并非总是如此。你无法控制它，在任何情况下。顺便说一句，在图3，4，5，7和9是那些通常有下伸和6和8通常具有上伸。

其他提示

我不知道它是否会工作，但一件事我会尝试：

它看起来像你有一个PHP函数输出日期和月份。而不是仅仅输出数量为什么不尝试在跨包装它是位置/款式每个号码适当。

CSS＆PHP的草图：

.georgiaFixNum7 {
    position: relative;
    top: 5px;
    font-size: 18px;
}


echo '<span class="georgiaFixNum' . $num . '">' . $num . '</span>';

我了解与字体的纯CSS / HTML解决方案的需求，但如果你是真的绝望了，你可以尝试使用独立的图片来显示数字。你的PHP函数需要工作以类似的方式。

echo '<img src="/img/' . $num . '.png" />';

再次只是有些事情我会尝试一下，如果他们愿意工作不能确定。

格鲁吉亚有旧式人物的。如果你真的需要排队的数字，你应该检查是否有格鲁吉亚的OpenType字体版本有这个选项。

这是说，我没有看到你展示环境中使用旧式人物的问题;没有必要拥有的一切处处对齐所有的时间:)点击 只需设置间距使得存在上述合理的空间和下方。

这里的问题与 比例图与表格图.

您可以使用 CSS 来防止此行为 font-feature-settings 规则与 tnum 财产：

p {
  -webkit-font-feature-settings: 'tnum';
  -moz-font-feature-settings: 'tnum';
  -ms-font-feature-settings: 'tnum';
  font-feature-settings: 'tnum';
}

所有可以控制是其父项内的文本基线的垂直对齐。但是，可以不与问候文本基线控制各种字符轮廓的特定的字体的位置。

正如@Robusto说，一种解决方案是改变要使用的字体，使得所有数字在基线结束。佐治亚为数字特别不好，因为一些数字（36或84例如）看怪异由于具有上升器，而另一个具有一个下伸的数字之一。 （不，你不用担心，当然五月36： - ））

另一种解决方案是留在佐治亚字体，但以增加垂直填充，使得在3个，4个，5个，7和9的下伸不如突出。在你的情况下面和上面的数字应该做它添加4-5px。当然，这将增加的时间标记，这可能不是所希望的总体尺寸。

在替代增加垂直填充那么多。将向下调整的字体大小夫妇像素的，这将使得上伸部和下伸不太突出。只有在用户的浏览器缩放设置为100％，常规DPI这一个工程。如果变焦是在120％或用户使用高DPI，字体视觉尺寸增大，并且上行字母/下伸更加突出。

您可能要考虑使用简单地从一个更容易地获得相似的字体号码。 Times New Roman字体，例如，是不是太不一样了，和混合距离时代与格鲁吉亚的数字看起来并不太坏。

下面是一个例子： “在这里输入的图像描述”

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top