使用教程

本教程将指导你如何在项目中使用千字网CDN的中文字体服务。

目录

快速开始

第一步：选择字体

浏览 字体列表，找到你想使用的字体。

第二步：引用字体

在CSS中引用字体：

@import url("https://hanzi.itedev.com/fonts/字体文件夹/result.css");

第三步：应用字体

设置 font-family 属性：

body {
    font-family: '字体族名';
}

完成！ 字体已经可以使用了。

详细步骤

1. 查找字体

访问 font_mapping.toml 文件，查看所有可用字体。

文件格式如下：

[Source+Han+Sans+VF]
family = "Source Han Sans VF"
description = "思源黑体可变字体"

2. 引用字体文件

在CSS文件中添加引用：

@import url("https://hanzi.itedev.com/fonts/Source+Han+Sans+VF/result.css");

可选域名：

3. 应用字体

在CSS中设置字体：

body {
    font-family: 'Source Han Sans VF', sans-serif;
}

h1, h2, h3 {
    font-family: 'Source Han Sans VF', sans-serif;
    font-weight: bold;
}

4. 验证效果

在浏览器中打开你的网页，检查字体是否正确加载。

验证方法：

  1. 打开浏览器开发者工具（F12）
  2. 选择 "Network" 标签
  3. 刷新页面
  4. 查看是否有字体文件加载成功

配置选项

font-display 属性

控制字体加载时的显示行为：

@import url("https://hanzi.itedev.com/fonts/字体文件夹/result.css");

在 result.css 中已默认设置为 swap，你可以修改：

@font-face {
    font-family: '字体族名';
    font-display: swap; /* 可选值: auto, block, swap, fallback, optional */
}

参数说明：

font-weight 属性

通过CSS控制字体粗细：

/* 常规（默认） */
.normal {
    font-weight: normal;
}

/* 粗体 */
.bold {
    font-weight: bold;
}

/* 数值控制 */
.thin {
    font-weight: 100;
}
.extra-bold {
    font-weight: 900;
}

常用值：

值 说明
100 极细
200 特细
300 细
400 / normal 常规
500 中等
600 半粗
700 / bold 粗
800 特粗
900 极粗

font-style 属性

控制字体样式：

/* 常规（默认） */
.normal {
    font-style: normal;
}

/* 斜体 */
.italic {
    font-style: italic;
}

/* 倾斜（模拟斜体） */
.oblique {
    font-style: oblique;
}

示例项目

HTML + CSS

index.html：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>欢迎使用千字网CDN</h1>
    <p>这是一个使用千字网CDN字体的示例页面。</p>
    <p class="bold">这是粗体文本。</p>
    <p class="italic">这是斜体文本。</p>
</body>
</html>

style.css：

@import url("https://hanzi.itedev.com/fonts/Source+Han+Sans+VF/result.css");

body {
    font-family: 'Source Han Sans VF', sans-serif;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

Vue.js 项目

在 Vue 组件中引入：

<template>
  <div class="container">
    <h1>Vue.js 字体示例</h1>
    <p>使用千字网CDN字体</p>
  </div>
</template>

<style>
@import url("https://hanzi.itedev.com/fonts/Source+Han+Sans+VF/result.css");

.container {
  font-family: 'Source Han Sans VF', sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  font-size: 2em;
  margin-bottom: 0.5em;
}
</style>

React 项目

在 React 组件中引入：

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="container">
      <h1>React 字体示例</h1>
      <p>使用千字网CDN字体</p>
    </div>
  );
}

export default App;

App.css：

@import url("https://hanzi.itedev.com/fonts/Source+Han+Sans+VF/result.css");

.container {
    font-family: 'Source Han Sans VF', sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

进阶用法

预加载字体

提升字体加载速度：

<head>
    <link rel="preload" href="https://hanzi.itedev.com/fonts/字体文件夹/result.css" as="style">
    <link rel="stylesheet" href="style.css">
</head>

多字体组合

使用多个字体：

@import url("https://hanzi.itedev.com/fonts/Source+Han+Sans+VF/result.css");
@import url("https://hanzi.itedev.com/fonts/Source+Han+Serif+VF/result.css");

body {
    font-family: 'Source Han Sans VF', sans-serif;
}

.serif-text {
    font-family: 'Source Han Serif VF', serif;
}

字体回退方案

设置字体回退：

body {
    font-family: 'Source Han Sans VF', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

如果主字体加载失败，会依次尝试后续字体。

常见问题

字体没有生效？

  1. 检查CSS是否正确引入
  2. 检查 font-family 名称是否正确
  3. 查看浏览器控制台是否有错误
  4. 确认字体URL可以访问

加载速度慢？

  1. 使用加速域名 https://hanzi.itedev.com
  2. 检查网络连接
  3. 考虑使用 font-display: swap

更多问题请参考 常见问题。

下一步