有没有浮在基线上方的引号符号？

Question

在检查我的网页时，我看到引号 "、' 或我尝试找到的任何其他变体，例如 “ 或 ” 全部，如您所料，在它们下方有一个大的白色-space - 它们漂浮在基线上方是正常的。

是否有任何 Unicode 或 HTML 字形只是引号，而不是浮在引号上方？我想这等同于问，“是否有一个引号在其框内垂直居中？”或“基线上是否有引号？”这不太可能存在。我试过浏览 w3.org 列表和地方，例如 CSS-Tricks，但没有成功。

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

我试过在引号上使用 margin-bottom: -8px; 来否定这一点，但这不是一个灵活的解决方案，尤其是当我弄乱行高时。

Link 到 fiddle: https://jsfiddle.net/ab6m5fvo/

Answer 1

免责声明:: 截至 2021 年 2 月，任何主流浏览器均不支持 lh 单元。最终它会 - 但现在我的回答不起作用）。

I've tried using margin-bottom: -8px; on the quote mark to negate this, but it isn't flexible solution, especially once I mess around with line heights.

That's what the lh unit is for.

.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

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

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

或者只使用图片或 html <svg> 标签。

有没有浮在基线上方的引号符号？

Is there a quotation mark symbol that doesn't float high above the baseline?

html

css

unicode