Tôi có một SVG chủ yếu là văn bản.Hiển thị SVG không đồng nhất giữa máy tính để bàn và thiết bị di động - Arial có phải là phông chữ an toàn trên web trong SVG không?
Nó được render hệt (và chính xác) trong Firefox 53 và Chrome 58 trên Windows 7.
Nó được render hệt (nhưng không chính xác) trong Firefox Mobile 53 và Chrome Mobile 58 trên Android 6.
Hiển thị không chính xác có liên quan đến khoảng cách - hai phần tử không phải văn bản được định vị không chính xác và một phần tử không phải văn bản rộng hơn nó phải là.
Đoán của tôi là phông chữ được hiển thị khác nhau - nhưng sẽ Arial trên Android 6 hiển thị khác với Arial trên Windows 7?
Đây là SVG của tôi:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewbox="0 0 805 120">
<defs>
<filter id="shadow" x="0" y="0">
<feOffset result="offOut" dx="2" dy="2" />
<feColorMatrix result="matrixOut" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" stdDeviation="2" />
<feBlend in="SourceGraphic" mode="normal" />
</filter>
<style type="text/css"><![CDATA[
svg {
font-family: arial;
font-size: 84px;
font-weight: 900;
text-transform: uppercase;
}
text, rect, path {
fill: rgb(0, 75, 165);
stroke: rgb(30, 40, 90);
stroke-width: 1;
}
rect + text {
fill: rgb(255, 255, 255);
}
a:nth-of-type(2) rect {
stroke: none;
fill: rgb(255, 255, 255);
}
path {
transform: translate(414px, 12px);
}
]]></style>
</defs>
<a xlink:href="http://handsoffhri.org/"><text x="0" y="70" filter="url(#shadow)">#Hands</text><rect x="396" y="0" width="200" height="80" /><text x="406" y="70">Off</text><text x="603" y="70" filter="url(#shadow)">HRI</text></a>
<a xlink:href="http://handsoffnhs.org/">
<rect x="426" y="20" width="30" height="40" />
<path d="M 17.923077,46.076923 C 14.343392,42.497239 14.27418,40.818155 17.53034,36.54911 19.670795,33.742828 19.964561,32.558959 19.43687,28.865832 19.093774,26.464624 18.091959,22.925 17.210613,21 15.473393,17.205632 14.946739,8.8090066 16.395225,8 c 0.492374,-0.275 1.522812,1.75 2.289861,4.5 0.76705,2.75 1.785893,5.9 2.264097,7 0.478204,1.1 1.121144,2.7875 1.428755,3.75 0.388325,1.215052 1.601353,1.75 3.968232,1.75 1.874918,0 3.94672,0.647984 4.604006,1.439966 0.657286,0.791981 2.129739,1.579481 3.272118,1.75 3.300549,0.492661 6.095959,4.949339 4.942528,7.879795 C 38.638723,37.406393 37.617787,40.525 36.896075,43 c -1.470078,5.04141 -2.354638,5.96259 -5.746769,5.984687 -2.184572,0.01423 -2.312807,-0.285031 -1.814586,-4.234687 0.29486,-2.3375 0.828492,-5.625597 1.18585,-7.306882 0.910327,-4.282879 -1.674633,-6.518656 -4.539328,-3.926143 -2.445773,2.213395 -2.522575,5.352525 -0.231242,9.451617 1.687087,3.018122 1.680216,3.182812 -0.19113,4.581039 -2.817812,2.105407 -4.353952,1.809133 -7.635793,-1.472708 z M 5.9073963,33.25 2.6076082,29.5 5.0157824,29.152671 C 7.7278899,28.761505 11,32.019342 11,35.110784 11,37.937782 9.573836,37.416676 5.9073963,33.25 Z M 41.007272,27 c 0.549073,-1.375 1.491079,-3.7375 2.093346,-5.25 0.602268,-1.5125 1.726011,-2.75 2.497207,-2.75 2.311553,0 1.576924,2.264983 -2.108223,6.5 -2.678238,3.077864 -3.250499,3.423665 -2.48233,1.5 z m -8.000683,-3.75 c 0.0036,-0.9625 0.900659,-3.1 1.993411,-4.75 1.092752,-1.65 1.989787,-4.4074 1.993411,-6.127555 0.0073,-3.4695992 2.322706,-6.2880071 3.543292,-4.3130587 0.626634,1.0139159 -1.08136,7.8982867 -3.644702,14.6906137 -1.001533,2.653854 -3.894924,3.026194 -3.885412,0.5 z m -6.936221,-3.118517 c -0.55,-1.027684 -0.689818,-2.1787 -0.310706,-2.557811 0.379112,-0.379112 0.559103,-3.58828 0.39998,-7.131483 C 25.922072,5.152178 26.148965,4 27.42827,4 c 1.304453,0 1.537588,1.4643706 1.432844,9 -0.123753,8.903267 -0.849702,10.758358 -2.790746,7.131483 z" id="path3690" />
</a>
</svg>
gì tôi cần phải tuyên bố một cách rõ ràng trong XML của tôi, để mà SVG renders hệt giữa máy tính để bàn và điện thoại di động? Cảm ơn.
[Arial là phông chữ của Microsoft] (https://en.wikipedia.org/wiki/Arial). AFAIK, thiết bị Android không có Arial. – CommonsWare
Cảm ơn @CommonsWare. Vì vậy, chúng tôi nghĩ rằng có lẽ Android đang hiển thị một phông chữ khác nhau, không phải Arial? Nếu đó là vấn đề - tức là. Arial là _not_ web-an toàn - sau đó tôi đoán tôi đang tìm kiếm một phông chữ sans-serif có nguồn gốc từ Windows, Mac OS, Linux, iOS và Android (?) – Rounin
Là cách tiếp cận tốt hơn để chuyển đổi văn bản thành phác thảo và sau đó sử dụng '' thay vì ' '? Nếu có thể, tôi muốn đạt được khả năng tương thích đa nền tảng, trong khi _maintaining accessibility_. –
Rounin