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

Question

我正在开发一个使用 D3 生成图表的网络应用程序。当我在不同的 OS 和浏览器上测试该应用程序时，字体呈现方式大不相同。最大的区别通常在 Windows 和 Linux 之间（在我的例子中是 ubuntu）。 Windows 上文本元素的宽度要大得多，这导致文本看起来更笨重。我知道让所有浏览器和 OS 的字体看起来都一样似乎仍然是不可能的。但是当我查看 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;
}

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

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

Answer 1

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

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

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

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

SVG: Font spacing very different on Windows and Linux

javascript

svg

rendering

cross-platform

d3.js