在進行網站開發中，經常會使用到 CSS 圖表來展示數據，但有時候圖表與字體總是對不齊，影響整個頁面的美觀度。這時就需要對圖表與字體做出一些調整。

/* 創建一個存放圖表的 div */
.chart {
display: flex;
align-items: baseline; /* 對齊基線 */
font-size: 0; /* 將圖表中的空白字符去除 */
}
/* 設置圖表樣式 */
.chart li {
display: inline-block;
width: 20px;
height: 100px;
background-color: #f00;
margin-right: 15px;
vertical-align: bottom;
}
/* 設置文字樣式 */
.chart li span {
display: block;
text-align: center;
font-size: 16px;
}

上述代碼中，我們首先創建了一個 div 元素作為存放圖表的容器。接著使用了display: flex屬性使內容水平排列，使用align-items: baseline屬性使圖表基線對齊，避免出現不協調的情況。此外，還將字體大小設置為 0，去除圖表中的空白字符。

當我們為圖表和文字設置樣式時，需要將圖表的vertical-align屬性設置為 bottom，將文字居中對齊，并設置合適的字體大小。

以上就是如何使用 CSS 實現圖表與字體對齊的方法，確保網站中的圖表顯示效果更加美觀。