css 制作字库
制作自定义字库的方法
使用CSS制作自定义字库通常涉及@font-face规则，允许引入非系统字体。以下是具体实现方式：
准备字体文件
确保拥有字体文件的合法使用权，常见格式包括.woff、.woff2、.ttf或.eot。推荐使用woff2格式，因其压缩率高且现代浏览器普遍支持。
定义@font-face规则 在CSS中声明字体家族和源文件路径：
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/custom-font.woff2') format('woff2'),
url('fonts/custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}应用自定义字体 通过CSS选择器指定使用该字体：
body {
font-family: 'MyCustomFont', sans-serif;
}性能优化建议
字体子集化
使用工具如glyphhanger或在线服务提取仅需要的字符集，减少文件体积。例如仅保留中文字符或特定符号。
预加载关键字体 在HTML头部添加预加载提示：
<link rel="preload" href="fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin>设置font-display
控制字体加载期间的渲染行为，swap值确保文本始终可见，避免布局偏移：
@font-face {
font-display: swap;
}动态加载字体技术
JavaScript动态加载 通过事件监听实现按需加载：
document.fonts.load('1em MyCustomFont').then(() => {
document.body.classList.add('fonts-loaded');
});CSS变量控制 结合CSS变量实现主题字体切换：
:root {
--main-font: 'MyCustomFont';
}
body.dark-theme {
--main-font: 'AnotherCustomFont';
}浏览器兼容性处理
多格式备用 为兼容旧版浏览器提供多种字体格式：
@font-face {
src: url('font.eot?#iefix') format('embedded-opentype'),
url('font.woff2') format('woff2'),
url('font.woff') format('woff'),
url('font.ttf') format('truetype');
}检测字体加载 使用Font Face Observer库检测加载状态：
const font = new FontFaceObserver('MyCustomFont');
font.load().then(() => console.log('Font loaded'));可变字体实现
单文件多字重 利用可变字体技术减少HTTP请求：
@font-face {
font-family: 'VariableFont';
src: url('font.woff2') format('woff2-variations');
font-weight: 100 900;
font-stretch: 75% 125%;
}CSS控制字轴 精细调整可变字体参数：
h1 {
font-variation-settings: 'wght' 850, 'slnt' -10;
}
