为某些字体提出了 Css 线夹省略号答案

【问题标题】：Css line-clamp ellipsis raised for certain fonts为某些字体提出了 Css 线夹省略号
【发布时间】：2020-07-11 01:12:59
【问题描述】：

使用 Gothic A1 Google 字体和 line-clamp css 属性，省略号被提出。对于所有其他字体，它们都是基线。

我怎样才能使它们也使用 Gothic A1 字体成为基线？

https://codepen.io/textarea/pen/wvvmGOr

.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;
}

【问题讨论】：

在这里打开了一个github问题github.com/google/fonts/issues/2298，但是这个字体似乎没有机会。

标签： css google-fonts

【解决方案1】：

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

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

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

full example.

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

没有选项可以更改线夹属性中的省略号。

【解决方案4】：

我们在工作中也遇到过类似的情况。我们使用的是更适合汉字（日文和中文）字符的 Meiryo 字体。在日语和汉语中，省略号位于直线的中心，而不是像大多数西方语言那样与基线对齐。我读过 Gothic 字体在日本和中国是一种流行的选择。也许这也有助于解释 Gothic 字体的问题。

【讨论】：