CSS 字垂直拉長技巧 在網頁設計中，我們經常需要設置字體的垂直拉伸效果來實現某種視覺效果，比如標題或者徽標的設計。下面我將介紹一種CSS技巧，可以讓您輕松地實現字體的垂直拉長效果。 首先，我們需要確定我們要形成一個什么形狀的垂直拉長效果，選擇一個需要進行垂直拉長的字體，我在這里選擇的是“Verlag Bold”。 啟用Verlag Bold字體之前，我們需要檢查該字體是否在你的設備上可用。您可以使用@font-face CSS規則來加載外部字體文件，使其在您的網站上可用。 @font-face { font-family: 'VerlagBold'; src: url('verlag-bold.woff2') format('woff2'); font-weight: bold; font-style: normal; font-display: swap; } 接下來，我們需要使用CSS transform屬性將該字體進行垂直拉長權。我們可以設置transform-origin屬性來指定變換的原始點。如果您想要一個相對準確的測量值，您可以使用CSS calc函數，來根據變換的原始點進行計算。 p { font-family: 'VerlagBold'; font-size: 60px; transform: scaleY(1.5); transform-origin: center bottom; line-height: calc(1em * 1.5); } 上面的代碼塊中，我們使用scaleY()函數對字體進行了一次垂直拉長，原始變換點設置為字體的中心點底部。我們還設置了一些額外的樣式，包括字體大小、行高等，使得其呈現出更好的視覺效果。 現在，當您在您的HTML文檔中使用了該CSS樣式后，您的所選字體將會呈現出垂直拉長的效果，如下圖所示。 請注意，上面的示例只是一種方式，來通過CSS垂直拉長字體。掌握了這個技巧后，您可以自己設計出更多樂趣無窮的效果，以帶給您的用戶更優秀的視覺體驗。