代码之家 › 专栏 › 技术社区 › HandiworkNYC.com

CSS和排版:数字下行的均匀垂直对齐

typography vertical-alignment css

HandiworkNYC.com · 技术社区 · 15 年前

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

6 回复 | 直到 10 年前

Robusto 15 年前

使用其他字体。Arial将所有底部的数字放在同一基线上。微软也没有衬线。Trebuchet也是。因此,就这一点而言,时代新罗马也一样。

事实上,根据字体的不同,数字有不同的升序和降序。打字员所做的是根据他们认为好看的东西将数字的“身体”居中,然后从那里上下移动。通常,变化是在衬线面,但不总是。无论如何,你不能控制它。顺便说一句,3,4,5,7和9通常是有下降的,6和8通常有上升的。

febs 15 年前

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

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

再说一次,只是一些我会尝试的东西,不确定它们是否会起作用。

Damien Pollet 15 年前

格鲁吉亚有 old-style figures . 如果你真的需要线性数字,你应该检查是否有一个开放式版本的格鲁吉亚有这个选项。

也就是说,我不认为在你展示的上下文中使用旧样式的图形会有问题;不需要让所有的东西都一直保持一致:)
只需设置间距,使上方和下方有合理的空间。

Joel Glovier 10 年前

这里的问题实际上与 proportional vs tabular figures .

实际上,可以通过使用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';
}

Franci Penov 15 年前

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

正如@robusto所说,一种解决方案是更改您使用的字体,使所有数字都以基线结束。格鲁吉亚对数字尤其不利,因为一些数字(例如36或84)看起来很奇怪,因为其中一个数字有上升,另一个有下降。(当然,你也不必担心5月36日的事。)

另一种解决方案是保留乔治亚字体,但要增加垂直填充,使3、4、5、7和9的下降部分不那么突出。在你的例子中,在数字下面和上面加4-5px应该可以做到。当然,这会增加日期标志的整体大小,这可能是不需要的。

增加垂直填充的另一种方法是将字体大小调整为像素对,这将使上下移动不那么突出。只有当用户的浏览器缩放设置为100%和常规dpi时,此选项才有效。如果缩放比例为120%,或者用户使用高dpi,则字体的视觉大小会增加,上升/下降更为突出。

user824276 12 年前

您可能想考虑使用更常见的类似字体中的数字。例如,Times New Roman并没有太大的不同,将Times中的数字与Georgia中的数字混合在一起也不会太差。

下面是一个例子:

类似字体。例如,时代的新罗马并没有太大的不同,把来自时代的数字和格鲁吉亚的数字混合在一起也不算太糟糕。

下面是一个例子: enter image description here