文档

# CSS 或 <style> 嵌入字体的正确示例

大体积字体概述

大体积字体如 CJK 字体通常提供一个名为 result.css 的文件，这是引入和按需加载的关键文件，应使用 @import 方式声明或 <link> 标签引入 ，例如：

@import url('https://static.zeoseven.com/zsft/1/main/result.css');

<link rel="stylesheet" href="https://static.zeoseven.com/zsft/1/main/result.css">

这实际上等同于 <link> 引入了一个 CSS 文件，这个 CSS 文件中已使用 @font-face 声明了所有子集 WOFF2 文件，只需要在一个 CSS 类中正确设置 font-family 即可引入。

使用 result.css 的字体固定为 font-display: swap; 因为 ZeoSeven 认为这是好的。

正确的 font-family 名称应展示在字体详情页的 “嵌入字体” 模块，除非那是错误的，那么就需要打开 result.css 文件查看 @font-face 声明的 font-family 来正确使用。

小体积字体概述

小体积字体如 非 CJK 字体 则直接提供完整字库的 WOFF2 文件，应使用 @font-face 声明，并具有绝对的自由度。

大体积字体使用 CSS 代码嵌入示例

@import url('https://static.zeoseven.com/zsft/1/main/result.css');

html {
      font-family: 'JinzisheTongfang', sans-serif;
}

小体积字体使用 CSS 代码嵌入示例

几乎没有限制，可自定义 font-family 和其它属性，但大体积字体通常不会直接提供完整 WOFF2 文件，因为没有按需加载去加载有时候 20MB 的大字库字体还用不到大部分字符时异常浪费 生命(加载时间) 和服务器资源 ...

@font-face {
      font-family: 'Poppins';
      src: url('https://static.zeoseven.com/zsft/a/main.woff2') format('woff2');
      font-display: swap;
}

html {
      font-family: 'Poppins';
}

避免和 fonts.googleapis.com 的使用方式混淆

ZSFT CDN 和 fonts.googleapis.com 的实现原理略有不同，并不支持使用类似 ?family=JinzisheTongfang:wght@400display=swap 的查询字符串来动态生成 CSS 文件，那样需要很大的算力资源，而 ZSFT 则直接提供纯静态的 result.css 文件，更多自定义属性应该在自己的样式表中设定。

# 大体积字体使用 JavaScript 引入实现冗余

概述

实际上，每个以 CSS 提供加载的字体详情页中都有对应的可选的 JS 代码，因为引入 CSS 文件并没有直接像 @font-face 引入一样的后备 URL ，而使用 JS 引入字体不仅实现了冗余，还实现了异步加载和更好的扩展性。

代码解释

/* 使用 IIFE 表达式避免污染全局命名空间 */
(() => {
    function a (b,c) {
        /* 创建一个新的 link 元素来加载样式表 */
        let d = document.createElement('link');
        d.rel = 'stylesheet';
        /* 设置 link 元素的 href 属性为传入的 CSS 文件 URL */
        d.href = b;
        /* 当加载样式表失败时触发 onerror 事件处理器 */
        d.onerror = function() {
            if (typeof c==='function') {
                c();
            }
        };
        /* 将创建的 link 标签添加到 head 标签 */
        document.head.appendChild(d);
        /* 设置根元素的字体属性，当然， JS 是灵活的，也可以将字体设置到其它元素 */
        document.documentElement.style.fontFamily = 'LXGW ZhenKai';
        document.documentElement.style.fontWeight = 'normal';
    }
    /* 尝试从 CDN 加载样式表，如果失败，则调用回调函数 */
    a ('https://static.zeoseven.com/zsft/2/main/result.css', function () {
    /* 当 CDN 不可用时直接由源服务器提供文件 */
    a ('https://static-host.zeoseven.com/zsft/2/main/result.css');
    });
})();

# CDN 响应标头

static.zeoseven.com 和 static-host.zeoseven.com 的响应标头中，具有一定的相似度，它们都具有以下响应：

Cache-Control

public, max-age=31536000, immutable

这指定了客户端和边缘服务器的缓存行为，即 1 年时间且不会改变，这意味着客户端只需要加载一次这款字体，那么客户端的浏览器将保留字体文件 1 年时间，但因为浏览器的缓存行为和存储空间，实际上可能无法达到。

Access-Control-Allow-Origin

*

这指定了任何主机名都可以对其中的资源进行跨域请求，这是 CDN 服务中常见的响应标头且必须。

Access-Control-Allow-Methods

GET, OPTIONS

这指定了跨域请求允许的请求方法，通常来说，静态资源只需要 GET 和 OPTIONS 方法即可满足使用需求。

Access-Control-Max-Age

31536000

跨域请求会首先发出预检请求来确认目标服务器是否允许跨域，而此标头指定了跨域请求在发出预检请求后，允许跨域或不允许跨域应该保留 1 年，即最大时间 1 年内都不需要再次发出预检请求确认是否允许跨域。

Access-Control-Allow-Credentials

false

这指定了不允许跨域请求携带凭据，当然携带凭据也没有什么作用，因为 ZSFT CDN 完全静态。

# ZeoSeven 通过 Referer 回访看到的错误示例

将 CSS 错误的使用 @font-face 引入

@font-face {
    font-family: "自定义名称";
    src: url('https://static.zeoseven.com/zsft/2/main/result.css');
}

这将导致无法正确引入字体， @font-face 只能引入 ttf, otf, eot, woff, woff2 等字体源文件， CSS 文件需要使用 link 标签或 @import 引入。

按需加载的痛

@font-face {font-family: "自定义名称";src:local("自定义名称"),url("https://static.zeoseven.com/zsft/2/main/0601a1cb4a9f56b374f91d612855ddad.woff2") format("woff2");font-style: normal;font-weight: 400;font-display: swap;}
@font-face {font-family: "自定义名称";src:local("自定义名称"),url("https://static.zeoseven.com/zsft/2/main/5e12300c47a34e65160bae82763f87e6.woff2") format("woff2");font-style: normal;font-weight: 400;font-display: swap;}
/* 此处省略很多 @font-face */
html {
    font-family: "自定义名称";
}

# 字体收录规则

允许的许可协议

SIL Open Font License / OFL / OFLv1.1 / OFLv1
Apache License / Apache 2.0
GNU General Public License / GPL / GPLv3 / GPLv2
MIT License / MIT
BSD License / BSD
CC BY / CC BY-SA / CC BY-ND / CC 0
Do What the Fuck You Want to Public License / WTFPL / WTFPLv2

作者声明 或 专有、其它许可证 条件

不允许的许可协议

IPA Font License / IPA
CC BY-NC
不允许二次分发 / 不允许免费用于商业用途 / 不允许转换

一些许可证未列出，可根据 “作者声明” 标准判断。没有其它条件，只有对许可协议的限制。