前端 ttf / woff2 字体资源完整优化方案

前端 ttf / woff2 字体资源完整优化方案一、核心基础认知字体格式优先级woff2 woff ttf otf• woff2压缩率最高比ttf小40%~70%现代浏览器全支持生产首选• ttf无压缩体积巨大仅作兼容兜底线上不建议直接加载浏览器支持woff2Chrome/Firefox/Safari/Edge 全部支持仅极老设备不兼容可忽略。二、第一步字体精简最关键大幅瘦身ttf 原生包含几万汉字、多余符号、多字重必须裁剪只保留项目用到的字符。方案1FontToolsPython批量自动化安装pip install fonttools裁剪命令只保留指定文字保留字符常用汉字字母数字标点pyftsubset source.ttf–text“0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ。一二三四五六七八九十你好项目页面标题内容”–flavorwoff2–outputfont-cut.woff2参数说明• --text写页面所有用到的文字只保留这些字形• --flavorwoff2直接输出woff2无需二次压缩• --unicodes大批量生僻字可用Unicode范围代替text方案2在线工具无需安装Font Squirrel Webfont Generator推荐上传ttf → 勾选 Expert• Subset填入用到的字符• Formats只勾选 WOFF2下载后直接拿到裁剪好的woff2。Transfonter同样支持字符子集、导出woff2。方案3工具字重合并多字重常规/粗体分开裁剪不要打包在一个字体文件按需拆分。三、第二步字体文件格式转换 压缩禁止直接引入ttf到线上ttf仅作为源文件转换规则• 开发源文件ttf/otf• 线上产物仅 woff2压缩对比示例原生ttf中文字体8~15MB裁剪后woff2几十KB ~ 300KB四、第三步CSS 加载优化性能核心font-face 标准最简写法font-face {font-family: “CustomFont”;src: url(“/fonts/font.woff2”) format(“woff2”);font-weight: 400;font-style: normal;/* 关键优化属性/font-display: swap; /无FOIT阻塞推荐//font-display: fallback; 追求极致CLS用 */}font-display 区别• swap先显示系统默认字体字体下载完成后替换无白框阻塞业务首选• block文字空白等待字体不推荐• fallback短时间空白超时永久使用系统字体减少布局偏移CLS按需拆分字体分文件加载不要把全部字重塞进一个文件/* 常规字重/font-face {font-family: “CustomFont”;src: url(“/fonts/font-400.woff2”) format(“woff2”);font-weight: 400;}/粗体单独文件 */font-face {font-family: “CustomFont”;src: url(“/fonts/font-700.woff2”) format(“woff2”);font-weight: 700;}页面只用400就不会加载700大文件。控制字体加载范围• 仅中文页面加载中文字体英文页面只用系统无衬线字体• 小图标、数字不要依赖自定义字体改用SVG图标五、第四步网络传输优化静态资源层面开启服务器压缩woff2本身已是压缩格式不要再开gzip/br二次压缩会反向变大。Nginx 配置示例location ~* .(woff2)$ {root /static;expires 30d; /* 长期缓存 */add_header Cache-Control “public, max-age2592000”;关闭gzipgzip off;}2. 强缓存策略字体文件极少改动设置30天缓存文件名加hash防更新缓存font.abc123.woff2构建工具Vite/Webpack打包自动生成hash后缀。CDN 分发字体放静态CDN并行加载避免同域名资源排队。六、第五步构建工具打包优化Vite/WebpackVite 内置优化配置 assets 分离字体到独立目录// vite.config.jsexport default defineConfig({build: {assetsDir: “fonts”,rollupOptions: {output: {assetFileNames: (assetInfo) {if (assetInfo.name.endsWith(“.woff2”)) {return “fonts/[name]-[hash][extname]”;}return “assets/[name]-[hash][extname]”;},},},},});禁止内联字体Vite默认小于4kb转base64字体不要内联会增大JS/CSS体积export default defineConfig({assetsInclude: [],build: {chunkSizeWarningLimit: 1000,},});Webpack 处理字体module.exports {module: {rules: [{test: /.(woff2)$/i,type: “asset/resource”,generator: {filename: “fonts/[name].[hash][ext]”,},parser: {dataUrlCondition: {maxSize: 0, // 全部输出文件不转base64},},},],},};七、第六步性能兜底策略避免阻塞、布局抖动预加载关键字体首页核心字体提前请求放到crossorigin 必须加否则Chrome不生效。降级方案优先使用系统字体兜底body {font-family: “CustomFont”, -apple-system, BlinkMacSystemFont, “Microsoft YaHei”, sans-serif;}延迟非关键字体弹窗、次要标题用到的字体不preload等页面渲染完成再加载。八、特殊场景优化大字符集后台/生僻字拆分字体包• 常用字包首页基础文字100KB内• 生僻字分包弹窗/详情页按需动态加载JS动态加载字体分包懒加载async function loadFont() {const font new FontFace(“CustomFont-Big”, “url(/fonts/big.woff2) format(‘woff2’)”);await font.load();document.fonts.add(font);document.body.classList.add(“loaded-big-font”);}// 滚动到对应区域再调用九、避坑清单❌ 线上直接引入ttf体积巨大❌ 不做字符子集完整中文字体十几MB❌ 多个字重打包进一个文件浪费流量❌ 开启gzip压缩woff2文件变大❌ 不加font-display页面文字空白卡顿❌ 小字体转base64内嵌CSS增大首屏CSS体积❌ 不设置缓存每次刷新重复下载字体十、完整优化流程总结源文件ttf → 裁剪子集只保留项目文字导出仅 woff2 格式拆分多字重独立文件CSS 使用 font-display: swap合理 fallbackHTML preload 关键字体懒加载次要字体构建打包分离字体、加hash文件名Nginx/CDN 关闭gzip设置30天强缓存复杂页面做字体分包动态加载