跨平台安全使用的 SVG 字体

SVG Fonts that are safe to use, across platforms

我正在制作其中包含文本的 SVG 图表。我希望文本保留为文本,而不是曲线,以保持文件较小。

不过这有字体丢失的问题。我在我的 Ubuntu 机器上选择了一个漂亮的字体,但是当我在 Android phone 上查看图表时,文本看起来完全不同。就像白天和黑夜。 (这里提到的字体是 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:

在 Android:

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

简短的回答是 "No"。 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>