css 字体库制作
字体库制作基础概念
字体库（Web Font）允许网页使用自定义字体，不受用户设备本地字体限制。通过CSS的@font-face规则实现，需准备字体文件并正确声明。
准备字体文件
- 格式选择：主流浏览器支持的字体格式包括
.woff（推荐）、.woff2（更高效）、.ttf（兼容旧浏览器）。 - 版权合规：确保字体允许商用，或使用开源字体（如Google Fonts、Adobe Fonts）。
- 文件优化：使用工具（如Font Squirrel）压缩字体文件，减少加载时间。
声明 @font-face
在CSS中定义字体族名和文件路径：
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/mycustomfont.woff2') format('woff2'),
url('fonts/mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* 优化加载时的文本显示 */
}应用自定义字体
通过font-family属性调用定义的字体：
body {
font-family: 'MyCustomFont', sans-serif;
}多字重与斜体支持
若字体包含不同字重（如粗体、细体）或斜体，需分别声明：
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/mycustomfont-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/mycustomfont-italic.woff2') format('woff2');
font-weight: normal;
font-style: italic;
}性能优化建议
- 子集化：通过工具提取仅需的字符（如中文常用字），减少文件体积。
- CDN加速：将字体文件托管至CDN提升加载速度。
- 预加载：在HTML中优先加载关键字体：
<link rel="preload" href="fonts/mycustomfont.woff2" as="font" type="font/woff2" crossorigin>
浏览器兼容性处理
- 旧版支持：为IE9以下提供
.eot格式，并添加src: local('☺')绕过IE限制。 - 回退策略：在
font-family中设置备用字体（如sans-serif），确保内容可读性。
通过以上步骤，可高效实现自定义字体库的集成与优化。
