Css 某些字体的线钳省略号

Question

使用 Gothic A1 Google 字体和线夹 css 属性，省略号被凸起。对于所有其他字体，它们是基线。

如何使用 Gothic A1 字体使它们成为基线？

.box {
  font-family: 'Gothic A1', sans-serif;
  width: 500px;
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Answer 1

同样的问题... 尝试了 fonts.google.com 中的字体示例，我意识到这是一个奇怪的字体功能。

省略号始终以 Gothic A1 字体垂直居中呈现。

解决方案可能是使用三个点 (...) 代替省略号 (...)，或者使用其他字体。

Answer 2

我遇到了同样的问题，发现在文档头上使用<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;700;800;900&display=swap">（或在css文件上导入）解决了这个问题。它使用许多不同的文件和 unicode 范围，因此如果您是自托管，则必须下载 link 中的所有文件并使用它们的字体样式。如果谁有更好的解决方案，请分享。

Answer 3

我们在工作中遇到了类似的情况。我们正在使用更适合汉字（日文和中文）字符的 Meiryo 字体。在日语和中文中，省略号位于行的中央，而不是像大多数西方语言那样与基线对齐。我听说 Gothic 字体在日本和中国很受欢迎。也许这也有助于解释哥特式字体的问题。

Answer 4

您可以使用以下代码覆盖省略号章程：

@font-face {
  font-family: 'Ellipsis';
  src: local('Arial');
  unicode-range: U+2026;
}

然后将 font-family: 'Ellipsis', 'Gothic A1'; 添加到文本块。

full example.

Css 某些字体的线钳省略号

Css line-clamp ellipsis raised for certain fonts

css

google-fonts