在CSS中設置字體底部對齊是一個常見的需求。常常需要在不同的元素之間保持一致的行高和底部對齊。

在CSS中，我們使用“vertical-align”屬性來設置元素的垂直對齊方式。但是，這個屬性對于文字的對齊方式并不適用。

p {
font-size: 16px;
line-height: 20px;
}
span {
font-size: 24px;
vertical-align: bottom;
}

上面的代碼中，我們設置了一個段落元素的字體大小和行高，然后使用一個span元素來改變字體大小，同時將其底部對齊。

但是，如果我們使用一個不同的字體或字號，就會發現底部對齊的情況不再成立。

p {
font-size: 16px;
line-height: 20px;
}
span {
font-family: Arial;
font-size: 24px;
vertical-align: bottom;
}

上面的代碼中，我們將字體改成了Arial，并依舊使用24px的字號和底部對齊。但是，這時候底部并不對齊，這是因為不同的字體具有不同的基線高度。

為了解決這個問題，我們可以使用JavaScript來進行底部對齊的計算。

var p = document.getElementById('paragraph');
var span = document.getElementById('span');
var lineHeight = parseFloat(getComputedStyle(p).lineHeight);
var fontSize = parseFloat(getComputedStyle(span).fontSize);
var difference = (lineHeight - fontSize) / 2;
span.style.position = 'relative';
span.style.bottom = difference + 'px';

上面的代碼使用JavaScript來獲取段落的行高和span元素的字體大小，并計算出他們的差異。然后將span元素的position屬性設置為relative，并將bottom屬性設置為diffence的值。

這樣就可以實現不同字體，不同字號之間的底部對齊了。