跨平台安全使用的SVG字体

我制作了带有文本的SVG图。我希望文本保持文本形式,而不是曲线形式,以保持文件较小。

但是,这有缺少字体的问题。我在Ubuntu机器上选择了一个漂亮的字体,但是当我随后在Android手机上查看该图时,文本看起来完全不同。就像白天和黑夜。 (这里要讨论的字体是cmmi10。)

我是否可以使用一组字体,并且可以合理地期望它们在大多数(如果不是全部)平台上可用?

SVG标签:

    <text
       id="text894"
       y="183.99944"
       x="183.92883"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:35.27777863px;line-height:1.25109994;font-family:cmmi10;-inkscape-font-specification:'cmmi10,Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
       xml:space="preserve"><tspan
         sodipodi:role="line"
         id="tspan902"
         x="183.92883"
         y="183.99944">PauliX</tspan></text>

在Ubuntu上:

跨平台安全使用的SVG字体

在Android上:

跨平台安全使用的SVG字体

是否有一些W3C标准指定了在任何浏览器中可用的一组字体?

tianyingqi020 回答:跨平台安全使用的SVG字体

简短的回答是“否”。 SVG标准未指定任何最小字体集。

最简单的选择是找到大多数系统上可用的一组外观相似的字体,例如Times New Roman(Windows),Times(MacOS)和Nimbus Roman(Linux)。然后,不仅要指定单个font-family属性(在上面的示例中为cmmi10),还应包括所有这些字体:

font-family: "Times New Roman","Times","Nimbus Roman 9L",serif;

或者,您可以将字体直接嵌入到SVG文件中。有很多带有许可证的免费字体允许您执行此操作,并且可以使用免费工具仅使用所需的字符来生成这些字体的子集。

这是一个简单的例子。在此网站上搜索可在各个平台上使用的SVG字体嵌入的更好示例。

<svg width="500" height="100" viewBox="0 0 500 100">
<defs>
<style type="text/css">
<![CDATA[
  @font-face {
    font-family: "helloworld";
    src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRk9UVE8AAAW4AAoAAAAAB7QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAADGAAAAmYAAAKVxBnEI0ZGVE0AAAWcAAAAHAAAAByMvmNxT1MvMgAAAVQAAABIAAAAYFgBYb5jbWFwAAAClAAAAHAAAAF6CX0T9mhlYWQAAAD0AAAANQAAADYWuEj+aGhlYQAAASwAAAAeAAAAJAZ9A9VobXR4AAAFgAAAABwAAAAcDtQCc21heHAAAAFMAAAABgAAAAYAClAAbmFtZQAAAZwAAAD4AAAB1/kvzw1wb3N0AAADBAAAABMAAAAg/7gAMnicY2BkYGAA4o8fopvi+W2+MnAzvwCKMNz83LgTQjevY4j+/4I5nOkUkMvBwAQSBQCjjQ7LAAAAeJxjYGRgYDr1/wVDFPMLBiBgDmdgZEAFLAB4YQRZAAAAAFAAAAoAAHicY2Bhvsg4gYGVgYGpi2kPAwNDD4RmfMBgyMgEFGVgZWaAAUYGJBCQ5prCcADICGdW+G/BEMV0ikECoYYpj0EBCBkBYtILb3icjY+xbsIwEIZ/hwCFATGwdEEeKnVKZEcsoM6MHRjYkbBSJCuWDIiX4FmYeAp2noWVP8lVXSq1tnz32ffrvzOAES5Q+F6JsMIQr8IJ+pgJd/COs3BKzU24izEewj0M1ZRKlQ7EtWWFCanlhH3fhDv4xIdwSs1VuAuNu3APE/VSW33BwXMHnHgiactH5304hejJKwpKHFnYsIyVK49+Q1hSXuHQ5EiFo3uBHIZ5wfObcVux/H3GaBkL6i3mtAvVYRli6XSRG73QPyPwYmeZtVlh7PwfA68piNhj1wyo2aBukTe5Hg5rF/e7UGljbG6M0X97PgEHdkXNeJxjYGBgZoBgGQZGBhAoAfIYwXwWhgggLcQgABRhArIUGFwZPBh8GPwZghjC//8Hq1ZgcEERY/z/6P/+/3v/7/q/4/+2/5ugZqIBRjYG7BJIgImAPAgwszAwsAJpoHHsDAwcICFOIrQNCgAARTQVf3icY2BmAIP/WxmMGLAAACzCAeoAeJxNjV9IU2EYxr/vbOe45jzajt+QOGnEFBWiRWSlJjI0QsRCaIT2x8LSaiYppkiBIkvWxxxrYYiV3gSpDNtFBdEBSaiowEAi/AORQRcFXUXvd3qP1LGbet67l9/z/ChxOgmlNLP9bDjc2dvZFW4lVCKUlIpsInQqtkoi3yHynF+6zW/mSVknHdk6ITk6Gdisk1Jduuglzg3eZZ+X6D2Xzgfs/Fv7b5cQOmyThaSIlJAdJEB2k33EvVH2kzpSTzh5RJ10O22lY3QRG7ghag1qGDBnOAyf8Ispy68YVi8TtTBn1Wao4EuJ0VkK8hOzOO2AXWY5M4ut0fVi5ZR4yqxVs1+sZqg/VaiAHHSBTyPHxRrTquFHgGkD1ywZzlyeh/o2aJO1avwKEhPeGQhi9SDex0Y8JmsDFlHUC+Idg6YpJkKpJOo4OTG+BwLjY1iFZUMxzIU7RhRDVpjLKkyDiiooXiiAMiyCco2YPqd2BHZG2Nvb3+/G7HTjNOcubRL6k8PQBw08su7Cci5rLQmYxhtcjsZtogDLFBW6odKxLJYZ+NMMKmODVgu8fnkUu6yDtkxkmc/YEj5m4O14g3oPnsPSZjw03watMl+AbfE4qBM8H28usr3Yt4Av4F4FjBiL8OqALbryUVbXxEMG7afZIG6BvMj8h8MrMj74zIQ7uYDB/fazCW9h1Qn0QGNJpAPrsWhD+wlqHM/NFjaLEoNQYsiqBB1GZA5VeD0aTYggL4Aa3rwuYR1HBUIoYehv89fVXDPIeidM6b2S76aFvz2buMedcqdiS0mPJ52ZTqwkZuKxpCfrD9ZUL+wAAAH0AAAD6ABxAxkAAAPoAKcApQCLAMsAdQCHAFsAAAABAAAAANjXXgkAAAAA2fOBuQAAAADZ84Ou") format('woff');
  }
]]>
</style>
</defs>
<text x="20" y="80" style="font-family:helloworld; font-size:40px">HELLO WORLD</text>
</svg>

本文链接:https://www.f2er.com/3100331.html

大家都在问