相关疑难解决方法(0)

我有很多CSS执行以下操作:

font-family: Helvetica, Arial, sans-serif;

据我所知,Helvetica是Mac上的默认sans-serif字体,Arial是Windows上的默认sans-serif字体...如果是这种情况,我不能将上面的代码更改为:

font-family: sans-serif;

是的,不是吗？

是否有可能在所有浏览器中实现行高一致性？

我附上了一张图片.你会注意到一个红色的矩形框和一个绿色的矩形框(两者都有相同的宽度和高度),我手动通过photoshop添加,以帮助显示虚线(红色框下方)和"粉丝:3197179"文字.

似乎Firefox是唯一一个以不同方式显示元素的人.当我应用行高时,我会注意到这一点.我可以用任何方式使其与所有浏览器保持一致吗？

我使用的是Firefox 3.6.13,Safari 5.0.3,Opera 10.63和Chrome 8.0.552.231.

.clearfix,
.container {
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  margin: 0 0 0 0;
  padding: 12px 0;
  border-bottom: 1px dotted #E7E7E7;
}

li img {
  float: left;
  margin-top: 0;
}

li p {
  margin: 0 0 0 58px;
  padding: 0;
  font-weight: normal;
  border: none;
  font-size: 1em;
  line-height: 1.3em;
}

li p.name {
  position: relative;
  padding-top: 0;
  font-size: 1.1em;
  font-weight: bold;
}

<ul> …

经过几个小时的调试和徘徊,我发现不可能在浏览器中一致地垂直对齐具有较差垂直度量的字体.如果一个字体的垂直度量指标很差,它可能会被渲染得太远或太远而且看起来很糟糕,特别是在按钮内部.单独使用css无法解决这个问题.

您可以使用本网站上的测试来检查字体的垂直度量标准:http://levien.com/webfonts/vmtx/(只需下载测试并替换字体.)

这是我得到的结果.上面的一个指标很差,下面的指标正确:(两者都有固定的行高)

Fontsquirrel在专家模式下为其生成器中的不良垂直度量提供修复.不幸的是,我必须使用的字体属于微软(SegoePrint),并被列入Fontsquirrel的黑名单中.

更新:

为了使问题更清楚......这就是我现在面临的情况:

我正在尝试将按钮的文本垂直对齐到中间(参见下图).在左侧,您可以看到它在Android上的Chrome中的呈现方式,在右侧,您可以看到它在Windows上的Chrome呈现方式.Arial和最常见的字体很好地居中,Segoe Print不是..

我在CSS中尝试了不同的方法来进行对齐,但没有一种方法能够保持一致.我也在同一个小提琴中尝试了相同的结果,由于字体是非自由的,我无法显示.这是一个字体特定的问题,唯一的解决方案似乎是修复字体本身.

这是按钮的CSS(值是虚构的):

div.parent {
    height:40px
}
h3 {
    line-height: 40px;
    font-size: 14px
}