您现在的位置是：网站首页 > 自定义字体@font-face规则文章详情
自定义字体@font-face规则
陈川
【
CSS
】
23690人已围观
4244字
@font-face规则允许开发者引入自定义字体，突破浏览器默认字体限制。通过定义字体名称、来源和格式，可以在网页中使用独特字体风格，提升设计灵活性。
@font-face基本语法
@font-face规则的基本结构如下：
@font-face {
font-family: 'MyCustomFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
关键属性说明：
font-family：定义字体名称（引用时使用）src：指定字体文件路径及格式（可多个来源）font-weight：设置字体粗细（400=normal，700=bold）font-style：定义斜体样式（normal/italic）font-display：控制字体加载期间的显示行为
字体格式与浏览器支持
现代网页主要使用以下字体格式：
| 格式 | 扩展名 | 特点 | 支持浏览器 |
|---|---|---|---|
| WOFF2 | .woff2 | 压缩率最高（比WOFF小30%） | 所有现代浏览器 |
| WOFF | .woff | 广泛兼容的压缩格式 | IE9+及所有现代浏览器 |
| TTF | .ttf | 未压缩的TrueType字体 | 部分旧版移动浏览器 |
| EOT | .eot | IE专用格式 | 仅IE8及以下 |
最佳实践方案：
@font-face {
font-family: 'ModernFont';
src: url('font.woff2') format('woff2'),
url('font.woff') format('woff');
}
多字重与多样式定义
完整字体家族通常需要定义多个变体：
/* 常规体 */
@font-face {
font-family: 'VariableFont';
src: url('font-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
/* 粗体 */
@font-face {
font-family: 'VariableFont';
src: url('font-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
/* 斜体 */
@font-face {
font-family: 'VariableFont';
src: url('font-italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
}
可变字体技术
可变字体（Variable Fonts）通过单个文件支持多种变化：
@font-face {
font-family: 'FlexibleFont';
src: url('variable-font.woff2') format('woff2-variations');
font-weight: 100 900; /* 定义可变范围 */
font-stretch: 75% 125%;
font-style: oblique 0deg 20deg;
}
/* 使用示例 */
.dynamic-text {
font-family: 'FlexibleFont';
font-weight: 356; /* 精确控制字重 */
font-stretch: 110%;
}
字体加载优化策略
font-display属性详解
@font-face {
font-family: 'OptimizedFont';
src: url('font.woff2') format('woff2');
font-display: optional;
}
可选值：
auto：浏览器默认行为（通常等同于block）block：极短阻塞期（约3s），然后使用备用字体swap：立即使用备用字体，字体加载后替换fallback：极短阻塞期（约100ms），短交换期（约3s）optional：极短阻塞期，根据网络条件决定是否加载
预加载关键字体
<head>
<link rel="preload" href="critical-font.woff2" as="font" type="font/woff2" crossorigin>
</head>
实际应用案例
多语言字体解决方案
/* 中文简体 */
@font-face {
font-family: 'GlobalFont';
src: url('chinese-simplified.woff2') format('woff2');
unicode-range: U+4E00-9FFF;
}
/* 日文 */
@font-face {
font-family: 'GlobalFont';
src: url('japanese.woff2') format('woff2');
unicode-range: U+3040-30FF;
}
/* 使用统一字体名 */
body {
font-family: 'GlobalFont', sans-serif;
}
图标字体实现
@font-face {
font-family: 'IconFont';
src: url('icons.woff2') format('woff2');
}
.icon::before {
font-family: 'IconFont';
content: "\e001"; /* Unicode私用区字符 */
}
常见问题解决方案
1. 字体闪烁问题
@font-face {
font-family: 'StableFont';
src: url('font.woff2') format('woff2');
font-display: swap;
}
2. 斜体不生效
@font-face {
font-family: 'CompleteFont';
src: url('font-italic.woff2') format('woff2');
font-style: italic;
font-weight: 400;
}
em {
font-family: 'CompleteFont', serif;
font-style: italic; /* 必须显式声明 */
}
3. 本地字体优先策略
@font-face {
font-family: 'HybridFont';
src: local('Helvetica Neue Bold'),
local('HelveticaNeue-Bold'),
url('fallback-bold.woff2') format('woff2');
font-weight: 700;
}
性能监控与调试
通过CSS Font Loading API控制字体加载：
document.fonts.load('1em MyFont').then(() => {
document.body.classList.add('fonts-loaded');
});
// 监控加载事件
document.fonts.onloadingdone = (event) => {
console.log(`${event.fontfaces.length} 字体加载完成`);
};
Chrome开发者工具中的字体调试：
- 打开Elements面板
- 选中文本元素
- 在Computed标签页查看渲染字体
- 使用Font Editor实时修改
@font-face参数
高级技巧：字体特征设置
@font-face {
font-family: 'TunedFont';
src: url('font.woff2') format('woff2');
font-feature-settings: 'liga' 1, 'kern' 1;
}
.advanced-typography {
font-family: 'TunedFont';
font-variant-numeric: oldstyle-nums;
font-kerning: normal;
}
上一篇： 字体属性的综合设置
