CSS&；排版：数字下降器的统一垂直对齐

查看以下屏幕截图：

我的问题是，降序（如屏幕截图中的“7”）数字与跨度的底部垂直对齐，而其他数字则更倾向于中间垂直对齐。有没有一种方法可以“平衡”所有数字的垂直对齐，而不考虑上升/下降

谢谢

守则：

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

---

使用不同的字体。Arial将其所有数字的底部放在同一基线上。微软的无衬线软件也是如此。投石机也是。就这一点而言，《新罗马时报》也是如此

---

事实上，数字根据字体的不同有不同的升序和降序。排版师所做的是根据他们认为看起来不错的内容将数字的“主体”居中，然后从那里向上或向下移动。通常这种变化发生在衬线面上，但并不总是如此。无论如何，你无法控制它。顺便说一句，3、4、5、7和9通常是下行的，6和8通常是上行的。

使用不同的字体。Arial将其所有数字的底部放在同一基线上。微软的无衬线软件也是如此。投石机也是。就这一点而言，《新罗马时报》也是如此

---

事实上，数字根据字体的不同有不同的升序和降序。排版师所做的是根据他们认为看起来不错的内容将数字的“主体”居中，然后从那里向上或向下移动。通常这种变化发生在衬线面上，但并不总是如此。无论如何，你无法控制它。顺便说一句，3、4、5、7和9通常具有下行字符，6和8通常具有上行字符。

您可以控制的只是文本基线在其父文本中的垂直对齐。但是，您无法控制各种字符轮廓相对于文本基线的特定字体位置

正如@Robusto所说，一个解决方案是更改您使用的字体，以便所有数字都以基线结束。佐治亚州的数字尤其糟糕，因为有些数字（例如36或84）看起来很奇怪，因为其中一个数字有升序，另一个数字有降序。（当然，你不必担心5月36日：-）

另一个解决方案是保留Georgia字体，但增加垂直填充，使3、4、5、7和9上的下降字体不那么突出。在您的情况下，在数字的下方和上方添加4-5px应该可以做到这一点。当然，这会增加日期标志的总体大小，这可能不是我们想要的

---

除了增加垂直填充之外，另一种方法是将字体大小调整为两个像素，这会使上升和下降部分不那么突出。只有当用户的浏览器缩放设置为100%和常规DPI时，此选项才有效。如果缩放为120%或用户使用高DPI，则字体视觉大小会增加，上升/下降部分会更加突出。

您所能控制的只是文本基线在其父级中的垂直对齐。但是，您无法控制各种字符轮廓相对于文本基线的特定字体位置

正如@Robusto所说，一个解决方案是更改您使用的字体，以便所有数字都以基线结束。佐治亚州的数字尤其糟糕，因为有些数字（例如36或84）看起来很奇怪，因为其中一个数字有升序，另一个数字有降序。（当然，你不必担心5月36日：-）

另一个解决方案是保留Georgia字体，但增加垂直填充，使3、4、5、7和9上的下降字体不那么突出。在您的情况下，在数字的下方和上方添加4-5px应该可以做到这一点。当然，这会增加日期标志的总体大小，这可能不是我们想要的

---

除了增加垂直填充之外，另一种方法是将字体大小调整为两个像素，这会使上升和下降部分不那么突出。只有当用户的浏览器缩放设置为100%和常规DPI时，此选项才有效。如果缩放为120%或用户使用高DPI，字体视觉大小会增加，上升/下降部分会更加突出。

我不确定它是否有效，但我会尝试以下方法之一：

看起来您有一个php函数来输出日期和月份。与其只输出数字，不如尝试将其包装在一个范围内，以适当地定位/设置每个数字的样式

CSS和PHP的草图：

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


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

.georgiaFixNum7{
位置：相对位置；
顶部：5px；
字号：18px；
}
回显“”$num.'；

我理解需要一个带有字体的纯css/html解决方案，但是如果你真的很绝望，你可以尝试使用单独的图像来显示数字。您的php函数需要以类似的方式工作

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

echo'；

---

再说一次，我只是想尝试一些东西，不确定它们是否有效。

我不确定它是否有效，但我想尝试的一件事是：

看起来您有一个php函数来输出日期和月份。与其只输出数字，不如尝试将其包装在一个范围内，以适当地定位/设置每个数字的样式

CSS和PHP的草图：

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


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

.georgiaFixNum7{
位置：相对位置；
顶部：5px；
字号：18px；
}
回显“”$num.'；

我理解需要一个带有字体的纯css/html解决方案，但是如果你真的很绝望，你可以尝试使用单独的图像来显示数字。您的php函数需要以类似的方式工作

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

echo'；

再说一次，我只是想尝试一些东西，不确定它们是否有效。

乔治亚有。如果你真的需要内衬图形，你应该检查是否有一个OpenType版本的格鲁吉亚有这个选项

也就是说，我不认为在你展示的背景中使用旧式人物有什么问题；无需让所有内容始终对齐：