美食网站设计方案北京百度公司总部电话
以下是详细方法：
1. 使用系统默认字体
如果只是希望指定字体，可以直接使用 font-family：
body {
font-family: "Microsoft YaHei", "PingFang SC", sans-serif; /* 中英文适配 */
}
2. 使用自定义字体（推荐方法）
步骤 1：准备字体文件
- 格式支持：
.ttf、.woff、.woff2（推荐.woff2，体积更小）。 - 合法来源：确保字体有商用授权（免费字体如 思源黑体、阿里巴巴普惠体）。
步骤 2：通过 @font-face 引入
@font-face {
font-family: "MyFont"; /* 自定义字体名称 */
src: url("fonts/myfont.woff2") format("woff2"), /* 优先加载 */
url("fonts/myfont.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap; /* 避免文字闪烁（异步加载时显示备用字体） */
}
步骤 3：应用字体
body {
font-family: "MyFont", sans-serif; /* 回退到默认无衬线字体 */
}
3. 使用在线字体服务
Google Fonts（需外网）
<!-- 在HTML头部引入 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<!-- CSS中使用 -->
body {
font-family: 'Roboto', sans-serif;
}
国内替代方案（如阿里巴巴普惠体）
@font-face {
font-family: "AlibabaPuHuiTi";
src: url("https://xxx/AlibabaPuHuiTi.woff2") format("woff2");
}
4. 优化加载性能
- 子集化：通过工具（如 Font-spider）提取页面中实际用到的字符，减少字体文件体积。
- 预加载（提升速度）：
<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
注意事项
- 版权问题：确保字体允许网页嵌入（查看字体许可证）。
- 兼容性：
.woff2支持现代浏览器，IE需.eot格式。- 提供多种格式的
src以兼容旧浏览器。
- FOIT/FOUT：通过
font-display: swap避免加载期间文字不可见。
示例项目结构
项目目录/
├── fonts/
│ ├── myfont.woff2
│ └── myfont.woff
└── style.css
在 style.css 中定义 @font-face 后即可全局使用