【Web端】CSS 自定义字体备忘

[v_error]2024年12月1日小编实测 网站打开要会员了，使用时请注意！！[/v_error]

字体格式在线转换：https://www.fontke.com/tool/convfont/

字体文件太大，如果 是只显示LOGO或特定的文字，所以我们可以直接提取需求的文字即可，尽可能的压缩字体文件；

字体文件在线提取：https://www.fontke.com/tool/subfont/

在页面引入字体

//引入自定义字体css
@font-face {
font-family: 'webfont';
font-display: swap;
src: url('//at.alicdn.com/t/webfont_1gqmtvdcodt.eot'); / IE9/
src: url('//at.alicdn.com/t/webfont_1gqmtvdcodt.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
url('//at.alicdn.com/t/webfont_1gqmtvdcodt.woff2') format('woff2'),
url('//at.alicdn.com/t/webfont_1gqmtvdcodt.woff') format('woff'), / chrome、firefox /
url('//at.alicdn.com/t/webfont_1gqmtvdcodt.ttf') format('truetype'), / chrome、firefox、opera、Safari, Android, iOS 4.2+/
url('//at.alicdn.com/t/webfont_1gqmtvdcodt.svg#NotoSansHans-DemiLight') format('svg'); / iOS 4.1- /
}