2017-05-10 69 views
9

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.

+2

[Arial là phông chữ của Microsoft] (https://en.wikipedia.org/wiki/Arial). AFAIK, thiết bị Android không có Arial. – CommonsWare

+0

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

+0

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

Trả lời

2

Tốt hơn để chuyển đổi văn bản thành diễn giải đường dẫn (thực tế không chỉ cho SVG, mà còn cho bất kỳ phần tử thiết kế nào; đề xuất cơ bản từ Corel/A.Illustrator).

Cách bổ sung là nhập phông chữ bắt buộc (bằng cách sử dụng Google Fonts hoặc tệp nội bộ trong nhóm woff/woff2/eot/ttf/svg). Xin vui lòng, lưu ý rằng các giải pháp hiện tại đang làm việc chỉ cho <object> hoặc inline-svg (không khả thi cho <img>):

<defs> 
    <style type="text/css"> 
     @font-face { 
      font-family: Arial; 
      src: url('font_path/arial-like-font.woff'); 
     } 
    </style> 
</defs> 
+0

Tôi đã xem xét chuyển đổi thành đường dẫn.Nhưng nếu tôi chuyển đổi văn bản thành đường dẫn, tôi đoán văn bản sẽ không sao chép-dán và (cho là quan trọng hơn) nó sẽ không thể đọc được trên máy. Có đúng không? – Rounin

+0

Vâng ... sau khi chuyển đổi, nó sẽ không thể lựa chọn hoặc có thể đọc được trên máy. Trong trường hợp đó, chỉ cần sử dụng phông chữ tương tự bằng cách sử dụng '@ font-face' để biểu diễn giống hệt nhau trong các thiết bị/OS/trình duyệt khác nhau. – FieryCat

0

Tôi không chắc chắn về Android, nhưng trên hầu hết các distro Linux không phải là Arial sẵn ra của hộp, nó thực sự tốt hơn nhiều chỉ để sử dụng cùng một họ phông chữ và nếu bạn phụ thuộc vào cùng một cách hiển thị, chỉ cần chuyển văn bản thành đường dẫn như @FieryCat đề xuất (và chèn văn bản thực như một bài kiểm tra alt)

Các vấn đề liên quan