Как рассчитать высоту спуска в javascript?

Мой css определил семейство шрифтов для каскадирования в зависимости от того, какие шрифты доступны:

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

и, в зависимости от того, какой шрифт отображается, я хотел бы настроить отступы, чтобы соответствующим образом центрировать текст с заглавными буквами на красном фоне <sarcasm>beautiful</sarcasm>. Есть ли хороший способ рассчитать размер шрифта descender, чтобы я мог настроить нижний отступ соответственно?

Бонусные баллы за решения, которые также вычисляют высоту восходящей линии, высота кепки и x-высота.

Заранее спасибо!


javascript fonts css embedded-fonts
person dino    schedule 16.04.2012    source источник
comment
Вероятно, для учета этого лучше использовать line-height (используя относительную единицу), а не padding.   -  person steveax    schedule 16.04.2012
comment
В данном конкретном случае это сработало. Это просто немного неудовлетворительно, учитывая, что должен быть способ сделать это...   -  person dino    schedule 19.04.2012

Ответы (3)


arrow_upward
3
arrow_downward

Это возможно: используйте эту библиотеку: базовое соотношение, или typography.js Вставьте два интервала в контейнер div с размером шрифта 0px и крупным шрифтом. размер, например 100 или 2000, вызовите getBoundingClientRect();, получите разницу в высоте и разделите на большую высоту. Шрифт 0 пикселей лежит на базовой линии. Это дает базовое соотношение, процент восходящих и нисходящих элементов.

person Sam Adamsh    schedule 08.08.2014
comment
когда высота span не 0, когда font-size равна 0? - person skovy; 14.04.2020

arrow_upward
0
arrow_downward

AFAIK, это невозможно с JavaScript. Вы можете узнать используемый шрифт, но не параметры шрифта.

Таким образом, вам нужно будет искать эти параметры (например, в библиотеках шрифтов) и хранить их по шрифтам, чтобы вы могли найти их, как только узнаете используемый шрифт.

person Bergi    schedule 16.04.2012

arrow_upward
0
arrow_downward

Агентство веб-разработчиков под названием EightShapes разработало инструмент, который позволяет создавать CSS для обрезки пробелов. над и под текстом и таким образом создавайте макеты, которые хорошо работают с верхними и нижними элементами. В блоге есть сообщение о Это.

person Scott Martin    schedule 15.05.2019