如何获取（网络）字体中单个字符的大小？

Posted 2023-03-06

【中文标题】如何获取（网络）字体中单个字符的大小？

【英文标题】：How to get the size of a single character in a (web) font?

【发布时间】：2011-09-02 13:19:30

【问题描述】：

我编写了一个 python 脚本来生成一个 SVG 文件。这个 SVG 文件使用网络字体（通过 CSS 从 google webfonts 导入）来很好地呈现我的文本。一切都很好，只是在将句子放入我的 SVG 文件之前我需要知道它的大小（以像素为单位）。

前几天刚开始学习python，不知道这种东西能不能搞定。 Google 帮助我找到了 ImageFont python 模块（来自 Python Imaging Library）的存在，但似乎 ImageFont 需要从本地路径加载字体文件才能计算字符大小。

是否存在计算网络字体字符大小的方法？

感谢您的帮助。

【问题讨论】：

为什么需要知道句子的大小？是关于文本换行吗？

实际上我有我用作 textPath 的路径。我有一句话要在这条路上重复，直到我走到尽头。例如，如果我的单词是 foo，我会在路径上尽可能多地重复“foo”。

【参考方案1】：

您可以使用 javascript 和 SVG DOM 在客户端实现它。

第一步：创建一个文本元素并使用 getComputedTextLength() 方法计算其长度 (http://www.w3.org/TR/SVG11/text.html#InterfaceSVGTextContentElement)

<text id="foo" xml:space="preserve">foo </text>

然后使用 getTotalLength() 方法（http://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathElement）计算路径长度

并且您可以计算在被截断之前可以放置多少次文本。

【讨论】：

阅读您的回答后（顺便说一句，答案很好）我明白我的问题并不完全是问题。实际上，我在开发过程中使用 CSS 轻松更改样式并测试了一些东西，但是当我询问我的网络字体问题时，我忘记了我的脚本的主要需求之一：导出的 SVG 必须由 Gimp / Inkscape / 读取插画家。显然，CSS 不可能，所以 webfonts 不会是一种选择（或者我也可能错了）。然后我将使用本地和网络字体来执行我的测试。

【参考方案2】：

您会每次都使用相同的字体吗？如果是这样：获取字体的本地副本，在本地运行测试并缓存它们（SQLite 数据库？存储在 Python 模块中的宽度数组？这部分取决于您）。但是，请注意，由于kerning，句子的宽度可能与其字符宽度的总和不同。如果要准确，则需要计算句子本身的宽度。

这真的需要在服务器上完成吗？例如，如果您的客户端是 Web 浏览器，您可以使用类似 jQuery 的 .width() 方法来询问浏览器元素的实际大小，或 do some manipulation in your own JavaScript。

更好的方法是设计您的 SVG，使其具有更“流动”的布局，并期望元素可能会增长或缩小到任意大小，并使用像 elementtext = elementtext[:100] 这样的普通代码将其长度限制在某个预定阈值价值。基本上，确保它适用于一定数量的文本，然后确保您不会使用超过那么多的文本。你没有使用《独立宣言》作为文本标签，对吧？

【讨论】：

首先，感谢您的快速回答。事实上，我可能会使用几种不同的字体。字距调整是一个真正的问题，但它只取决于我使用的解决方案。感谢 SVG 字距调整不是一个大问题，只要我可以手动设置（我想我在 SVG 文档中读到了一些相关内容）。无论如何，我打算写很长的句子，而不是独立宣言，但足够长以使我认为的 elementtext[:100] 无效（无论如何我必须对此进行测试）。关于在客户端使用 Javascript，这是一个可以接受的答案，但正如我告诉 @Tangui 我的部分问题是错误的。