首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Javascript -获取实际的字母宽度和高度(不带line- height )

Javascript -获取实际的字母宽度和高度(不带line- height )
EN

Stack Overflow用户
提问于 2014-04-22 18:46:45
回答 1查看 1.2K关注 0票数 1

在Adobe Illustrator (或Photoshop)中

字母A字体-系列: Arial字体-大小: 396.55pt度量:-宽度:93.8 Measures (266px) -高度:100.2 Measures (284px)

在Javascript中测量:- Width: 265px (匹配,是正确的)- Height: 456px (不匹配,抓取行高,这是错误的)

我怎样才能得到字母的确切高度?

代码语言:javascript
复制
// 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

EN

回答 1

Stack Overflow用户

发布于 2014-04-22 19:26:20

这是一个很难回答的问题。我几乎可以保证,没有一个属性可以调用来获取值。

首先,数据嵌入在font-file中,JS可能无法访问(如果我错了,请纠正我)。其次,几乎每个字体文件的值都是不同的。

但是,您可以使用一些数学运算来获得大小的近似值。

字母的大小是从上边到下边测量的。也称为EM。这既可以水平使用,也可以垂直使用。大写字母的大小有时被概括为EM的2/3。

因此,由于jQuery返回的是错误的高度,而是正确的宽度。(EM大小,而不是字母的实际宽度,如果您测量它:D)我会这样做:

代码语言:javascript
复制
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可能是一个很好的建议。

希望这能有所帮助。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23217307

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档