文风字体 - 感受字体之美

快速开始

API/CSS 接口使用说明

通过 /api/css 接口可以动态获取字体的CSS样式文件，支持多种参数配置。

接口地址

https://app.windfonts.com/api/css?family=:fontFamily&subset=:subset&lang=:lang

请求参数

参数名	类型	必填	说明
family	string	是	字体名称，支持多种格式： • `FontName:wght@400;700` - 指定权重 • `FontName:lang@zh` - 指定语言 • `FontName:wght@400:lang@zh` - 同时指定权重和语言 • `FontName1\|FontName2` - 多个字体
subset	string	否	字体子集，直接指定变体，优先级大于wght，支持：`regular`, `bold`, `light`, `medium`, `semibold`, `thin`, `extralight`, `extrabold`, `black` 等
lang	string	否	语言代码，传 `zh` 表示需要纯中文字符（family参数中的lang@zh优先级更高）

使用示例

基础用法：

<head>
    <link rel="preconnect" href="https://cn.windfonts.com" />
    <link
        rel="stylesheet"
        type="text/css"
        crossorigin="anonymous"
        href="https://app.windfonts.com/api/css/?family=cszt&subset=regular"
    />
  
    <!-- 此中文网页字体由文风字体（Windfonts）免费提供，您可以自由引用，请务必保留此授权许可标注 https://wenfeng.org/license -->
</head>

使用权重格式：

<!-- 单个字体多权重 -->
<link href="https://app.windfonts.com/api/css/?family=:fontFamily:wght@400;700" rel="stylesheet" />

<!-- 多个字体 -->
<link href="https://app.windfonts.com/api/css/?family=:fontFamily:wght@400|other:wght@700" rel="stylesheet" />

指定子集（优先级高于权重）：

<link href="https://app.windfonts.com/api/css/?family=:fontFamily:wght@400;700&subset=bold" rel="stylesheet" />

提示 : 如果只想要中文字体的样式，可将上面的Link标签替换成下面的标签，引入后对同一段文字中英文混用的情况，那么字体样式只会对中文字符生效

纯中文字符：

<!-- 方式1：通过family参数指定 -->
<link href="https://app.windfonts.com/api/css/?family=cszt:lang@zh" rel="stylesheet" />

<!-- 方式2：通过单独的lang参数 -->
<link href="https://app.windfonts.com/api/css/?family=cszt&subset=regular&lang=zh" rel="stylesheet" />

<!-- 方式3：同时指定权重和语言 -->
<link href="https://app.windfonts.com/api/css/?family=cszt:wght@400;700:lang@zh" rel="stylesheet" />

使用字体

className 使用字体的dom节点类名
fontFamily 字体名称，固定值，不可修改
font-weight 字体粗细，部分字体可指定100-900的之内的整数值
font-style 字体样式，通常有italic, oblique, normal, revert, revert-layer

提示：如果字体拥有多个子字体样式，推荐每次只引入一个字体变体，避免多个变体同时引入时可能出现的样式覆盖问题。可使用fontSubfamily作为font-weight的值指定使用对应的子字体样式

<className> {
  font-family: <fontFamily>;
  font-weight: <weight>;
  font-style: <style>;
}