자바 스크립트에서 디 센더의 높이를 계산하는 방법?

내 CSS를 사용할 수있는 글꼴에 따라 계단식으로 글꼴 가족을 정의하고있다 : 렌더링 어떤 글꼴에 따라자바 스크립트에서 디 센더의 높이를 계산하는 방법?

.myfont { 
    text-transform: uppercase; 
    font-family: Calibri, Arial, sans-serif; 
    padding: 2em; 
    background-color: red; 
}

하고, 나는 적절하게 모든 대문자 텍스트를 중앙에 패딩을 조정하고 싶습니다 <sarcasm> 아름다운 </sarcasm> 빨간색 배경. 거기에 글꼴의 크기를 계산하는 좋은 방법이 있나요 descender 그래서 내가 아래쪽 패딩을 적절하게 조정할 수 있습니까?

또한 ascender height, cap height 및 x-height을 계산 솔루션을위한 보너스 포인트.

미리 감사드립니다.

출처

2012-04-16 dino

아마도'line-height' (상대적인 단위를 사용하는 것)가'padding'보다는 그것을 사용하는 것이 더 나을 것입니다. – steveax

이 특별한 경우에는 이것이 효과적이었습니다. 그걸 조금이라도 불만족스럽게 생각하면 ... – dino

이 가능하다 : 의해 얻을 getBoundingClientRect(); 전화, 0 픽셀 폰트 크기, 100 또는 2000과 같은 큰 폰트 크기로, 두 걸쳐 용기 DIV에 높이 차이 나눈 baseline ratio 또는 typography.js 삽입이 라이브러리를 사용 더 큰 것. 0 px 글꼴은 기준선에 있습니다. 이것은베이스 라인 비율, 오름차순 및 하강 비율을 제공합니다.

출처

2014-08-08 08:57:28

AFAIK는 (는) 자바 스크립트에서 지원되지 않습니다. 사용 된 글꼴을 찾을 수는 있지만 글꼴 매개 변수는 찾을 수 없습니다.

글꼴 라이브러리 등에서 이러한 매개 변수를 검색하고 by-font를 저장하여 사용 된 글꼴을 알면이를 찾을 수 있도록해야합니다.

출처

2012-04-16 19:20:58 Bergi

자바 스크립트에서 디 센더의 높이를 계산하는 방법?

답변

관련 문제