CSS可以用來調整字體大小和類型,以適配各種不同的設備,特別是在移動設備上。CSS3提供了一系列新功能,可以更好地適配手機設備。
/* 使用CSS3媒體查詢適配不同的屏幕尺寸 */ /* 例子:在大于640px的屏幕上使用30px的字體大小 */ @media screen and (min-width: 640px) { body { font-size: 30px; } } /* 使用rem單位來自適應字體 */ /* 例子:在根元素上設置基礎字體大小為16px,也就是1rem */ html { font-size: 16px; } /* 在其他元素上使用rem來設置字體大小 */ p { font-size: 1.2rem; /* 相當于19.2px */ } /* 使用@font-face在不同的設備上加載自定義字體 */ /* 例子:加載一個名為"myfont"的字體文件 */ @font-face { font-family: "myfont"; src: url("myfont.ttf") format("truetype"); } /* 在元素中使用自定義字體 */ p { font-family: "myfont"; }
通過使用CSS3的媒體查詢、rem單位和@font-face,我們可以在移動設備上更輕松地適配字體大小和類型,提高用戶體驗。