CSS3 的字體變形為我們提供了豐富多樣的字體效果,下面介紹幾種使用 CSS3 實現字體變形的方法。
/* 改變字母大小寫 */ .text { text-transform: uppercase; /* 大寫 */ text-transform: lowercase; /* 小寫 */ text-transform: capitalize; /* 首字母大寫 */ }
使用text-transform
屬性可以輕松實現字母大小寫的變形。可以設置為大寫、小寫、首字母大寫。
/* 改變字母間距 */ .text { letter-spacing: 5px; }
使用letter-spacing
屬性可以改變字母間距,使其更緊密或更寬松。
/* 改變字母與行間距 */ .text { line-height: 1.5; }
使用line-height
屬性可以改變字母與行間距,這也是調整行距的一種方法。
/* 改變字母的字重 */ .text { font-weight: bold; /* 加粗字體 */ font-weight: 100; /* 細體字體 */ }
使用font-weight
屬性可以改變字母的字重,使其更加粗細。
/* 改變字母的顏色 */ .text { color: red; /* 紅色字體 */ }
最后,使用color
屬性可以改變字母的顏色。