字体预览
选择下方按钮预览不同服务器字体效果：
传统衬线体
这是一段使用服务器字体的示例文本。通过@font-face规则，我们可以加载服务器上的字体文件并在网页中使用。
注意： 此演示使用系统字体模拟服务器字体效果。实际使用时，请确保字体文件已正确上传到服务器。
实现方法
使用CSS的@font-face规则定义服务器字体：
/* 定义自定义字体 */
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
然后在CSS中使用定义好的字体：
/* 应用自定义字体 */
body {
font-family: 'MyCustomFont', Arial, sans-serif;
}
body {
font-family: 'MyCustomFont', Arial, sans-serif;
}
最佳实践
- 使用WOFF2格式以获得最佳性能
- 提供WOFF格式作为备选方案
- 设置
font-display: swap以避免字体加载时的布局偏移 - 始终指定备用字体族
- 考虑使用字体子集化减小文件大小