- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我有一个主要是文本的 SVG。
它在 Windows 7 上的 Firefox 53 和 Chrome 58 中呈现相同(且正确)。
它在 Android 6 上的 Firefox Mobile 53 和 Chrome Mobile 58 中呈现相同(但不正确)。
不正确的呈现与间距有关 - 两个非文本元素的位置不正确,一个非文本元素比应有的宽度更宽。
我的猜测是字体呈现不同 - 但 Android 6 上的 Arial 与 Windows 7 上的 Arial 呈现不同吗?
这是我的 SVG:
<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>
我需要在我的 XML 中显式声明什么,以便 SVG 在桌面和移动设备之间以相同方式呈现?谢谢。
最佳答案
更好地将文本转换为路径解释(这不仅适用于 SVG,而且适用于任何设计元素;来自 Corel/A.Illustrator 的基本建议)。
其他方法是导入所需的字体(通过使用 Google 字体或 woff/woff2/eot/ttf/svg 组中的内部文件)。请注意,当前解决方案仅适用于 <object>
或 inline-svg(不适用于 <img>
):
<defs>
<style type="text/css">
@font-face {
font-family: Arial;
src: url('font_path/arial-like-font.woff');
}
</style>
</defs>
关于android - 桌面和移动设备之间的 SVG 渲染不一致 - Arial 是 SVG 中的网络安全字体吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43893833/
我有一些相当复杂的 CSS,但要点是我有这个: font-family: Arial, Sans-serif; font-size: 12px; font-weight: bold; 除了 norma
我的本应为 Arial Black 的文本在 Firefox 上无法正常工作。它只是显示为常规文本。所以我使用了带有 Strong 标签的 Arial 字体。我无法区分它们的外观。有什么我应该担心
在我的桌面页面上,字体系列:Arial;大于 Font-Family: Times New Roman;两个字体大小:50px; 但是,在我的移动设备上,“Times”字体看起来比“Arial”字体大
我使用的是大号 Arial 字体 - 40px Arial Bold。 我注意到它在 Windows 的 Chrome/Firefox 浏览器中无法准确呈现。它很接近,但有微妙的不同。将字体大小增加到
我在网站上使用了 Arial 斜体。我是这样做的: font-family: Arial; font-style:italic; font-weight:100; 在 Photoshop 中,Aria
“A”、“C”和“T”之间的间距比其他字母之间的间距宽。是什么原因造成的,我该如何解决? Activiteiten 这是我的
我注意到在我的 WPF 应用程序中有些数字比其他数字短一点。我使用的是 Arial 字体。数字是 1、2、4 和 7。 是否有可能使每个数字都达到同一水平? 最佳答案 字体是视觉元素。因此,它们不必在
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 关闭 10 年前。 社区在 12 个月前
Arial Black网路安全吗? 我已经读过它,但是当我将其放入字体声明中时,就得到了Times New Roman的支持。 有人知道为什么吗? 最佳答案 根据代码样式字体调查(实际上可能是最好的估
我正在考虑一个脚本,它可以将网页的字体外观从 Arial 更改为我选择的其他字体。 我应该怎么做? 我明白了:* { font-family: "SomeFont"; } 但这并不能实现只针对Aria
我最近更新了我的 body 标签 CSS font-family: Arial, Helvetica, san-serif; 到 font-family: Arial; 公元前我假设所有现代浏
在使用粗体 Arial 字体时,左侧会出现意想不到的边距(仅约 1 像素)。 参见示例:http://jsfiddle.net/be2EW/1/ HTML: ABC STU CSS: body {
我在 Firefox 上遇到了一个奇怪的问题。我有一个 元素有一些 在里面。 svg 相对于父级缩放。现在我注意到 Firefox 上发生了一些奇怪的事情用我的文字(特别是 Arial 字体)。基本上
我有一个带有据说是 Arial 的动态文本的 Flash 电影,在我的 Windows 机器中它显示为 Arial。但是当我在 Mac 上尝试它时,它显示为类似 Times New Roman 的东西
我被要求在 R 中使用 Arial 字体重做以下维恩图,但没有组名...看着 VennDiagram manual我不明白我该怎么做... 这是我的 MWE: #install.packages("V
我们有基于.NET WinForms的应用程序,并且有望在至少9种语言上运行,包括 英语 西类牙语 俄语 简体中文 繁体中文 韩语 日语 我们的应用程序应可在Windows XP(SP3),Vista
我有一个程序在 C# 中使用 PDFsharp 手动生成 PDF。虽然它相当乏味,但我必须使用它并且即将完成任务。只剩下一个问题。 问题:我想知道如何找出 Arial 中给定字体大小的给定字符的宽度。
我正在使用令人惊叹的新字体 Source Sans Pro作为我的基本字体(它确实质量很好,我受够了到处看到 Ariel)。 我的问题是,如果由于任何原因字体没有加载,并且由于字体大小的变化而恢复为
我的字体系列 CSS 规则有问题。 这是我的规则: font-family: "helvetica neue ultralight", Arial, serif; 我不明白的是为什么 Arial 字体
Arial 和 Helvetica 是 Windows Mac/Linux iOS 和 Android 设备的安全字体吗? 我做了一些测试,例如 Arial 和 Helvetica 没有在 Andro
我是一名优秀的程序员,十分优秀!