调整字体中的 dash、ndash 和 mdash 长度

Question

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

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

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

另一种方法是，将所有的破折号替换为另一种字体的破折号。还有其他想法吗？

Answer 1

您提到用另一种字体替换中破折号。

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

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

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

@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>

调整字体中的 dash、ndash 和 mdash 长度

Adjust dash, ndash and mdash length in the font

css

hyphen

roboto