Question

在Adobe Illustrator（或Photoshop）中

字母A. 字体系列：Arial 字体大小：396.55pt 措施： - 宽度：93.8毫米（266像素） - 高度：100.2毫米（284像素）

在Javascript中测量： - 宽度：265px（匹配，是正确的） - 身高：456像素（不匹配，抓住行高，这是错误的）

我怎么能得到这封信的精确高度？

// 6pt ---------------- 8px
// 96px --------------- 25.4mm

var arial_A_upper_pt = jQuery("#arial_A_upper_pt").html();
jQuery("#arial_A_upper").html("A");
jQuery("#arial_A_upper").css("font-size", arial_A_upper_pt + "px");

var arial_A_upper_width_on_px = jQuery("#arial_A_upper").width(); // on PX
//  var arial_A_upper_width_on_mm = ((arial_A_upper_width_on_px * 25.4) / 96);
//  arial_A_upper_width_on_mm = arial_A_upper_width_on_mm.toFixed(2);
jQuery("#arial_A_upper_width").html(arial_A_upper_width_on_px + "px");

var arial_A_upper_height_on_px = jQuery("#arial_A_upper").height(); // on PX
//  var arial_A_upper_height_on_mm = ((arial_A_upper_height_on_px * 25.4) / 96);
//  arial_A_upper_height_on_mm = arial_A_upper_height_on_mm.toFixed(2);
jQuery("#arial_A_upper_height").html(arial_A_upper_height_on_px + "px");

示例：http://jsfiddle.net/7Cunp/6/

我需要这个：http://www.javiscript.es/desarrollo/letrascortadas/img/letter_size.jpg

Answer 1

这是一个问题，不容易回答。我几乎可以保证没有你可以打电话来获取价值的房产。

首先，数据嵌入在字体文件中，JS可能无法访问（如果我错了，请纠正我）。其次，几乎每个字体文件的值都不同。

但是，您可以使用一点数学来近似大小。

字母的大小是从上升到下降的底部测量的。也称为EM。这是水平和垂直使用。大写字母的大小有时被概括为EM的2/3。

所以，因为jQuery错误地返回了高度，但是正确地返回了宽度。（EM-size，而不是字母的实际宽度，如果你测量它：D）我会做这样的事情：

var EM_height = jQuery("#arial_A_upper").width()
var uppercase_height = Math.floor(EM_height / 3 * 2)

JS不是我的强者，所以有人可以说，如果有更好的方法。

如果您知道它只会用于特定字体（例如Arial），您可以获得更好的价值。

例如。 72pt Arial在我的计算机上的大写字母A上测量51.37pt。

51,37 / 72 = 0,713472222所以这是你需要的比率。所以7/10可能是一个很好的建议。

希望有所帮助。

Answer 2

实际上，您永远不会像在 Photoshop 或 Illustrator 中那样在浏览器中获得准确的结果。

每个浏览器都以自己的方式呈现字体。（http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari）。

在您的情况下，最接近的变体是将行高与字体大小相同。

jQuery("#arial_A_upper").css("line-height", arial_A_upper_pt + "px");

因为浏览器默认设置＆＃34;正常＆＃34;行高比字体大小大，所以高度比它应该大得多。但是，即使你将行高与字体大小相同，你也会获得更大的结果。（397px）

Javascript - 获取真正的字母宽度和高度（没有行高）

2 个答案: