SVG：Windows 和 Linux 上的字体间距非常不同答案

【问题标题】：SVG: Font spacing very different on Windows and LinuxSVG：Windows 和 Linux 上的字体间距非常不同
【发布时间】：2016-08-19 08:32:33
【问题描述】：

我正在开发一个使用 D3 生成图表的 web 应用程序。当我在不同的操作系统和浏览器上测试应用程序时，字体的呈现方式截然不同。最大的区别通常在 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 之间的字体渲染差异？

【问题讨论】：

你确定你在两个平台上得到相同的字体吗？您的字体系列提供了三种选择。
你试过.style("font-family", "Arial, sans-serif")，我认为这就是解决方案

标签： javascript d3.js svg cross-platform rendering

【解决方案1】：

Verdana 比一般的无衬线字体更宽，并且是特定于 Windows 的。通过指定它，您几乎肯定会在 Windows 上获得更大的文本（Arial 会比平均范围窄）。

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

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

【讨论】：