CSS中的字符下沉是一種常見的樣式技巧。通過控制文本的垂直對齊方式,我們可以讓字符在相同的水平線上,但縱向不再對齊,從而達到一種下沉的效果。
.text { display: inline-block; vertical-align: middle; /* 設置文本為垂直居中對齊 */ line-height: 1; /* 取消行高 */ transform: translateY(0.3em); /* 將字符下沉0.3em */ }
在上面的代碼中,我們通過將文本設置為inline-block,使其成為一個行內塊元素,并設置它的垂直對齊方式為middle,使其在行內垂直居中對齊。同時,我們取消了行高,防止文本被撐高導致整個元素高度增加。最后,我們使用transform屬性將文本向下平移一定距離(0.3em),實現了下沉的效果。
需要注意的是,由于不同字體的字符寬度和高度不同,所以需要根據具體情況進行微調。同時,在使用時也要考慮到跨平臺的兼容性問題,建議使用前先進行測試。