获取字体字形作为矢量，操纵和产品SVG或位图 [英] Get Font Glyphs as Vectors, manipulate and product SVG or Bitmap

问题描述

我有一个应用程序需要对文本进行一些转换（包括非仿射转换）。有谁知道一个工具包（或一组工具），可以让我带一个TrueType或Postscript字体，将字形作为轮廓，然后将轮廓应用到轮廓并呈现为位图或svg文件？ Flash不会做非仿射变换，所以它不在。 Illustrator具有将文本转换为轮廓的功能，但Illustrator脚本非常不稳定，所以我不能真正使用它。感谢您的帮助。

解决方案

您可以使用蜡染 TTF转SVG Font转换器。 SVG字体格式使用与SVG < path> 元素使用的路径数据格式相同。

例如，

，这个是使用上述工具转换Gentium Basic Regular的输出。使用正确的坐标系，您可以抓取路径数据，然后按照您的喜好进行转换，然后使用< path> 来绘制路径数据。请注意，SVG字体中的字形坐标系实际上是倒置的，字形盒左下角的（0,0）与左上角具有（0,0）的常规SVG画布相比。所以不要忘记翻转字形，例如将 transform =scale（1，-1）放置在< path> 字形。

一旦你有了将字形渲染成形状的SVG文档，你可以使用你最喜欢的工具将它转换成位图。 （Batik可以也这样做）。

I have an application that needs to apply some transformations to text (including non-affine transformations). Does anyone know of a toolkit (or group of tools) that would let me bring in a True Type or Postscript Font, get the glyphs as outlines, then apply transformations to the outlines and render it as a bitmap or svg file ? Flash won't do non-affine transformations so it is out. Illustrator has a function which converts text to outlines, but Illustrator scripting is very unstable so I can't really use it for this. Thanks for any help.

解决方案

You could use the Batik TTF to SVG Font converter. The SVG font format uses the same path data format that the SVG <path> element uses.

For example, this is the output from converting Gentium Basic Regular using the above tool. With the right coordinate system, you can just grab out the path data, transform it however you like, and then draw it with a <path>. Note though that the glyph coordinate system in SVG fonts is actually inverted, with the (0,0) at the bottom left corner of the glyph cell box, compared to the regular SVG canvas which has (0,0) at the top left corner. So don't forget to flip the glyph, e.g. by putting transform="scale(1,-1)" on the <path> you use to render the glyph.

Once you have the SVG document that renders the glyphs as shapes you can convert it to a bitmap using your favourite tool. (Batik can do that too.)

这篇关于获取字体字形作为矢量，操纵和产品SVG或位图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！