視覺上如何讓不同 font-size 的文字底部在一條線上？

自己嘗試了下，發(fā)現(xiàn)都不能讓文字底部完全在一條線上，中文更加明顯，
不知應(yīng)該如何解決
測試用例

回答

編輯回答

憶當(dāng)年

@[yszou] 實現(xiàn)的我覺得是沒問題的，難道你要完全底部黏在一條線上？

我覺得中文是不行的，因為中文字體實際的底部跟你看到的是不同的，也就是說，中文的底頂端都會有些空白，并且字體越大，空白越大，而且中文應(yīng)該也沒有底線這個概念，所以無法實現(xiàn)像英文一樣完全底線黏在一起；

如圖：中文底端距離視覺上的底端總有些距離，字體越大，距離越大；

而英文的話，是可以做到的，英文字體有四條線，如果底線對齊，可以實現(xiàn)在一條線上；

如圖：英文是完全底線對齊的；

demo

2018年3月21日 08:07

編輯回答

凹凸曼

中文也可以，你需要強制對不同大小的字體設(shè)定不同的行高。

<div class="a inline">
  <div class="b">哈哈</div>
  <span class="b">嘎嘎</span>
  <b class="b">呱呱</b>
  <div class="b e1">haha</div>
  <span class="b e2">gaga</span>
  <b class="b e3">guagua</b>
</div>

.a {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid lightblue;
  margin: 40px auto;
}
.inline .b {
  display: inline;
  vertical-align: bottom;
}
.a div {
  font-size: 20px;
  line-height: 20px;
}
.a span {
  font-size: 40px;
  line-height: 37px;
}
.a b {
  line-height: 15px;
}
.b.e1 {
  line-height: 16px;
}
.b.e2 {
  line-height: 46px;  
}
.b.e3 {
  line-height: 18px;
}

最終效果如下：

以上為手工調(diào)整line-height的結(jié)果。如果不想手工調(diào)整，而想自動計算的話，代碼如下：

<div class="a inline">
  <div class="b c1">哈哈</div>
  <div class="b c2">嘎嘎</div>
  <div class="b c3">呱呱</div>
  <div class="b e1">haha</div>
  <div class="b e2">gaga</div>
  <div class="b e3">guagua</div>
</div>

.a {
  border-bottom: 1px solid lightblue;
}
.inline .b {
  display: inline;
  vertical-align: bottom;
  line-height: 1;
}
.a .c1 {
  font-size: 40px;
}
.a .c2 {
  font-size: 80px;
}
.a .c3 {
  font-size: 20px;
}
.a .e1 {
  font-size: 40px;
}
.a .e2 {
  font-size: 80px;
}
.a .e3 {
  font-size: 20px;
}

效果也還可以，英文的出入比較大，中文略有差距：

2017年7月30日 12:12

編輯回答

柒槿年

你看看這篇文章吧，CSS 中的行高與基線?？戳四銜l(fā)現(xiàn)。。要完完整整全做到正好黏在一條線上，貌似做不到。

2018年5月16日 23:05

編輯回答

悶騷型

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>底部</title>
</head>
<body>
  <div style="border-bottom: 1px solid blue;">
    <span style="font-size: 12px; vertical-align: bottom;">哈哈</span>
    <span style="font-size: 14px; vertical-align: bottom;">哈哈</span>
    <span style="font-size: 16px; vertical-align: bottom;">哈哈</span>
    <span style="font-size: 18px; vertical-align: bottom;">哈哈</span>
    <span style="font-size: 28px; vertical-align: bottom;">哈哈</span>
    <span style="font-size: 38px; vertical-align: bottom;">哈哈</span>
  </div>
</body>
</html>

這樣就對齊了吧。

2018年8月14日 18:56