자바 스크립트 - (라인 - 높이없이) 실제 편지 폭과 높이를 가져 오기 어도비 일러스트 레이터 (또는 Photoshop)에서

Question

문자 A 글꼴 - 가족 : 굴림 글꼴 크기 : 396.55pt 조치 : - 폭 : 93.8mm (266px) - 높이 : 100.2mm (284px) 자바 스크립트에서 측정

: - 폭 : - : 일치하지 (456px 행 높이를 잡고, 그것은이다 높이 265px (일치, 정확) 틀림)

편지의 정확한 높이를 어떻게 얻을 수 있습니까?

// 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://www.javiscript.es/desarrollo/letrascortadas/img/letter_size.jpg 질문입니다

Answer 1

, 즉 쉽게 대답하지 않습니다 :

http://jsfiddle.net/7Cunp/6/ 나는이 필요합니다. 나는 값을 얻기 위해 호출 할 수있는 속성이 없다는 것을 거의 보장 할 수 있습니다.

먼저 데이터는 글꼴 파일에 포함되어 있으며 JS에서 액세스 할 수 없습니다 (잘못했을 경우 수정하십시오). 두 번째 값은 거의 모든 글꼴 파일에서 다릅니다.

그러나 약간의 수학을 사용하여 크기에 가까운 근사값을 얻을 수 있습니다.

문자의 크기는 오름차순에서 아래로 내려 측정됩니다. EM이라고도합니다. 이것은 둘 다 수평 및 수직으로 사용됩니다. 대문자의 크기는 때때로 EM의 2/3으로 일반화됩니다. . jQuery를 올바르게합니다 (EM-크기, 문자 아닌 실제 폭, 당신이 그것을 측정하는 경우 : D)을 잘못 높이지만 폭을 반환 이후

그래서 :

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

나는 같은 것을 할 것

JS가 내 장점이 아니므로 더 나은 방법이 있다면 JS가 누군가에게 말할 수 있습니다.

Arial과 같은 특정 글꼴에서만 사용된다는 것을 알고 있으면 더 나은 가치를 얻을 수 있습니다.

예를 들면. 72pt Arial은 내 컴퓨터의 대문자 A에 대해 51.37pt를 측정합니다.

51,37/72 = 0,713472222 그래서 당신이 생각해 내야 할 비율입니다. 그래서 7/10은 아마도 좋은 제안 일 것입니다.

희망이 조금 있습니다.

Answer 2

사실 Photoshor 또는 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"); 

브라우저 높이가 그것이 있어야보다 훨씬 더 큰, 그래서 글꼴 크기보다 크다 "정상"행 높이 기본적으로 설정하기 때문에. 그러나 줄 크기를 글꼴 크기와 같게 설정하더라도 더 큰 결과를 얻을 수 있습니다. (397px)