css @font-face 不会在所有浏览器中垂直对齐文本

Posted

技术标签:

【中文标题】css @font-face 不会在所有浏览器中垂直对齐文本【英文标题】:css @font-face doesn't align text vertically across all browsers 【发布时间】:2013-05-04 12:03:32 【问题描述】:

我一定已经浏览了谷歌的每一页,但还没有找到解决方案。我有一个通过 css font-face 使用的自定义字体。根据我使用的浏览器和操作系统,字体会在底部添加额外的填充。下图显示了一个例子,左边是mac,右边是windows。它在右侧(在 Windows 中)看起来是正确的,我希望它在 mac 上是一样的。

@font-face

  font-family: universLight;
  src: url('http://www.viggi.com/fonts/UniversLTStd-Light.otf');
  font-weight: normal;
  font-style: normal;

#button
    font-family: universLight;
    border: 1px solid black;
    background: #ccc;

代码位于http://jsfiddle.net/ZDh5h/

这是我已经知道在我的研究中行不通的东西。

line-height 为顶部和底部添加填充,因此底部的额外填充保留。 使用 .otf 或 .ttf 等不同的扩展名也不起作用。只是产生相同的结果 改变字体大小也没什么用

我在整个网站中大量使用这种字体,并且真的不想为 mac 和 windows 添加不同的 CSS 表。如果有人知道如何在没有 javascript 添加额外填充的情况下解决此问题,我将不胜感激。

谢谢。

【问题讨论】:

【参考方案1】:

见http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

正常

告诉用户代理将使用的值设置为“合理”的值 基于元素的字体。该值的含义与 .我们建议使用 1.0 到 1.2 之间的“正常”值。 计算值是“正常”。

我认为您观察到的行为来自浏览器中不同的“合理”值,因为 normal 是默认的 line-height 值。

所以指定你的值(比如line-height: 1.5em;)来消除差异。

【讨论】:

以上是关于css @font-face 不会在所有浏览器中垂直对齐文本的主要内容,如果未能解决你的问题,请参考以下文章

使用 CSS @font-face 时,浏览器使用不同类型的顺序是啥?

在 CSS 中加载 @font-face 时如何删除浏览器中的默认字体? “FOUT”

@font-face 在 Android 浏览器中不起作用

CSS font-face 在 Firefox 中不起作用

@font-face 第一次访问网站时不会加载,必须刷新/重新加载

@font-face 是不是适用于电子邮件模板?