如何确定网页上呈现的字符串的长度（以像素为单位）？答案

【问题标题】：How to determine the length (in pixels) of a string being rendered on a web page?如何确定网页上呈现的字符串的长度（以像素为单位）？
【发布时间】：2010-12-11 03:16:03
【问题描述】：

如果我知道字体大小 (12) 和字体系列 (calibri)，有没有办法确定给定字符串在渲染后的长度（以像素为单位）？我绝对确定字体和大小。是否有任何用于此目的的查找表来确定 PHP 代码本身的长度？我正在编写一个 PHP 脚本来动态生成一个 SVG 图像，其中包含各种填充了从数据库中提取的数据的框。问题是如果字符串很大，我需要手动环绕文本并增加框的大小。

谢谢

【问题讨论】：

标签： php html svg

【解决方案1】：

您的标题和实际发布的内容似乎略有不同。我猜您真正要问的是是否可以确定网页上呈现的文本的宽度（以像素为单位）在您的 PHP 代码中（在呈现网页之前）。

如果是这样，答案是“否”。所述字体可能在用户计算机上不可用；她/他可能应用了自定义样式表；使用大字体；等等……

你可以做的是在页面渲染之后使用javascript确定宽度（显然，你也可以在其他页面中这样做，并希望在此之前没有任何变化然后）并将其提交回 PHP。通过一些巧妙的 AJAX-ing，您甚至可以在同一页面上执行此操作。

查看this question 了解如何在 javascript 中执行此操作的详细信息。

【讨论】：

请看我的编辑。为链接+1，但它不能解决我的目的:(
@ChssPly76 - 我不同意。 Crimson 正在使用 PHP 生成图像。这是在服务器端完成的，所以字体肯定是可用的。
@Abinadi - Crimson 询问该字符串在在浏览器中 呈现时会占用多少像素，而不是在他正在呈现的图像中。或者，至少，我是这么理解的。
@Crimson - 如果您真的绝对确定将使用该字体/大小呈现所述字符串（我想如果您可以完全控制最后环境 - 特定的浏览器/操作系统/字体）您实际上可以按照phalacee 的建议使用 GD 来找出它
实际上，两者兼而有之，因为我对图像使用 SVG 定义 - 图像不是位图。因此，找到正确的字体是浏览器的问题，但假设字体绝对可用。我们现在如何找到宽度？如何检索字体中每个字形的像素宽度并求和？

【解决方案2】：

您可以使用 PHP GD 将字符串呈现为图像并获取结果图像的大小。

如果你使用它，它应该可以工作：

   list($left,, $right) = imageftbbox( 12, 0, "arial.ttf", "Hello World");

   $width = $right - $left;

【讨论】：

Crimson 似乎将字符串渲染为图像，但问题是要使图像的大小为多少，以便字符串正确匹配。 GD库可以做到吗？我认为 GD 没有自动换行选项。
phalacee，我无法在 GD 中找到确定字符串宽度的方法。看来我必须先用图像宽度和高度参数调用 imagecreate()，然后才能将字符串写入它，从而使练习徒劳地往返:(
@ Crimson，即使使用 imageftbbox() ???如果你使用： list($left,, $right) = imageftbbox( 12, 0, arial.ttf, "Hello World"); $宽度 = $右 - $左;它应该工作......
imageftbbox有错别字

【解决方案3】：

使用 PHP 函数 imagettfbbox 获取给定字符串的边界框大小。

另一方面，您也可以使用javascript to manipulate SVG images，以防您想在客户端处理它。这样，客户端是否具有指定的字体甚至都无关紧要......

【讨论】：

那是我给出答案时想到的功能......我的记忆力不如以前......

【解决方案4】：

使用 jQuery，

$("text").each(function(){alert(this.innerHTML+" is "+$(this).width()+" pixels.");});

【讨论】：

【解决方案5】：

如果你想确定文本的字符串长度，使用 PHP 的 Build-In-Fonts（例如，如果你使用 imagestring()），你可以使用：

imagefontwidth()


$text = "Your text here"
$fontSize = 5;

$textLength = imagefontwidth($fontSize) * strlen($text);

如果您不使用 Build-In-Fonts，请使用 imagettfbbox()，如上所述。

【讨论】：