3

我正在使用 Roboto 系列字体。总的来说，它非常适合我的所有需求，除了一个。ndash 和 mdash 之间的长度差异很小。这是一个非常重要的方面，因为作为我们服务的一部分——我们正在帮助编辑、校对员、作家和排版员。

为了解决这个问题，我们调整了字体并将其托管在我们的服务器上。不幸的是，这对页面加载和渲染速度有很大影响（即使是预加载字体）。

我想切换到 Roboto 字体的 CDNJS 版本，我想知道是否有 CSS 或 CSS+JS 方法来解决这个问题。这个想法是选择网站上的所有 ndashes 并使用 JS 或 CSS 缩短所有这些，使其正好位于 dash 和 mdash 之间的长度的中间。在原始 Roboto 字体中，ndash 的长度是 dash 的两倍，但 mdash 仅比 ndash 长一点。

另一种方法是，用另一种字体的 ndash 替换所有 ndashes。还有其他想法吗？

4

1 回答 1

2

您提到从另一种字体替换 ndashes 和 mdashes 。

您是否考虑过使用 CSS font-face unicode-range 属性？

如果你的字体有你想要的那种大小的破折号，你可以用它们代替 Roboto 中的破折号。

我无法立即找到一种与标准破折号有足够不同的字体来演示，但这是来自MDN的代码，它将 Helvetica 中的 & 符号替换为 Times New Roman 中稍微华丽的符号。此方法无需对实际文本执行任何操作。

@font-face {
  font-family: 'Ampersand';
  src: local('Times New Roman');
  unicode-range: U+26;/* 2013-2014 ndash and mdash */
}

div {
  font-size: 4em;
  font-family: Ampersand, Helvetica, sans-serif;
}
<div>Me & You = Us</div>

于 2020-10-25T21:26:18.743 回答