javascript - SVG:Windows 和 Linux 上的字体间距非常不同

Question

我正在开发一个使用 D3 生成图表的网络应用程序。当我在不同的操作系统和浏览器上测试应用程序时，字体的呈现方式截然不同。最大的区别通常是 Windows 和 Linux(在我的例子中是 ubuntu)之间。 Windows 上文本元素的宽度要大得多，这会导致文本看起来更庞大。我知道让字体在所有浏览器和操作系统上看起来都一样似乎仍然是不可能的。但是当我查看 d3 网站的其他示例时，问题似乎并不像我的应用程序中那么大，因此必须有某种解决方法。

这就是我目前在 javascript 中设置图表的方式:

var chart = d3.select("#wrapper")
                .classed("svg-container", true) //container class to make it responsive
                .append("svg")
                .attr("id", "chart")
                .attr("version", 1.1)
                .attr("xmlns", "http://www.w3.org/2000/svg")
                .attr("preserveAspectRatio", "xMinYMin meet")
                .attr("viewBox" , "0 0 " + WIDTH + " " + HEIGHT)
                .attr("width", "100%")
                .classed("svg-content-responsive", true)
                .style("font-size", "16px")
                .style("font-family", "Verdana, Geneva, sans-serif")
                .style("font-style", "normal")
                .style("font-variant", "normal")
                .style("font-weight", "normal")
//              .style("letter-spacing", "0px")
                .style("text-rendering", "optimizeLegibility")
                .style("shape-rendering", "default")
                .style("background-color", background);

CSS:

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    vertical-align: top;
    overflow: hidden;
}

.svg-content-responsive {
    display: inline-block;
    float: left;
    position: absolute;
    top: 10px;
    left: 0;
}

我尝试了字母间距，但它并没有真正影响不同操作系统之间的渲染。

如何最小化 Windows 和 Linux 之间字体渲染的差异？

Answer 1

Verdana 是比普通无衬线字体稍宽的字体，并且是特定于 Windows 的。通过指定它，您几乎肯定会在 Windows 上获得更大的文本(Arial 会比平均宽度窄)。

无论如何，无论文本渲染有何差异，您都不太可能在 Windows 和 Linux(所有变体)上找到默认存在的字体。微软喜欢使用专有字体，Linux喜欢使用开源字体。只需确保您的设计可以容纳 10/20% 的宽度差异(字体大小是高度测量值)。

或者使用网络字体，但网络字体有其自身的缺点(覆盖范围有限、加载时间较长、用户愤怒)。