1

查看以下屏幕截图： 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}
4

6 回答 6

4

使用不同的字体。Arial 将其数字的所有底部放在同一基线上。微软无衬线字体也是如此。投石机也是如此。因此，就此而言，Times New Roman 也是如此。

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

于 2010-06-16T15:47:50.833 回答
1

我不确定它是否会起作用，但我会尝试其中一件事：

看起来你有一个 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" />';

再说一次，我会尝试一些事情，不确定它们是否会起作用。

于 2010-06-16T18:47:26.447 回答
1

格鲁吉亚有老式的人物。如果你真的需要衬里数字，你应该检查是否有一个 OpenType 版本的 Georgia 有这个选项。

也就是说，我认为在您展示的上下文中使用旧式数字没有问题；无需始终让所有内容都对齐 :)
只需设置间距，以便上下有合理的空间。

于 2010-07-10T11:25:05.530 回答
0

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

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

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

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

于 2010-06-16T16:04:43.017 回答
0

您可能只想考虑使用更常用的类似字体中的数字。例如，Times New Roman 并没有太大的不同，将 Times 的数字与 Georgia 的数字混合看起来也不错。

这是一个例子： 在此处输入图像描述

于 2012-08-27T13:58:10.180 回答
0

这里的问题与比例数字与表格数字有关。

您可以通过使用带有属性的 CSSfont-feature-settings规则来防止这种行为：tnum

p {
  -webkit-font-feature-settings: 'tnum';
  -moz-font-feature-settings: 'tnum';
  -ms-font-feature-settings: 'tnum';
  font-feature-settings: 'tnum';
}
于 2015-01-06T17:40:05.597 回答