是的,CSS3 支持自定义字体,主要通过 @font-face 规则来实现。
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyFont.woff2') format('woff2'),
url('fonts/MyFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
| 格式 | 说明 |
|---|---|
| WOFF / WOFF2 | 推荐,现代浏览器首选(压缩好、体积小) |
| TTF / OTF | 支持广泛,但体积较大 |
| EOT | 仅 IE 支持(已逐渐淘汰) |
| SVG | 旧版 iOS 使用(已基本不用) |
✅ WOFF2 是目前最优选择
所有现代浏览器(Chrome、Firefox、Safari、Edge)都支持 @font-face
IE9+ 也支持(建议使用 WOFF)
woff2font-display: swap; 防止文字不可见@font-face {
font-family: 'MyFont';
src: url('MyFont.woff2') format('woff2');
font-display: swap;
}
✅ CSS3 完全支持自定义字体
✅ 使用 @font-face 即可实现
✅ 推荐 WOFF2 + font-display: swap
如果你需要,我也可以帮你写一套兼容多浏览器的完整字体方案或推荐免费可商用的中文字体。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。