CSS 和版式：数字下降部分的统一垂直对齐
查看以下屏幕截图： 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}
Check out the following screenshot:
http://www.jesserosenfield.com/beta/descenders.png
My problem is that descending (like the "7" in the screenshot) numbers are vertically aligned with the bottom of the span, while other numbers are vertically aligned more towards the middle. Is there a way to "equalize" the vertical alignment of all numbers, regardless of ascender / descender?
Thanks!
The code:
<div class="postDate">
<span class="postDay"><?php the_time('j'); ?></span><br/>
<span class="postMonth"><?php the_time('M'); ?></span>
</div> <!-- postDate -->
and 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}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
使用不同的字体。 Arial 将其所有数字的底部放在同一基线上。微软无衬线字体也是如此。投石机也是如此。因此，就这一点而言，Times New Roman 也是如此。
事实上，数字有不同的上升部分和下降部分，具体取决于字体。排版师所做的就是根据他们认为好看的内容将数字的“主体”居中，然后从那里向上或向下。通常这种变化出现在衬线面上，但并非总是如此。无论如何，你都无法控制它。顺便说一句，3、4、5、7 和 9 通常具有下降部分，6 和 8 通常具有上升部分。
Use a different font. Arial puts all the bottoms of its numbers on the same baseline. So does Microsoft Sans Serif. So does Trebuchet. So, for that matter, does Times New Roman.
The fact is, numbers have different ascenders and descenders depending on the typeface. What typographers do is center the "body" of the number based on what they believe looks good, then go up or down from there. Usually that variation is on serif faces, but not always. You can't control it, in any case. BTW, the 3, 4, 5, 7 and 9 are the ones that usually have the descenders and the 6 and 8 usually have the ascenders.
我不确定它是否有效，但我会尝试的一件事是：
看起来你有一个 php 函数来输出日期和月份。与其仅仅输出数字，为什么不尝试将其包装在一个范围内，以适当地定位/设置每个数字的样式。
CSS&的粗略草图PHP：
我理解需要一个带有字体的纯 css/html 解决方案，但如果你真的很绝望，你可以尝试使用单独的图像来显示数字。您的 php 函数需要以类似的方式工作。
再说一遍，只是我会尝试一些东西，不确定它们是否有效。
I'm not sure if it would work, but one of the things I would try:
It looks like you have a php function to output the day and month. Instead of just outputting the number why not try wrapping it in a span that positions/styles each number appropriately.
Rough sketch of CSS & PHP:
I understand the need for a pure css/html solution with the fonts, but if you are really desperate you could try using seperate images to display the numbers. Your php function would need to work in a similar way.
Again, just some things I would try out, not certain if they'd work.
乔治亚州有旧式人物。如果您确实需要衬里数字，您应该检查是否有具有此选项的 Georgia 的 OpenType 版本。
也就是说，我不认为在您展示的上下文中使用旧式图形有问题；无需始终让一切都保持一致:)
只需设置间距，以便上方和下方有合理的空间。
Georgia has old-style figures. If you really need lining figures, you should check if there is an OpenType version of Georgia that has this option.
That said, I don't see the problem in using old-style figures in the context you show; no need to have everything align everywhere all the time :)
Just set up spacing so that there is reasonable space above and below.
您所能控制的只是文本基线在其父级中的垂直对齐方式。但是，您无法控制各种字符轮廓相对于文本基线的特定字体位置。
正如@Robusto 所说，一种解决方案是更改您正在使用的字体，以便所有数字都以基线结尾。乔治亚州对于数字尤其不利，因为某些数字（例如 36 或 84）看起来很奇怪，因为其中一个数字具有上升部分，而另一个数字具有下降部分。 （当然，并不是说您必须担心 5 月 36 日:-)）
另一个解决方案是保留 Georgia 字体，但增加垂直填充，以便 3、4、5、7 和 9 上的下降部分不会出现一样突出。在您的情况下，在数字下方和上方添加 4-5px 应该可以做到。当然，这会增加日期标志的整体大小，这可能是不希望的。
增加垂直填充的另一种方法是将字体大小调整几个像素，这将使上升部分和下降部分不那么突出。仅当用户的浏览器缩放设置为 100% 和常规 DPI 时，此功能才有效。如果缩放为 120% 或用户使用高 DPI，字体视觉大小会增加，上升/下降会更加突出。
All you can control is the vertical alignment of the text baseline within its parent. However, you can't control the specific font position of the various characters outlines with regards to the text baseline.
As @Robusto said, one solution is to change the font you are using, so that all numbers end at the baseline. Georgia is particularly bad for numbers, because some numbers (36 or 84 for example) look weird due to one of the digits having ascender and the other having a descender. (Not that you'll have to worry about 36th of May of course :-))
Another solution is to stay with Georgia font, but to increase the vertical padding so that the descenders on 3, 4, 5, 7 and 9 are not as prominent. In your case adding 4-5px below and above the number ought to do it. Of course, that would increase the overall size of the date flag, which might not be desired.
The alternative to increasing the vertical padding that much would be to tweak down the font size couple of pixels, which would make the ascenders and descenders less prominent. This one works only if the user's browser zoom is set at 100% and regular DPI. If the zoom is at 120% or the user uses high DPI, the font visual size is increased and the ascenders/descenders are more prominent.
您可能需要考虑简单地使用更常用的类似字体中的数字。例如，Times New Roman 并没有太大的不同，将 Times 的数字与 Georgia 的数字混合起来看起来也不错。
这是一个例子：
You might want to consider simply using numbers from a more commonly available similar font. Times New Roman, for example, isn't too different, and mixing the numerals from Times with those of Georgia doesn't look too bad.
Here's an example:
这里的问题与 比例有关与表格数字。
您可以使用 CSS
font-feature-settings具有tnum属性的规则：The problem here has to do with proportional vs tabular figures.
You can prevent this behavior by using the CSS
font-feature-settingsrule with thetnumproperty: