如何计算在JavaScript下行高度？ [英] How to calculate descender height in javascript?

问题描述

我的css根据字体的不同，定义了font-family级联：

  .myfont {
文本转换：大写; 
 font-family：Calibri，Ari​​al，sans-serif; 
填充：2em; 
 background-color：red; 
 
 
 
 
 
 $ b 
根据呈现的字体，我想调整填充在< sarcasm> 美丽的< /讽刺> 红色背景中适当居中放置全部大写的文字。有没有一种很好的方法来计算字体的大小 descender ，以便我可以调整底部填充相应的？
 
 
 
解决方案的奖励点也计算 ascender height ，帽高和 x-height 。
 
 
 
预先感谢！这是可能的：使用此库：       blob / master / baseline-ratio.jsrel =nofollow>基准比率或 typography.js 将两个跨度插入一个容器div，字体大小为0px，字体大小为100或2000，调用 getBoundingClientRect（）; ，得到身高的差异，除以更大的身高。 0px字体位于基线上。这给出了基准比例，上升和下降的百分比。  
My css has defined the font-family to cascade depending on what fonts are available:
.myfont { 
    text-transform: uppercase;
    font-family: Calibri, Arial, sans-serif;
    padding: 2em;
    background-color: red;
}
and, depending on what font is rendered, I would like to adjust the padding to appropriately center the all-caps text in the <sarcasm>beautiful</sarcasm> red background. Is there a good way to calculate the size of the font descender so that I can adjust the bottom padding accordingly?


Bonus points for solutions that also calculate the ascender height, cap height, and x-height.

Thanks in advance!
解决方案
This is possible: use this library: baseline ratio, or typography.js Insert two spans into a container div, with 0px font size and a large font size like 100 or 2000, call getBoundingClientRect();, get difference in height, and divide by the bigger ones height. The 0 px font lies on the baseline. This gives baseline ratio, percentage of ascender and descender. 

                        
这篇关于如何计算在JavaScript下行高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！