是否有引号符号没有浮在基线之上？

Question

在检查我的网页时，我看到引号

"

、

'

或我尝试找到的任何其他变体，例如

“

或

”

，正如您所期望的那样，都有很大的空白在它们下方 - 它们漂浮在基线上方是正常的。

是否有任何 Unicode 或 HTML 字形只是引号，而不是漂浮在行上方？我想这相当于问“是否有一个引号在其框内垂直居中？”或“基线上是否有引号？”这不太可能存在。我尝试过浏览 w3.org 列表和 CSS-Tricks 之类的地方，但没有运气。

这是一个问题，因为在垂直 Flexbox 布局中使用这样的字形时，会产生它和下面的项目之间有很大空间的错觉。

我尝试在引号上使用

margin-bottom: -8px;

来否定这一点，但这不是一个灵活的解决方案，特别是当我搞乱行高时。

小提琴链接：https://jsfiddle.net/ab6m5fvo/

Answer 1

免责声明:: 截至 2021 年 2 月，任何主流浏览器均不支持

lh

单元。最终会的 - 但现在我的答案不起作用）。

我尝试在引号上使用

margin-bottom: -8px;

来否定这一点，但这不是灵活的解决方案，特别是当我搞乱行高时。

这就是

lh

单位的用途。

.flexParent {
  display: flex;
  flex-direction: column;
  height: 100px;
}

.flexParent > .l {
  height: 20px;
  width: 1px;
  background-color: black;
}

.flexParent > .q {
    margin-bottom: -0.4lh; /* NOTE: The value is `-0.4 * lh`, not `-0.41 * h` */
    display: inline-block;
    width: 2em;
}

.flexParent:hover > .q {
  outline: 1px solid blue;
}

<div class="flexParent">
  <div class="l"></div>
  <div class="q">"</div>
  <div class="l"></div>
</div>

Answer 2

各种Unicode低引号：

‚ U+201A SINGLE LOW-9 QUOTATION MARK
„ U+201E DOUBLE LOW-9 QUOTATION MARK
❟ U+275F HEAVY LOW SINGLE COMMA QUOTATION MARK ORNAMENT
❠ U+2760 HEAVY LOW DOUBLE COMMA QUOTATION MARK ORNAMENT
⹂ U+2E42 DOUBLE LOW-REVERSED-9 QUOTATION MARK
〟U+301F LOW DOUBLE PRIME QUOTATION MARK
🙸 U+1F678 SANS-SERIF HEAVY LOW DOUBLE COMMA QUOTATION MARK ORNAMENT

Answer 3

您可以使用常规引号和垂直居中显示引号的自定义 Web 字体。

如果您已经在使用网络字体，请对其进行调整，以便众多 Unicode 引号字符之一显示在行的中间。

或者只使用图像或 html

<svg>

标签。

Answer 4

叹息，人们。 您需要 „ 特殊 HTML 字符。 最好的！彼得斯