Question

我正在使用D3开发一个webapp来生成图表。当我在不同的操作系统和浏览器上测试应用程序时，字体呈现方式完全不同。最大的区别通常在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比sans-serif字体宽一点，并且特定于Windows。通过指定它，您几乎肯定会在Windows上获得更大的文本（Arial将比平均值更窄）。

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

那，或使用网络字体，但网络字体有其自身的缺点（有限的覆盖范围，更长的负载，愤怒的caped用户）。

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

1 个答案: