SVG：WindowsとLinuxでフォントの間隔が大きく異なる

Question

D3を使用してグラフを生成するWebアプリケーションを開発しています。私が別の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（すべてのバリアント）の両方でフォントがデフォルトで表示されることはほとんどありません。マイクロソフトは独自のフォントを使いたいと思っている.Linuxはオープンソースのフォントを使うのが好きだ。あなたのデザインが10/20％の幅の違いに対応できることを確認してください（フォントサイズは高さの測定値です）。

ウェブフォントを使用するか、Webフォントを使用しますが、Webフォントには独自の欠点があります（カバレッジが制限され、読み込み時間が長くなり、怒られたcaped-usersが怒ります）。