SVG: Schriftabstand sehr unterschiedlich unter Windows und Linux

Question

Ich entwickle eine Webapp mit D3, um Diagramme zu generieren. Wenn ich die App auf verschiedenen Betriebssystemen und Browsern teste, werden die Schriftarten sehr unterschiedlich wiedergegeben. Der größte Unterschied besteht in der Regel zwischen Windows und Linux (in meinem Fall ubuntu). Die Breite eines Textelements ist unter Windows viel größer, wodurch der Text voluminöser aussieht. Ich weiß, dass es immer noch unmöglich scheint, die Schriften in allen Browsern und Betriebssystemen gleich aussehen zu lassen. Aber wenn ich auf andere Beispiele der d3-Website schaue, scheint das Problem nicht so groß zu sein wie in meiner App, also muss es eine Art Workaround geben.

Dies ist, wie ich mein derzeitiger Diagramm in Javascript eingerichtet:

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; 
} 

I Brief Abstand ausprobiert, aber es ist nicht wirklich die Wiedergabe zwischen den verschiedenen OS beeinflußte .

Wie kann ich den Unterschied der Schriftwiedergabe zwischen Windows und Linux minimieren?

Answer 1

Verdana ist eine etwas breitere serifenlose Schrift und Windows-spezifisch. Wenn Sie es angeben, sind Sie fast sicher, dass Sie einen größeren Text unter Windows erhalten (Arial wäre schmaler als der Durchschnitt).

Wie auch immer, es ist ziemlich unwahrscheinlich, dass Sie eine Schriftart standardmäßig unter Windows und Linux (alle Varianten) finden, unabhängig von den Unterschieden im Text-Rendering. Microsoft verwendet gerne proprietäre Schriften, Linux bevorzugt Open-Source-Schriften. Stellen Sie nur sicher, dass Ihr Design 10/20% Breitenunterschiede berücksichtigen kann (Schriftgröße ist eine Höhenmessung).

Das oder verwenden Sie Webfonts, aber Webfonts haben ihre eigenen Nachteile (begrenzte Abdeckung, längere Ladezeiten, verärgert caped-Benutzer).