调整字体中的破折号，ndash和mdash长度

问题描述

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

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

我想切换到Roboto字体的CDNJS版本，我想知道是否有CSS或CSS + JS方式可以解决此问题。想法是选择站点上的所有短划线，并使用JS或CSS缩短所有短划线，使其恰好位于短划线和mdash之间的长度的中间。在原始语言中，Roboto字体ndash的长度是dash的两倍，但mdash却比ndash长一点。

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

解决方法

您提到用另一种字体替换短划线和短划线。

您是否考虑过使用CSS字体的unicode-range属性？

如果您想要的字体带有大小破折号，可以用Roboto中的破折号代替。

我无法立即找到一种具有与标准破折号足够不同的破折号来演示的字体，但是这里是MDN中的代码，用Helvetica中的“＆”号替换了Times 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>